Angular 2 托管在 IIS 上：HTTP 错误 404

Question

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

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

在Index.html中，我在header<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>

Answer 2

如果您在默认网站下方使用类似 myApp 的 IIS 应用程序（那么您的应用程序的 URL 应该具有语法 http://localhost/myApp/my-angular-route），那么您应该尝试修改动作为

<action type="Rewrite" url="/myApp/"/>;

然后它适用于我的环境，没有任何问题。

可在此处找到分步说明： https://blogs.msdn.microsoft.com/premier_developer/2017/06/14/tips-for-running-an-angular-app-in-iis/

Answer 3

第 3 步： 添加 web.config link 到 angular.json：（因为在 ng build 之后它将被跳过）

"architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                         ..........
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            **"src/web.config"**
                        ]

Answer 4

通过在 baseurl:

后添加 # 来修改 angular 路由

http://localhost:4200/yourApp#/subPageRoute

在 app-routing.module.ts 上加上 RouterModule.forRoot 添加“, { useHash: true }”

RouterModule.forRoot(routes, { useHash: true })

这样 IIS 就会认为 # 之后的所有内容都是页面上的某个 ID 并忽略它。

Answer 5

将此web.config复制并粘贴到您的根文件夹

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
 
  <rewrite>
    <rules>
      <rule name="Angular 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="./index.html" />
      </rule>
    </rules>
  </rewrite>
 
</system.webServer>
</configuration>

Answer 6

不安装IISURL重写

正如@tftd 在问题的评论中解释的那样，IIS 需要知道在找不到匹配的文件或文件夹时如何处理请求。

您可以将 IIS 配置为 return index.html 每当具有路径 and/or 参数的路由（也称为 深 link) 请求。

在 IIS 中手动

Select 您的站点在 IIS 管理器中
打开 错误页面 IIS 部分中的图标
打开状态码404列表项
Select 在此站点上执行 URL 单选按钮
输入'/index.html'
点击确定

不需要重启应用程序池，直接浏览到你的深度link。服务器将以状态代码 200 响应。（在 2021 年使用 IIS 10 在 Windows Server 2016 上测试，假设您有 index.html，如果没有，请使用您的应用程序在步骤 5 中植根的文件）。

上述手动过程添加或更改了 httpErrors 部分 web.config:

<configuration>
    <system.webServer>
        <httpErrors>
            <remove statusCode="404" subStatusCode="-1" />
            <error statusCode="404" prefixLanguageFilePath="" path="/index.html" responseMode="ExecuteURL" />
        </httpErrors>
    </system.webServer>
</configuration>

为避免在下一次部署后丢失此更改，请确保您的发布管道保留 httpErrors 部分，如上文 web.config.

这适用于 Angular 和 React 应用程序。

Angular 2 托管在 IIS 上：HTTP 错误 404

Angular 2 Hosted on IIS: HTTP Error 404

iis

http-status-code-404

angular2-routing

angular