Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot read property 'outlets' of null

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.

like image 683
roma9806mail Avatar asked Dec 22 '16 15:12

roma9806mail


2 Answers

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.

like image 183
arturh Avatar answered Oct 13 '22 08:10

arturh


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> 
like image 33
Samuelson Okoi Avatar answered Oct 13 '22 07:10

Samuelson Okoi