在IIS 7.5上使用Angular2路由 [英] Get Angular2 routing working on IIS 7.5

问题描述

我一直在学习Angular2.在nodejs精简服务器上运行时，路由工作正常.我可以转到主页(localhost:3000)并浏览该应用程序.我也可以输入localhost:3000/employee，它将转到请求的页面.

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.

该应用最终将在Windows IIS 7.5服务器上运行.如果我从主页(localhost:2500)开始，则路由工作正常，我能够顺利通过应用程序而不会出现任何问题.我遇到问题的地方是尝试直接转到除主登录页面之外的其他页面(localhost:2500/employee).我收到HTTP错误404.0.

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.

这是我处理路由的app.component文件.

Here is my app.component file that handles the routing.

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了解路由.

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.

推荐答案

(对于角度2，角度4)

(For angular 2, angular 4)

按照上述文章创建一个web.config文件.

Create a web.config file as in mentioned article.

<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项目)中.

Place it in the root directory (same as index.html) of your site. Mine is in the dist folder (angular-cli project).

部署后，如果有访问权限，请转至IIS，然后可以单击rewrite-rules图标并看到它读取了此配置.如果看不到重写规则的图标，则需要在模块"图标下启用该模块.该代码段不是由be编写的，但我想分享更好的实现细节.

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 7.5上使用Angular2路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！