Angular - getting an error when using named outlet: “Cannot match any routes” while navigate from canActivate guard

Question

In my app I navigate to a login form from a CanActivate guard.

It wirks fine when use just one router-outlet .

But when try to use named router-outlet to show in it the login component I get an error:

"Cannot match any routes. URL Segment: 'login'".

How to fix it?

Here is the related code from my app:

app.component.html :

<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>

app-routing.module.ts :

const routes: Routes = [
  { path: 'login', component: LoginComponent, outlet: 'popup', },

  { path: '', component: MainComponent,
    canActivate : [AuthGuardService],
  },
];

auth-guard.service.ts :

@Injectable()
export class AuthGuardService implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.loginService
               .isAuthorised()
               .map(res => {
                  ...
                }).catch((err) => {
                  this.router.navigate(['/login']);
                });
  }
}

Answer 1

你需要这个：

this.router.navigate(['/', {outlets: {popup:'login')}]);