在IIS 7.5上如何使Angular2路由正常工作

Question

我一直在学习Angular2。当在nodejs的lite-server上运行时，路由正常工作。我可以进入主页（localhost:3000），并在应用程序中移动。我也可以输入localhost:3000/employee，并且它将转到请求页面。

该应用程序最终将部署在Windows IIS 7.5服务器上。如果我从主页（localhost:2500）开始，路由就可以正常工作，我可以毫无问题地浏览整个应用程序。但是，当尝试直接进入除主要登陆页面以外的其他页面（例如 localhost:2500/employee）时，我会遇到 HTTP Error 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意识到路由。

- Per Larsen

---

你使用了哪个 ASP.NET 框架？MVC？.NET Core？ - maxisam

不使用asp.net框架。仅限Angular2。包括HTML，CSS和Javascript。 - Per Larsen

你解决了吗？ - Gerardo Tarragona

你介意采纳我的答案吗？- Judson - Judson Terrell

Answer 1

(适用于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，并单击rewrite-rules图标，查看它是否读取了此配置。如果您没有看到rewrite rules的图标，您需要在“modules”图标下启用该模块。此代码片段不是我编写的，但我想分享更好的实现细节。

- Judson Terrell

---

谢谢，你刚刚让我开心了。我已经坐了一会儿了 :-) - Arianule

如果您有一个“api”后端，您也可以使用此 https://dev59.com/wmcs5IYBdhLWcg3wu2fS - Alex

有什么想法可以将这个规则与允许我从HTTP重定向到HTTPS的规则混合使用吗？ - D.B

Answer 2

你应该使用URL重写模块来实现这一点。如何使用它的非常详细的信息在这里提供。

我在IIS 8上使用的一个示例web.config代码片段可以在这里找到。

- Arpit Agarwal

Answer 3

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

操作步骤：站点-> 应用程序-> 从上下文菜单选择状态码404的错误页面，选择“编辑...”，并选择此站点上的“执行URL”选项。输入 /index.html 并按OK。请注意，路径是从站点根目录开始的，因此您可能需要包括应用程序路径。

- Jan Zahradník

---

对于无法使用重写模块的情况，可以使用Solid。将404更改为执行URL'/'将保持应用程序的路由完整。 - Emil Larsson

哦，我真的很希望这能够工作，但不幸的是它没有。当我刷新页面时，仍然在我的http://localhost:1234/account处得到404错误...如果在“Site”后面没有“Application”，根据您的“HowTo”，它会有所不同吗？我的应用程序正在站点的根目录下运行... - Serj Sagan

@Serj，你是在编辑哪个IIS，从哪里执行你的应用程序？由于指定了端口，我假设你正在运行一个IIS Express实例。 - Jan Zahradník

不，我是在本地IIS中将其作为站点运行，而不是Express，并绑定到特定的端口。 - Serj Sagan

Answer 4

我的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>

- t2t

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"));
   });

源代码

- jaycer

Answer 6

如果您的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/

- Raghav