Html 在 IIS 7.5 上使用 Angular2 路由
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38209656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get Angular2 routing working on IIS 7.5
提问by Per Larsen
I have been learning Angular2. The routing works just fine when running on the nodejs lite-server. I can go to the main (localhost:3000) page and move through the application. I can also type localhost:3000/employee and it will go to the requested page.
我一直在学习Angular2。在 nodejs lite-server 上运行时，路由工作得很好。我可以转到主 (localhost:3000) 页面并浏览应用程序。我也可以输入 localhost:3000/employee，它会转到请求的页面。
The app will eventually live on an Windows IIS 7.5 server. The routing works fine if I start at the main page (localhost:2500), I am able to move through application with out any problems. Where I run into a problem is when trying to go directly to an page other then the main landing page (localhost:2500/employee). I get a HTTP Error 404.0.
该应用程序最终将运行在 Windows IIS 7.5 服务器上。如果我从主页 (localhost:2500) 开始，路由工作正常，我可以毫无问题地浏览应用程序。我遇到问题的地方是尝试直接转到主登录页面（localhost:2500/employee）以外的页面。我收到一个 HTTP 错误 404.0。
Here is my app.component file that handles the routing.
这是我处理路由的 app.component 文件。
import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { HTTP_PROVIDERS } from '@angular/http';
import { UserService } from './services/users/user.service';
import { LogonComponent } from './components/logon/logon.component';
import { EmployeeComponent } from './components/employee/employee.component';
@Component({
selector : 'opi-app',
templateUrl : 'app/app.component.html',
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS, UserService, HTTP_PROVIDERS]
})
@RouteConfig([
{
path: '/',
name: 'Logon',
component: LogonComponent,
useAsDefault: true
},
{
path: '/employee',
name: 'Employee',
component: EmployeeComponent
}
])
export class AppComponent { }
I would like to say I understand the issue. IIS is looking for a direcotry of /employee but it does not exist. I just do not know how to make IIS aware of the routing.
我想说我理解这个问题。IIS 正在寻找 /employee 的目录，但它不存在。我只是不知道如何让 IIS 知道路由。
回答by Judson Terrell
(For angular 2, angular 4)
（对于角 2、角 4）
Create a web.config file as in mentioned article.
按照上述文章创建一个 web.config 文件。
<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>
Place it in the root directory (same as index.html) of your site. Mine is in the dist folder (angular-cli project).
将它放在您网站的根目录（与 index.html 相同）中。我的是在 dist 文件夹（angular-cli 项目）。
After deploying, go to IIS if you have the access and you can click on the rewrite-rules icon and see that it read this config. If you do not see and icon for rewrite rules, you will need to enable the module under "modules" icon. This code snippet was not written by be but I wanted to share better implementation details.
部署后，如果您有访问权限，请转到 IIS，您可以单击 rewrite-rules 图标并查看它是否读取了此配置。如果您没有看到重写规则的 和 图标，则需要在“模块”图标下启用该模块。此代码片段不是由 be 编写的，但我想分享更好的实现细节。
回答by Arpit Agarwal
回答by Jan Zahradník
Using URL rewrite module will kill routing path inside application. I've changed Error page for 404 Not Found response to my index.htmlfile. This will not change the URL in browser, but server returns the whole application.
使用 URL 重写模块将终止应用程序内部的路由路径。我已经更改了对我的index.html文件的404 Not Found 响应的错误页面。这不会更改浏览器中的 URL，但服务器会返回整个应用程序。
HowTo: Site->Application->Error Pages from context menu on Status Code 404 choose Edit... and choose option Execute URL on this site. Enter /index.htmland press OK. Note the path is from site root so you may need to include your app path.
操作方法：站点-> 应用程序-> 错误页面，从状态代码 404 的上下文菜单中选择编辑...，然后选择在此站点上执行 URL 选项。输入/index.html并按确定。请注意，该路径来自站点根目录，因此您可能需要包含您的应用程序路径。
回答by t2t
My angular 6 app is running in a subfolder and I had problems with the appoach to redirect into the subfolder. Instead I redirect directly to the index.html
我的 angular 6 应用程序在一个子文件夹中运行，我在重定向到子文件夹时遇到了问题。相反，我直接重定向到 index.html
Step 1.) Build angular app with the --base-hrefflag like this: ng build --prod --base-href /ng/
步骤 1.) 使用如下--base-href标志构建 angular 应用程序：ng build --prod --base-href /ng/
Step 2.) Create a web.config in this folder with the redirct to the index.html like this:
第 2 步。）在此文件夹中创建一个 web.config，并像这样重定向到 index.html：
<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>
回答by jaycer
If you use a Core 2.1 project, you can skip the web.config rewrite rules and accomplish Angular deep linking by putting this code at the bottom of your Startup.cs.
如果您使用的是 Core 2.1 项目，您可以跳过 web.config 重写规则并通过将此代码放在Startup.cs.
app.Use(async (context, next) =>
{
context.Response.ContentType = "text/html";
await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
});
回答by Raghav
If you are having url other than root of the application you can try this:
如果您的 url 不是应用程序的根目录，您可以尝试以下操作：
<rule name="AngularJS Routes" stopProcessing="true">
<match url="(.*)mypath/myangularapp/dashboard(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/mypath/myangularapp/dashboard/index.html" />
</rule>
Make sure you have built your Angular app via the following command:
确保您已通过以下命令构建了 Angular 应用程序：
ng build --base-href=/mypath/myangularapp/dashboard/
