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

У меня проблема с перенаправлением моего приложения в производственном режиме. когда у меня есть 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?


person bluray    schedule 29.11.2017    source источник


Ответы (3)


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

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

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

person Zze    schedule 29.11.2017

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

<base href="/appname/">
person Daniel Segura Pérez    schedule 29.11.2017

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

Мне пришлось добавить 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-адрес приложения.

person bluray    schedule 29.11.2017