ASP.Net Web 应用程序路由问题上的 Angular 5 应用程序答案

【问题标题】：Angular 5 app on ASP.Net web app routing issueASP.Net Web 应用程序路由问题上的 Angular 5 应用程序
【发布时间】：2019-01-26 03:30:01
【问题描述】：

我在 ASP.NET Web 应用程序内部署在 IIS 7.5 上的 Angular 5 应用程序遇到以下问题。

假设 Angular 应用的 url 如下：

https://MyWebSite.com/MyApp/AngularApp/#

在 UAT 上，使用该路径，应用程序自动路由到默认路由并显示我的 Angular 应用程序的默认视图。

在生产中，网站无法加载，在点击该路径后，我只收到“等待响应...”消息。没有错误，没有 404，什么都没有，网站只是永远挂在那个阶段，甚至按 ctrl+F5 都不起作用，我不得不关闭浏览器才能再次得到网站的响应。

我可以通过更改路径来修复它：

https://MyWebSite.com/MyApp/AngularApp/index.html#main

这是我的路线代码：

const routes: Routes = [
 {
   path: '',
   component: MainComponent
 },
 {
   path: 'main',
   component: MainComponent
 },
 {
   path: 'create',
   component: CreateWcComponent
 },
 { path: '**', redirectTo:'', pathMatch: 'full' }
];

@NgModule({
    imports: [
     RouterModule.forRoot(routes, {useHash: true})
    ],
    exports: [
      RouterModule
    ]
...

显然对我来说这是一个 IIS 配置，但由于我无法直接访问服务器，因此无法进行比较。请就如何部署提供任何建议。

【问题讨论】：

标签： asp.net angular angular2-routing iis-7.5

【解决方案1】：

我们将这个 IIS web.config 文件包含在我们部署到 IIS 服务器上的所有 Angular 应用程序中：

<?xml version="1.0"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  https://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" 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>

只需将其放入应用程序的根目录中-在 Angular 应用程序目录中。

【讨论】：