Angular 5 TypeError:出口为null/路由时无法读取null的属性'component' [英] Angular 5 TypeError: outlet is null / cannot read property 'component' of null while routing

问题描述

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

With Angular 5, I am trying to route to a projects page with an parameter id. After being on this page: /project/:projectid and routing in the header again to this page, only with an different ID, it throws:

列号:27683文件名: "//kleinprodesign.new/assets/js/predependencies/zone.min.js" lineNumber:1条消息:未捕获(按承诺):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/

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"行号:3601消息:出口为空"

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

以上例外是在Firefox中.在chrome中，它是:TypeError:无法读取null的属性'component'

The above exception is in firefox. In chrome it is: TypeError: Cannot read property 'component' of null

路由跟踪信息

App-routing.module.ts

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代码:

Menu.subitem.component.ts code:

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

App.component.html:

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.

So when I am on the main page and navigate to ProjectItemComponent with a random project, it all goes well. When I am in ProjectItemComponent and navigate to another project, with another id, it throws: outlet is null.

我创建了 plunkr 重现该错误.

有什么主意吗?

推荐答案

最终找到了解决方案:它似乎是角路由器中的错误

Finally found the solution: it appears to be an bug in angular router

我通过更改内部进行了测试:

I tested it by changing inside:

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

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:出口为null/路由时无法读取null的属性'component'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！