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 并且应用程序在开发环境中运行良好,浏览 url 时: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 上.尝试浏览相同的网址时出现以下错误:
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.
如果我删除所有路由并在 IIS 上浏览:http:localhost:4200
,应用程序工作正常.
The application works fine if I remove all the routing and just browse: http:localhost:4200
on the IIS.
推荐答案
我们必须通过添加重写规则让 IIS 回退到 index.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屋!