Cannot read property 'outlets' of null

AngularAngular2 Routing

Angular 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
                    ]"
                    >

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionroma9806mailView Question on Stackoverflow
Solution 1 - AngulararturhView Answer on Stackoverflow
Solution 2 - AngularSamuelson OkoiView Answer on Stackoverflow
Solution 3 - AngularSiphamandla NgwenyaView Answer on Stackoverflow
Solution 4 - AngularPeter SawyerView Answer on Stackoverflow
Solution 5 - AngularEugene KulabuhovView Answer on Stackoverflow