Angular Routing - Umleitung URL zu Komponente

Question

Ich habe ein Problem mit der Umleitung meiner App im Produktionsmodus. wenn ich url haben http://server.com/projectname/dashboard, Serverantwort IIS Fehlerseite 404. I App http://server.com/projectname mit öffnen müssen, und klicken Sie dann auf den Link zum Beispiel:

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

In html Ich habe <base href="./"> und das ist mein Router:

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) 
    ] 
}) 

Im Entwicklungsmodus habe ich URL http://localhost:4200/dashboard und ich sollte umleiten. Kann es ein Problem sein, wenn in der Entwicklung ist URL localhost: 4200/Dashboard und in der Produktion ist server.com/ Appname/Dashboard?

Answer 1

fand ich die Ursache. Ich muss Konfiguration Fallback. Here ist Artikel darüber.

Ich hatte web.config hinzufügen:

<?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> 

es jetzt richtig funktioniert und ich kann beliebige App-URL öffnen.

Answer 2

diese Zeile auf Ihrer index.html hinzufügen, wenn Sie auf die Produktion bereitstellen:

<base href="/appname/"> 

Answer 3

Sie müssen die Basis href für Ihre Anwendung aktualisieren. Ich würde @ Daniels Antwort nicht empfehlen, wenn Sie angular-cli verwenden, da es einen viel einfacheren Ansatz gibt.

Mit angular-cli können Sie verwenden: ng build --prod --bh /appname/ und dies wird die Produktion aktualisiert Build Base href. Dies ist ein weitaus besserer Ansatz, da Sie dies nicht manuell im index.html aktualisieren müssen, wenn Sie zwischen verschiedenen Umgebungen wechseln.

Set base href dynamically - Angular 2/4