Angular 5 TypeError：出口为null /路由时无法读取null的属性'component'

Question

使用Angular 5，我试图使用参数id路由到项目页面。在此页面上之后：/ project /：projectid，并再次在标头中将其路由到该页面，仅使用不同的ID，它会引发：

columnNumber：27683文件名：“ //kleinprodesign.new/assets/js/predependencies/zone.min.js” lineNumber：1条消息：“未捕获（承诺）：TypeError：出口为空\ 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消息：“出口为空”

上面的例外在Firefox中。在chrome中，它是：TypeError：无法读取null的属性“ component”

路由跟踪信息

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为null。

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

有任何想法吗？

Answer 1

终于找到了解决方案：这似乎是角度路由器中的一个错误

我通过改变内部来测试它：

节点模块\@角度\路由器\束\router.umd.js 节点模块\@角度\路由器\esm2015\router.js 节点模块\@角度\路由器\esm5\router.js

这行：

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

进入这个：

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

现在它工作正常。