无法读取null的属性'outlet'

问题描述 投票:27回答:2

我有下一个问题:Cannot read property 'outlets' of null。我的项目有效,但一段时间后它停止工作,但我没有改变我的代码。请帮帮我。 更新 我的组件与路由器插座:

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 { }

附:有'引用反对`因为stackoverflow``-是代码。

angular angular2-routing
2个回答
88
投票

供将来参考:当使用[routerLink]和一个看起来像['/foo', null]的数组时,我遇到了这个错误。通过提供一个对象而不是null来修复它。


0
投票

这有时会在您自动生成routerLink并且添加此属性时发生routerLinkActive="router-link-active"删除它将解决您的问题。

© www.soinside.com 2019 - 2024. All rights reserved.