获取在IIS 7.5上运行的Angular2路由

Question

我一直在学习Angular2.在nodejs lite-server上运行时,路由工作正常.我可以转到主(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知道路由.

Answer 1

(角度2,角度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"图标下启用该模块.这段代码片段不是由我编写的,但我想分享更好的实现细节.

Answer 2

您应该使用URL重写模块来实现此目的.这里提供了有关如何使用它的非常详细的信息

在IIS 8上为我工作的示例web.config片段就在这里.

Answer 3

使用 URL 重写模块将杀死应用程序内部的路由路径。我已将 404 Not Found 响应的错误页面更改为我的index.html文件。这不会改变浏览器中的 URL，但服务器会返回整个应用程序。

操作方法：从状态代码 404 上的上下文菜单中的“站点”->“应用程序”->“错误页面”，选择“编辑...”，然后选择“在此站点上执行 URL”选项。输入/index.html并按确定。请注意，路径来自站点根目录，因此您可能需要包含您的应用程序路径。