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

【问题标题】：Angular 2 Hosted on IIS: HTTP Error 404Angular 2 托管在 IIS 上：HTTP 错误 404
【发布时间】：2017-10-02 19:30:41
【问题描述】：

我有一个简单的应用程序，其中一个组件需要来自 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.

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

【问题讨论】：

您的IIS 服务器需要正确配置，以便所有角度路由都重定向到index.html（或触发角度应用程序的html 文件）。不幸的是，我不是 IIS 服务器专家，所以我不能给你一个真正的答案，如何做到这一点。

标签： angular iis http-status-code-404 angular2-routing

【解决方案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>

【讨论】：

我在 Godaddy 上托管。我遵循了这个，但不必安装 IIS URL Rewrite，它就可以工作。
@mapussah，可能是因为这个模块已经安装了。
嗨，我按照相同的步骤操作，但在我的本地 IiS 中仍然出现 404 错误。我从答案中的给定链接下载了 URL 重写，执行后它说已经安装。你能分享我缺少的东西吗？我使用 Angular 4、@angular/cli、C# Web API、VS 2015 开发了应用程序。
@mapussah 可能是因为您创建了带有 web.config 文件的 Visual Studio 角度模板
如何在 IIS 网站配置下进行此更改，而不是必须有 web.config 文件

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

如果您在默认网站下方使用像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/

【讨论】：

【解决方案4】：

通过在baseurl之后添加#来修改角度路由：

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

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

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

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

【讨论】：

虽然这个解决方案已经过时，但无论如何它都可以集成到共享服务器上的项目中，您将无法安装“重写”

【解决方案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>

【讨论】：

这个答案可以改进。你能提供为什么 OP 应该粘贴这个配置吗？为什么这应该起作用并解决问题？

【解决方案6】：

不安装 IIS URL Rewrite

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

您可以将 IIS 配置为在请求带有路径和/或参数的路由（也称为 深层链接）时返回 index.html。

在 IIS 中手动

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

无需重新启动应用程序池，只需浏览到您的深层链接即可。服务器将响应状态码 200。（在 2021 年在带有 IIS 10 的 Windows Server 2016 上测试，假设您有一个 index.html，如果没有，请使用第 5 步中您的应用程序所在的文件)。

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

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

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

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

【讨论】：