在IIS 7.5上使用Angular2路由

Question

我一直在学习Angular2。 在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了解路由。

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，然后单击rewrite-rules图标，并查看它已读取此配置。 如果看不到重写规则的图标，则需要在“模块”图标下启用该模块。 该代码段不是由be编写的，但我想分享更好的实现细节。

Answer 2

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

并为我工作在IIS 8样本的web.config片段是在这里 。

Answer 3

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

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

Answer 4

我的angular 6应用程序正在子文件夹中运行，而我在重定向到子文件夹中时遇到问题。 相反，我直接重定向到index.html

步骤1.）使用--base-href标志ng build --prod --base-href /ng/应用，如下所示： 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>

Answer 5

如果您使用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"));
   });

资源

Answer 6

如果您使用的不是应用程序的root，则可以尝试以下操作：

 <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/