Angular 5 TypeError: outlet is null / cannot read property 'component' of null while routing

Question

使用 Angular 5，我正在尝试使用参数 id 路由到项目页面。进入此页面后：/project/:projectid 并在 header 中再次路由到此页面，只是 ID 不同，它会抛出：

columnNumber: 27683 fileName: "//kleinprodesign.new/assets/js/predependencies/zone.min.js" lineNumber: 1 message: "Uncaught (in promise): TypeError: outlet is null\nPreActivation.prototype.setupRouteGuards@//kleinprodesign.new/angular2-app/node_modules/@angular/router/bundles/router.umd.js:3601:17\nPreActivation.prototype.setupChildRouteGuards/<@//kleinprodesign.new/angular2-app/node_modules/@angular/router/bundles/router.umd.js:3550:13\nPreActivation.prototype.setupChildRouteGuards@//kleinprodesign.new/angular2-app/node_modules/@angular/router/bundles/router.umd.js:3549:9\nPreActivation.prototype.initialize@//kleinprodesign.new/angular2-app/node_modules/@angular/router/bundles/router.umd.js:3483:9\nRouter.prototype.runNavigate/

eval" lineNumber: 3601 message: "outlet is null"

以上异常是在 firefox 中。在 chrome 中是：TypeError: Cannot read 属性 'component' of null

route tracing information

App-routing.module.ts

const routes: Routes = [
    { path: 'main', component: MainViewComponent },
    { path: 'projects', component: ProjectsOverviewComponent },
    { path: 'project/:projectid', component: ProjectItemComponent },
    { path: 'contact', component: MainViewComponent },
    { path: '', redirectTo: '/main', pathMatch: 'full' },
    { path: '**', component: MainViewComponent },
];

@NgModule({
    imports: [ RouterModule.forRoot(routes, { enableTracing: true, useHash: true })],
    exports: [RouterModule]
})

Menu.subitem.component.ts代码：

OnSubItemClick(): boolean {
    this.router.navigateByUrl(this.menuSubItem.url); //this contains: /project/:id, so /project/3
}

App.component.html:

<section class="site-wrapper">
    <header-comp></header-comp>

    <section class="site-canvas">
        <section *ngIf="isMenuOpen" class="site-menu" [@isMenuOpenChanged]>
            <menu-comp></menu-comp> <!-- //this part activates the routing in the menu, via an service it shos and hides the menu via isMenuOpen  -->
        </section>
        <section *ngIf="!isMenuOpen" [@isContentChanged] class="content main-content">
            <router-outlet></router-outlet>
            <footer-comp></footer-comp>
        </section>
    </section>
</section>

因此，当我在主页上导航到带有随机项目的 ProjectItemComponent 时，一切顺利。当我在 ProjectItemComponent 中并使用另一个 id 导航到另一个项目时，它会抛出：outlet is null.

我创建了一个 plunkr 来重现错误。

有什么想法吗？

Answer 1

终于找到解决方案：it appears to be an bug in angular router

我通过改变内部进行测试：

node_modules\@angular\router\bundles\router.umd.js node_modules\@angular\router\esm2015\router.js node_modules\@angular\router\esm5\router.js

这一行：

this.canDeactivateChecks.push(new CanDeactivate(outlet.component, curr));

进入这个：

if (outlet && outlet.component) {
    this.canDeactivateChecks.push(new CanDeactivate(outlet.component, curr));
}

现在工作正常。

Angular 5 TypeError: outlet is null / cannot read property 'component' of null while routing

Angular 5 TypeError: outlet is null / cannot read property 'component' of null while routing

angular2-routing

angular

angular5