Angular 4无法匹配任何路线

Question

I using ng serve and have such routing config

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

and two button 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>

when I click on login link, angular navigate me to login page without errors, but when I reload localhost:4200/login page, I got this error

Console screen

but page loaded successful and components will work.

So, how I can fix it and why angular make second NavigationStart to /login/(login) ?

Answer 1

You don't need to use children of path "". Try to use this:

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

Answer 2

ok. I solved this problem. In AuthComponent I have this code

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

so I make redirect from /login to /login/login but route config doesnt have this path