IIS 上的 AngularJS 2 路由答案

【问题标题】：AngularJS 2 routing on IISIIS 上的 AngularJS 2 路由
【发布时间】：2017-06-21 16:05:27
【问题描述】：

我有一个使用 angular2 路由的 ASP.NET CORE 应用程序。运行本地路由按预期解析。当我发布到服务器（运行 IIS 7）时，路由似乎添加了我发布它的文件夹目录。在下面的示例中，“页面 url”是我导航到的页面，但“结果 url”是浏览器地址栏中显示的内容。

页面地址 --> http://myserver/orders

结果网址 --> http://myserver/orders/orders

关于为什么会发生这种情况的任何想法？这是 IIS 设置、Angular 路由问题还是 .NET CORE 配置问题？

这是我在 angular2 中配置路线的方式。

export const appRoutes:Routes = [
{ path: 'orders', component: OrderSearchComponent, resolve: {orders: OrderSearchResolverService}},
{ path: 'orders/new', component: CreateOrderComponent},
{ path: 'orders/:id', component: OrderDetailComponent, canActivate: [OrderRouterActivator]},
{ path: '404', component: Error404Component},
{ path: '', redirectTo: 'orders', pathMatch: 'full'},
{ path: 'user', loadChildren: 'app/user/user.module#UserModule' }
]

在我的开发框中，href 设置如下：

<base href="/">

这在 IIS 上不起作用，所以我尝试了很多不同的设置，但都没有成功。

<base href=""> and <base href="/order/"> both return:

http://myserver/orders/orders

有什么建议吗？

编辑 - 显示 appRoutes 的使用位置。

@NgModule({
  ...
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
 ]...

【问题讨论】：

请显示您的 asp.net 核心路由配置。您是否在配置中指定了默认路由以及“spa-fallback”路由，以便仅加载 index.html/index.cshtml？
我的配置如上图。

标签： angular iis asp.net-core

【解决方案1】：

确保您的 Startup.cs 具有默认路由的路由配置以及 SPA 后备路由，该路由将为任何路由提供 index.cshtml 或等效路由，而不是尝试基于客户端导航加载资产。

MapSpaFallbackRoute() 需要在您的应用程序中安装Microsoft.AspNetCore.SpaServices。

如下配置您的Startup.cs：

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
                defaults: new { controller = "Home", action = "Index" });
        });
    }

根据docs，如果您使用的是 IIS 而不是 IIS Express，您需要创建一个重写规则并将您的基本设置为 @987654328 @。文档中提供的web.config重写规则如下：

<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="/src/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

这会重写每个请求，因此如果您需要调用 API 或类似的请求，则需要相应地修改 <match url="..." /> 属性。

希望对您有所帮助！

【讨论】：