获取在 IIS 7.5 上工作的 Angular2 路由

Posted 2023-03-05

【中文标题】获取在 IIS 7.5 上工作的 Angular2 路由

【英文标题】：Get Angular2 routing working on IIS 7.5

【发布时间】：2016-11-07 15:47:33

【问题描述】：

我一直在学习 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 知道路由。

【问题讨论】：

你用的是什么asp.net框架？ MVC？ .net 核心？

不使用 asp.net 框架。仅限 Angular2。其中包括 HTML、CSS 和 javascript。

你解决了吗？

您介意接受我对此的回答吗？ -贾德森

【参考方案1】：

您应该使用URL rewrite module 来实现此目的。提供了有关如何使用它的非常详细的信息here

在 IIS 8 上为我工作的示例 web.config sn-p 是 here。

【参考方案2】：

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

HowTo: Site->Application->Error Pages from context menu on Status Code 404 选择 Edit... 并选择 Execute URL on this site。输入/index.html，然后按确定。请注意，路径来自站点根目录，因此您可能需要包含您的应用路径。

【讨论】：

适用于无法使用重写模块的情况。更改 404 以执行 url '/' 将使应用程序路由保持不变。

哦，伙计，我真的很想让这个工作，但可惜，它没有。当我刷新页面时，我的localhost:1234/account 仍然收到 404...如果“站点”之后没有“应用程序”，根据您的“操作方法”，它的工作方式会有所不同吗？我的应用程序正在站点的根目录下运行...

@Serj 您是否正在编辑执行应用程序的 IIS？指定端口我假设您正在运行 IIS Express 实例

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

【参考方案3】：

（对于角度 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，您可以单击重写规则图标并查看它是否读取了此配置。如果您没有看到重写规则的图标，则需要在“模块”图标下启用模块。这段代码 sn-p 不是 be 写的，但我想分享更好的实现细节。

【讨论】：

谢谢你，你让我很开心。和这个坐了一会儿:-)

如果你有一个“api”后端，你也可以使用这个***.com/questions/12614072/…

知道如何将该规则与允许我从 HTTP 重定向到 HTTPS 的规则混合使用吗？

【参考方案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>

【参考方案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"));
   );

Source

【参考方案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/