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

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

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

在Index.html中，我在标题

我正在使用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

第1步： 安装模块

第二步： 将重写规则添加到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>

---

如果您使用的是默认网站下方的IIS应用程序，如

myApp

（则应用程序的URL应具有语法），则应尝试将操作修改为

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

---

第3步：将web.config链接添加到angular.json：（因为在ng构建之后，它将被跳过）

通过在baseurl后添加#修改角度布线：

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

在app-routing.module.ts中，与RouterModule.forRoot一起添加“，{useHash:true}”

这样，IIS会认为页面上的某个id之后的所有内容都会被忽略。
您的
IIS
服务器需要正确配置，以便将所有角度路由重定向到
index.html
（或触发角度应用程序的html文件）。不幸的是，我不是
IIS
服务器专家，所以我不能给你一个真正的答案如何准确地做到这一点。我在Godaddy上托管。我遵循了这个步骤，但不必安装IIS URL重写，而且它可以正常工作。@mapussah，可能是因为这个模块已经安装。您好，我遵循了相同的步骤，但在我的本地IIS中仍然会出现404错误。我下载了URL重写从给定的链接在回答后，执行它说已经安装。你能告诉我我错过了什么吗？我使用Angular 4、@Angular/cli、C#Web API和VS 2015开发应用程序。@mapussah可能是因为您创建了Visual Studio Angular模板，该模板随Web.config文件一起提供。如何在IIS网站配置下进行此更改，而不必使用Web.config文件尽管此解决方案已过时，在任何情况下，它都可以集成到共享服务器上的项目中，您将无法安装“重写”
"architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                         ..........
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            **"src/web.config"**
                        ]

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