在 IIS : HTTP Error 404 上托管的 Angular 2

Question

我有一个简单的应用程序，其中一个组件需要来自 url 的某些参数。应用程序中只有一个路由:

const appRoutes: Routes = 
                       path: 'hero/:userId/:languageId',component: HeroWidgetComponent }];

在 Index.html 中，标题中有这个 <base href="/">

我正在使用 webpack，应用程序在开发环境中运行良好，浏览 url 时:http://localhost:4000/hero/1/1 .

但是，当构建用于生产的应用程序并获取分发文件，然后将其托管在 IIS 上时。尝试浏览相同的 url 时出现以下错误:

HTTP Error 404.0 - Not Found
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

如果我删除所有路由并只浏览，应用程序工作正常:http:localhost:4200在 IIS 上。

Answer 1

我们必须通过添加重写规则使 IIS 回退到 index.html。

第 1 步:安装IIS URL Rewrite模块

第 2 步:将重写规则添加到 web.config

   <?xml version="1.0" encoding="utf-8"?>
    <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>