Angular: Cannot read property 'component' of null

Question

I have a weird issue. I have a basic route configuration like this:

const appRoutes: Routes = [
  {path: '', redirectTo: '/search', pathMatch: 'full'},
  {path: 'login', component: LoginComponent },
  {path: 'dashboard', component: DashboardComponent, canActivate: [OnlyLoggedInGuard]},
  {path: 'search', component: SearchComponent, canActivate: [OnlyLoggedInGuard]}
];

On app HTML, I import conditionally the router-outlet:

<div *nfIf="condition">
...
<router-outlet></router-outlet>
...
</div>
<div *nfIf="!condition">
... another dom construction
<router-outlet></router-outlet>
...
</div>

And I intercept (with an HttpInterceptor ) HTTP 401 errors to redirect to login page. Meaning at some point in my http interceptor I have this:

this._router.navigate(['/login', {error:'I am an error message'}]);

When I'm on the dashboard and a 401 occurs I'm correctly redirected to login page with the correct error parameter. However, when I'm on the login page and I get a 401 from the server I've got the following error:

core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'component' of null
TypeError: Cannot read property 'component' of null
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4343)
    at router.es5.js:4305
    at Array.forEach (<anonymous>)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (router.es5.js:4304)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverse (router.es5.js:4261)
    at MapSubscriber.project (router.es5.js:4100)
    at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:77)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:143)
    at InnerSubscriber.webpackJsonp.../../../../rxjs/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:23)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4343)
    at router.es5.js:4305
    at Array.forEach (<anonymous>)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (router.es5.js:4304)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverse (router.es5.js:4261)
    at MapSubscriber.project (router.es5.js:4100)
    at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:77)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:143)
    at InnerSubscriber.webpackJsonp.../../../../rxjs/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:23)
    at resolvePromise (zone.js:783)
    at resolvePromise (zone.js:754)
    at zone.js:831
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1370)

Answer 1

Ok. I managed to fix this. I do not fully understand but here is what I found:

• The Cannot read property 'component' of null disapear when the router-outlet is included only once in the app HTML (e.g: contrary to the inclusion of router-outlet in each of multiple branches of the ng-if condition)

• When I change the conditional inclusion of router-outlet from

this form:

    <div *nfIf="condition">
        <router-outlet></router-outlet>
    </div>
    <div *nfIf="!condition">
        <router-outlet></router-outlet>
    </div>

to this form:

    <div *nfIf="condition;else notcondition">
        <router-outlet></router-outlet>
    </div>
    <ng-template #notcondition>
        <router-outlet></router-outlet>
    </ng-template>

I have no issue navigating from login page to login page with parameters.