让 Angular2 路由在 IIS 7.5 上工作
Get Angular2 routing working on IIS 7.5
我一直在学习Angular2。当 运行ning 在 nodejs 精简服务器上时,路由工作得很好。我可以转到主 (localhost:3000) 页面并浏览应用程序。我也可以输入 localhost:3000/employee,它将转到请求的页面。
该应用最终将运行在 Windows IIS 7.5 服务器上。如果我从主页 (localhost:2500) 开始,路由工作正常,我可以毫无问题地浏览应用程序。我 运行 遇到问题的地方是尝试直接转到主登录页面以外的页面 (localhost:2500/employee)。我收到 HTTP 错误 404.0.
这是我的 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 { }
我想说我理解这个问题。 IIS 正在寻找 /employee 的目录,但它不存在。我只是不知道如何让 IIS 知道路由。
你应该使用 URL rewrite module to achieve this. A very detailed info on how to use it is provided here
在 IIS 8 上对我有用的示例 web.config 片段是 here。
使用URL 重写模块将终止应用程序内部的路由路径。我已经为我的 index.html
文件更改了 404 Not Found 响应的错误页面。这不会改变浏览器中的 URL,但服务器 returns 整个应用程序。
HowTo:从状态代码 404 的上下文菜单中的站点->应用程序->错误页面选择编辑...,然后在此站点上选择选项执行 URL。输入 /index.html
并按确定。请注意该路径来自站点根目录,因此您可能需要包含您的应用程序路径。
(对于 angular 2,angular 4)
按照上述文章创建一个 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>
将其放在您网站的根目录(与 index.html 相同)。我的在 dist 文件夹中(angular-cli 项目)。
部署后,如果您有访问权限,请转到 IIS,您可以单击重写规则图标,看到它读取了此配置。如果您没有看到重写规则的图标,则需要在 "modules" 图标下启用该模块。此代码片段不是 be 编写的,但我想分享更好的实现细节。
我的 angular 6 应用程序 运行 在子文件夹中,我在重定向到子文件夹的方法时遇到问题。相反,我直接重定向到 index.html
步骤 1.) 使用 --base-href
标志构建 angular 应用程序,如下所示:ng build --prod --base-href /ng/
步骤 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>
如果您使用 Core 2.1 项目,您可以跳过 web.config 重写规则并通过将此代码放在 Startup.cs
的底部来完成 Angular 深度链接。
app.Use(async (context, next) =>
{
context.Response.ContentType = "text/html";
await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
});
如果您使用的 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>
确保您已通过以下命令构建了 Angular 应用程序:
ng build --base-href=/mypath/myangularapp/dashboard/
我一直在学习Angular2。当 运行ning 在 nodejs 精简服务器上时,路由工作得很好。我可以转到主 (localhost:3000) 页面并浏览应用程序。我也可以输入 localhost:3000/employee,它将转到请求的页面。
该应用最终将运行在 Windows IIS 7.5 服务器上。如果我从主页 (localhost:2500) 开始,路由工作正常,我可以毫无问题地浏览应用程序。我 运行 遇到问题的地方是尝试直接转到主登录页面以外的页面 (localhost:2500/employee)。我收到 HTTP 错误 404.0.
这是我的 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 { }
我想说我理解这个问题。 IIS 正在寻找 /employee 的目录,但它不存在。我只是不知道如何让 IIS 知道路由。
你应该使用 URL rewrite module to achieve this. A very detailed info on how to use it is provided here
在 IIS 8 上对我有用的示例 web.config 片段是 here。
使用URL 重写模块将终止应用程序内部的路由路径。我已经为我的 index.html
文件更改了 404 Not Found 响应的错误页面。这不会改变浏览器中的 URL,但服务器 returns 整个应用程序。
HowTo:从状态代码 404 的上下文菜单中的站点->应用程序->错误页面选择编辑...,然后在此站点上选择选项执行 URL。输入 /index.html
并按确定。请注意该路径来自站点根目录,因此您可能需要包含您的应用程序路径。
(对于 angular 2,angular 4)
按照上述文章创建一个 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>
将其放在您网站的根目录(与 index.html 相同)。我的在 dist 文件夹中(angular-cli 项目)。
部署后,如果您有访问权限,请转到 IIS,您可以单击重写规则图标,看到它读取了此配置。如果您没有看到重写规则的图标,则需要在 "modules" 图标下启用该模块。此代码片段不是 be 编写的,但我想分享更好的实现细节。
我的 angular 6 应用程序 运行 在子文件夹中,我在重定向到子文件夹的方法时遇到问题。相反,我直接重定向到 index.html
步骤 1.) 使用 --base-href
标志构建 angular 应用程序,如下所示:ng build --prod --base-href /ng/
步骤 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>
如果您使用 Core 2.1 项目,您可以跳过 web.config 重写规则并通过将此代码放在 Startup.cs
的底部来完成 Angular 深度链接。
app.Use(async (context, next) =>
{
context.Response.ContentType = "text/html";
await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
});
如果您使用的 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>
确保您已通过以下命令构建了 Angular 应用程序:
ng build --base-href=/mypath/myangularapp/dashboard/