Umleitungsfehler 404 Angular 5

Question

Ich versuche 404 Fehler zu behandeln, wenn URLs falsch sind, http://localhost:8100/#/login. Dies ist meine Login-URL und wenn ich etwas wie http: .../loginasdasd schreibe, möchte ich automatisch meine eigene NotFoundPage öffnen.

const appRoutes3: Routes = [ 
    { 
    path: '', 
    children: [ 
     { 
     path: 'login', 
     component: LoginPage 
     }, 
     { path: 'login**', redirectTo: '/notfound' } 
    ] 
}, 
{ path: 'notfound', component: NotFoundPage } 
]; 


RouterModule.forRoot(
    appRoutes3, 
    { enableTracing: true } // <-- debugging purposes only 
) 
, 
IonicModule.forRoot(MyApp, {}, { 
    links: [ 
    { component: HomePage, name: "Home", segment: "" }, 
    { component: LoginPage, name: "Login", segment: "login", defaultHistory: [HomePage] }, 
    { component: SubscribePage, name: "Signup", segment: "signup", defaultHistory: [HomePage] }, 
    { component: SubscribeExtendPage, name: "Signup", segment: "signup-extend", defaultHistory: [HomePage] }, 
    { component: MainPage, name: "Main", segment: "main", defaultHistory: [HomePage] }, 
    { component: WelcomePage, name: "Welcome", segment: "welcome" }, 
    { component: NotFoundPage, name: "notFound", segment: "login/**", defaultHistory: [HomePage] }, 
    ] 
} 
) 
], 

Ich bin ein Winkel Noob und ich weiß nicht, wie man richtig tun, um die besten Infos i https://vsavkin.com/angular-router-understanding-redirects-2826177761fc in einigen anderen Winkel Umleitung Einträge gefunden habe.

Bitte etwas Hilfe oder irgendein Hinweis wäre dankbar. Danke.

Answer 1

Sie müssen ein Wildzeichen (**) verwenden. Der ** Pfad sollte die letzte Route sein. Der Router wählt diese Route aus, wenn die angeforderte URL keinem Pfad für in der Konfiguration definierte Routen entspricht. Dies ist nützlich, um eine "404 - Not Found" -Seite anzuzeigen oder zu einer anderen Route umzuleiten.

const appRoutes: Routes = [ 
    { path: 'crisis-center', component: CrisisListComponent }, 
    { path: 'hero/:id',  component: HeroDetailComponent }, 
    { 
    path: 'heroes', 
    component: HeroListComponent, 
data: { title: 'Heroes List' } 
}, 
{ path: '', 
redirectTo: '/heroes', 
pathMatch: 'full' 
}, 
{ path: '**', component: PageNotFoundComponent } 
]; 

Ich hoffe, dies hilft.

Answer 2

Als Angular versucht, die Routen in der Reihenfolge, die Sie in Ihrem Routes-Array deklariert haben, abzugleichen. Sie können dies tun:

const appRoutes3: Routes = [ 
    { 
    path: '', 
    children: [ 
     { 
     path: 'login', 
     component: LoginPage 
     } 
}, 
{ path: '**', component: NotFoundPage } 
]; 

Aber wenn man wirklich eine Route /notfound, ändern für redirectTo: 'notfound' die redirectTo: '/notfound' wollen.