Angular: Cannot read property 'component' of null

user_7883250 0
Viewed 6885

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)
angular-ui-router angular
2 Answers

If you want to change the DOM surrounding the router-outlet you could create a component that handles that and uses ng-content to place the router-outlet:

<!-- layout.component.html -->
<div *ngIf="condition" style="background: yellow">
  <ng-container *ngTemplateOutlet="ngContent"></ng-container>
</div>

<div *ngIf="!condition" style="background: green">
  <ng-container *ngTemplateOutlet="ngContent"></ng-container>
</div>

<ng-template #ngContent>
  <ng-content></ng-content>
</ng-template>

Then use it in app.component.html like this:

<app-layout [condition]="condition">
  <router-outlet></router-outlet>
</app-layout>

I still had to do something with *ngIf though, as it started complaining when I added 2 of them in layout.component.html. I don't know if this is something you are looking for, but here's the stackblitz: https://stackblitz.com/edit/angular-r1pvca.

user_9825170
Related