在IIS上托管的Angular 2：HTTP错误404 [英] Angular 2 Hosted on IIS: HTTP Error 404

问题描述

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

I have simple app with one component that expects certain parameters from url. there is only one route in the application:

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

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

In the Index.html, I have this in the header <base href="/">

我正在使用webpack，当浏览网址时，应用程序在开发环境中运行正常： http：// localhost：4000 / hero / 1/1 。

I am using webpack and the application runs fine on development environment, when browsing the url: http://localhost:4000/hero/1/1.

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

However, when building the app for production and getting the distribution files, then hosting that on IIS. I get the following Error when trying to browse the same 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 ：IIS上的localhost：4200 。

The application works fine if I remove all the routing and just browse: http:localhost:4200 on the IIS.

推荐答案

我们必须让IIS回退到索引。 html通过添加重写规则。

We have to make IIS fall back to index.html by adding a rewrite rule.

第1步：
安装 IIS URL重写 模块

步骤2：
向web.config添加重写规则

Step 2: Add a rewrite rule to 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上托管的Angular 2：HTTP错误404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！