Angular 4 wurden keine Routen entsprechen

Question

I ng serve verwenden und solche Routing-Konfiguration

export const appRoutes: Routes = [ 
    { 
    path: '', 
    children: [ 
     { 
     path: '', 
     component: AuthComponent, 
     children: [ 
      { 
      path: 'login', 
      component: LoginComponent 
      }, 
      { 
      path: 'registration', 
      component: RegistrationComponent 
      } 
     ] 
     }, 
     { 
     path: 'restore', 
     component: RestoreComponent 
     }, 
     { 
     path: 'newpass', 
     component: NewPassComponent 
     } 
    ] 
    } 
]; 

und mit zwei Tasten in auth.component.html

<nav> 
    <ul> 
    <li><a routerLink="/login" routerLinkActive="active-link">Login</a></li> 
    <li><a routerLink="/registration" routerLinkActive="active-link">Sign up</a></li> 
    </ul> 
</nav> 

wenn ich auf Login-Link, mich Winkel navigieren Seite ohne Fehler zu melden, aber wenn ich localhost:4200/login Seite neu zu laden, habe ich diesen Fehler

Console screen

aber Seite geladen erfolgreich und Komponenten werden funktionieren.

Also, wie kann ich es beheben und warum angular machen zweite NavigationStart zu/login/(Login)?

Answer 1

ok. Ich habe dieses Problem gelöst. In Auth Komponente habe ich diesen Code

let isAuthorized = await this.checkAuthorization(); 
if (isAuthorized) { 
    this.router.navigate(['dashboard'], {relativeTo: this.route}); 
} else { 
    this.router.navigate(['login'], {relativeTo: this.route}); 
} 

so mache ich aus/login umleiten zu/login/login aber Route Config muß nicht dieser Weg

Answer 2

Sie müssen keine Kinder von Pfad "" verwenden. Versuchen Sie Folgendes zu verwenden:

export const appRoutes: Routes = [ 
    { 
    path: 'pathToAuth', // change to your path 
    component: AuthComponent, 
    children: [ 
     { 
     path: 'login', 
     component: LoginComponent 
     }, 
     { 
     path: 'registration', 
     component: RegistrationComponent 
     } 
    ] 
    }, 
    { 
    path: 'restore', 
    component: RestoreComponent 
    }, 
    { 
    path: 'newpass', 
    component: NewPassComponent 
    } 
];