带有 URL 错误的 Angular 5 路由和导航答案

【问题标题】：Angular 5 routing and navigation with URL Error带有 URL 错误的 Angular 5 路由和导航
【发布时间】：2018-05-19 02:46:22
【问题描述】：

我正在使用 Angular 5 开发一个小项目，我在代码中进行了路由器配置，如果我单击导航栏中的菜单，我可以在组件之间导航，但是如果我通过 URL 输入组件，则会出现错误。

如果您通过此https://fit.simpleclouder.com/ 输入链接，它可以工作。

如果您通过此https://fit.simpleclouder.com/home 输入链接，它将不起作用。

如果通过这个https://fit.simpleclouder.com/benefics输入链接无效。

如果我点击网站上的菜单，它会起作用。

在 ftp 的主文件夹中，我在文件夹“laravel/public/fit”上有这个项目，因为我在主文件夹上有另一个项目 Laravel。

【问题讨论】：

标签： javascript html angular typescript angular5

【解决方案1】：

这不是角度问题，而是在您的 IIS 或 Apache 服务器中为 IIS 制作 web.config 并放置

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

在 Apache 中制作 .htaccess 文件并放入

RewriteEngine On  
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

玩得开心并根据需要编辑路线

【讨论】：

我编辑 /home/simplecl/laravel/public/.htaccess 和 /home/simplecl/laravel/public/web.config 继续同样的错误

【解决方案2】：

而不是https://fit.simpleclouder.com/home

转到此网址https://fit.simpleclouder.com/#/home。

为了简单起见，我们使用基于哈希的路由。

在您的路由器配置中传递 { useHash: true } 作为第二个参数

const rootRouting: ModuleWithProviders = RouterModule.forRoot([
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
], { useHash: true });

因此这将使基于散列的路由保证在几乎任何环境设置中都能正常工作。

【讨论】：

那么你可能不得不使用 PathLocationStrategy