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.
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
.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With