Угловая маршрутизация - перенаправить URL на компонент

Question

У меня проблема с перенаправлением моего приложения в производственном режиме. когда у меня есть URL http://server.com/projectname/dashboard, ответ сервера IIS страница 404. Я должен открыть приложение, используя http://server.com/projectname а затем нажмите на ссылку, например:

<a [routerLink]="'dashboard'">Dashboard</a>

В HTML у меня есть <base href="./"> а это мой роутер:

const appRoutes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full', canActivate: [AuthGuard] },
    { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard]},
    { path: '400', component: ErrorComponent, canActivate: [AuthGuard] },
    { path: '401', component: ErrorComponent, canActivate: [AuthGuard] },
    { path: '404', component: ErrorComponent, canActivate: [AuthGuard], 
    { path: '**', redirectTo: '/404' }
]

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ]
})

В режиме разработки у меня есть URL http://localhost:4200/dashboard и я должен перенаправить. Может ли это быть проблемой, когда в разработке находится url localhost:4200/dashboard, а в разработке - server.com/appname/ dashboard?

Answer 1

Я нашел причину. Я должен настроить запасной вариант. Вот статья об этом.

Мне пришлось добавить web.config:

<?xml version="1.0" encoding="utf-8"?>
<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="./" />
      </rule>
    </rules>
  </rewrite>
  </system.webServer>
</configuration>

Теперь он работает правильно, и я могу открыть произвольный URL-адрес приложения.

Answer 2

Вам необходимо обновить базовый HREF для вашего приложения. Я не рекомендовал бы ответ @ Дэниела, если вы используете angular-cli, так как есть гораздо более простой подход.

С angular-cli, ты можешь использовать: ng build --prod --bh /appname/ и это обновит базу производственных сборок. Это гораздо лучший подход, так как вам не нужно обновлять это вручную в index.html при переключении между средами.

Динамически установить базовый href - угловой 2 / 4

Answer 3

Добавьте эту строку в ваш index.html при развертывании в рабочей среде:

<base href="/appname/">