Wildcard laden für jede Route in eckigen

Question

Ich habe die Wildcard-Route zu meiner Anwendung in eckigen hinzugefügt. Das Problem tritt auf, nachdem der Platzhalter hinzugefügt wurde.

Ich bin mir nicht sicher, was das Problem ist! unten id der Routen-Array:

const appRoutes: Routes = [ 
    { path: 'login', redirectTo: '/login', pathMatch: 'full' }, 
    { path: 'settings', redirectTo: '/settings', pathMatch: 'full' },   
    { path: '**', component: PageNotFoundComponent }  
]; 

Anmeldung und Einstellung sind Module, und sie haben ihre eigenen Routing-Dateien. Vor dem Hinzufügen des Platzhalters und der Standardroute wurde die App beim Start zum Anmeldebildschirm umgeleitet.

Aber jetzt wird jede URL zu PageNotFoundComponent umgeleitet.

Die Reihenfolge der Routen in der Konfiguration zählt und dies ist durch Design. Der Router verwendet eine First-Match-Wins-Strategie, wenn er Routen abgleicht. Daher sollten spezifischere Routen über weniger spezifische Routen gelegt werden. In der obigen Konfiguration sind Routen mit einem statischen Pfad zuerst , gefolgt von einer leeren Pfadroute, die der Standardroute entspricht. Die Platzhalterroute kommt als letzte, weil sie mit jeder URL übereinstimmt und sollte nur ausgewählt werden, wenn keine anderen Routen zuerst gefunden werden.

Bitte führen! Dank

Answer 1

Die Wildcard-Route die letzte ein im Array importieren sein muss. Gerade jetzt, wenn Ihre App hochfährt, ist der Pfad leer, so dass der Router zu dem ersten spezifischen Pfad routet, der den Routen der Anwendung entspricht, d. H. Der Platzhalterroute. Wenn Sie die Reihenfolge so ändern, dass die Platzhalterroute die letzte ist, wird beim Starten der App angezeigt, dass sie zur Anmeldung auf einem leeren Pfad umgeleitet werden muss. BEFORE sieht die Wildcard-Route und funktioniert wie vorgesehen. Zweitens, nicht auf die gleiche Route umleiten. Verwenden Sie die spezifische Komponente für jede Route, die auf eine Komponente abzielt. Aktualisieren Sie Ihr Routen-Array wie folgt.

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { path: 'settings', component: SettingsComponent }, 
    { path: '', redirectTo: '/login', pathMatch: 'full'}, 
    { path: '**', component: PageNotFoundComponent } 
]; 

EDIT

OP hat gezeigt, dass sie getrennte Routing-Module für die verschiedenen Funktionen Module sie in ihre App haben verwenden möchten. Dafür haben Sie zwei Möglichkeiten, die ich kenne. Sie können entweder Lazy Loading, ODER verwenden. Sie können die Routen für jedes Feature-Modul in einem eigenen Routing-Modul und dann IMPORT das Feature-Modul in Ihrem app.module deklarieren.Der Ansatz wird in der folgenden stackblitz demonstriert: https://stackblitz.com/edit/angular-q8mkac

Answer 2

Verwenden Sie es mögen: Stellen Sie sicher, dass Sie alle Komponenten erstellt wie folgt

nie an erster Stelle die Wildcard Strecke halten, weil es immer Wildcard Pfad als Standardpfad nehmen.

const appRoutes: Routes = [ 
    { path: '', component:AppComponent}, 
    { path: 'login', component:LoginComponent}, 
    { path: 'settings', component:SettingsComponent}, 
    { path: '**', component: PageNotFoundComponent } 
]; 

Versuchen RouterModule als RouterModule.forRoot(routes, { useHash: true })

Answer 3

Bitte verwenden Sie Komponente statt Platzhalter:

{ path: 'login', component: LoginComponent , pathMatch: 'full'}