时间戳

首页 > 解决方案 > ASP.Net Web 应用程序路由问题上的 Angular 5 应用程序

asp.net - ASP.Net Web 应用程序路由问题上的 Angular 5 应用程序

问题描述

我在 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.netangularangular2-routingiis-7.5

解决方案

我们将这个 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 应用程序目录中。

推荐阅读