Cannot read property 'outlets' of null
AngularAngular2 RoutingAngular Problem Overview
I have next problem : Cannot read property 'outlets' of null
. My project works, but after some time it stopped working, but i didn't change my code. Help me please.
Update
My component with router-outlet:
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: '
<nav-menu></nav-menu>
<router-outlet></router-outlet>
<footer-component></footer-component>
',
})
export class AppComponent {}
app.module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { LocationStrategy, PathLocationStrategy, APP_BASE_HREF } from '@angular/common';
import { HttpModule } from '@angular/http';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
//+components
@NgModule({
imports:
[
BrowserModule,
HttpModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forRoot([
{ path: '', component: HomeComponent },
{ path: 'home', component: HomeComponent },
{ path: 'blog', component: BlogComponent },
{ path: '2016/:link', component: BlogArticleFullComponent },
{
path: 'admin', component: AdminComponent,
children: [
{ path: 'new', component: NewArticleComponent },
{ path: 'new-writer', component: NewWriterComponent },
{ path: 'new-tag', component: NewTagComponent }
] },
{ path: '**', redirectTo: '', pathMatch: 'full'}
])
],
declarations:
[//components
],
bootstrap:
[
AppComponent
],
providers:
[
{ provide: APP_BASE_HREF, useValue: '/' },
{ provide: LocationStrategy, useClass: PathLocationStrategy }
]
})
export class AppModule { }
P.S. There is ' quote against ` because stackoverflow ``-is code.
Angular Solutions
Solution 1 - Angular
For future reference: I got this error when using [routerLink]
with an array which looked like ['/foo', null]
. Fixed it by supplying an object instead of null
.
Solution 2 - Angular
Most times this has nothing to do with your route configuration but happens when you try to pass in a dynamic data as a parameter to the route for instance.
<a [routerLink]="['/user', user?.id]" />user profile</a>
The user.id is dynamic and at the point where the page is initialized, the user object might be null
hence the error.
A quick fix to this will be to add an ng-if to the link, this will force the link to initialize only when the user object is available.
<a [routerLink]="['/user', user?.id]" *ngIf="user" />user profile</a>
Solution 3 - Angular
This sometimes happens when you auto generate routerLink and this attribute is added routerLinkActive="router-link-active"
removing it will solve your problem.
Solution 4 - Angular
My solution was to do a null check first ie. row?.driverId
<a [routerLink]="['/admin/driver/view', row?.driverId]">{{value}}</a>
Solution 5 - Angular
Had the same problem even with null check operator:
<a
[routerLink]="[ '/page/', organizationSettings?.organisation_name_slug ]"
>
Solved it by adding *ngIf to the element:
<a
*ngIf="organizationSettings"
[routerLink]="[
'/page/',
organizationSettings.organisation_name_slug
]"
>