Angular Cli App 路由不适用于生产

Question

我有一个带有 AngularCli 的 Angular 应用程序，具有以下路由配置和 NgModule。 Angular 应用程序将运行在 ASP.NET 核心应用程序

的生产模式下

在应用程序上-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OneComponent } from './components/one.component';
import { TwoComponent } from './components/open/two.component';

const routes: Routes = [

  { path: '', redirectTo: 'one', pathMatch: 'full' },
  { path: 'one', component: OneComponent },
  { path: 'two', component: TwoComponent },
  { path: '**', redirectTo: 'one' }

];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash:false })],
  exports: [RouterModule]
})

export class AppRoutingModule { }

在 app.module.ts

import { LocationStrategy, PathLocationStrategy } from '@angular/common';
@NgModule({
  declarations: [
    AppComponent,
    OneComponent,
    TwoComponent    
  ]
  imports: [     
    AppRoutingModule,
  ],
  bootstrap: [AppComponent],
  providers: [{ provide: LocationStrategy, useClass: PathLocationStrategy }]
})

在开发模式下路由没问题，但是当我进入生产模式时（ng build --prod --aot）路由停止工作。如果我使用 HashLocationStrategy 路由在开发和生产模式下都有效，但我遇到了一些问题，因为在 url 上更改参数以连接我的 Rest [=37] 时有时需要点击 Url 两次或三次=]
问题是 PathLocationStrategy 为我提供了我想要的行为，但仅限于开发而不是生产。

我需要一个适用于两种模式且没有问题的解决方案

任何想法，提前致谢

更新： 如果你使用 ASP.NET Core 2.1+，不需要使用 URL 重写，angular 的项目模板将使用 NuGetPackage Microsoft.AspNetCore.SpaServices

处理这个问题

Answer 1

如果您已经在 IIS 中部署了 Web 应用程序，请尝试放置空的 href 标记，然后构建应用程序并进行部署

<base href="">

Answer 2

服务器上 Angular 应用程序的路径是什么？如果 index.html 文件的初始 URL 类似于 "www.example.com/my/anular/app/"，那么在你的 index.html 中你需要有 <base href="/my/angular/app/">。将选项 --base-href /my/angular/app/ 添加到 ng build。开头和结尾的斜线很重要。

Answer 3

我最终使用 Angular.io 站点提供的相同解决方案解决了这个问题 Go here

需要将此添加到我的 asp.net 核心应用程序 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="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

<action type="Rewrite" url="/"/> 中的 URL 应该匹配 index.html

中的基本 href

Angular Cli App 路由不适用于生产

AngularCli App routes not working on Production

production

development-environment

routes

angular-cli

angular