Angular 5 TypeError:出口为空/路由时无法读取空的属性“组件" [英] Angular 5 TypeError: outlet is null / cannot read property 'component' of null while routing
问题描述
使用 Angular 5,我尝试使用参数 ID 路由到项目页面.在此页面上:/project/:projectid 并再次将标题中的路由路由到此页面后,仅使用不同的 ID,它会抛出:
<块引用>列号:27683 文件名://kleinprodesign.new/assets/js/predependencies/zone.min.js"lineNumber:1 消息:未捕获(承诺):类型错误:出口是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:无法读取 null 的属性组件"
App-routing.module.ts
const 路由:Routes = [{ path: 'main', 组件: MainViewComponent },{ path: 'projects', 组件: ProjectsOverviewComponent },{ path: 'project/:projectid', 组件: ProjectItemComponent },{ path: 'contact', 组件: MainViewComponent },{ path: '', redirectTo: '/main', pathMatch: 'full' },{ 路径:'**',组件:MainViewComponent },];@NgModule({进口:[ RouterModule.forRoot(routes, { enableTracing: true, useHash: true })],出口:[路由器模块]})
Menu.subitem.component.ts 代码:
OnSubItemClick(): boolean {this.router.navigateByUrl(this.menuSubItem.url);//这包含:/project/:id,所以/project/3}
App.component.html:
<header-comp></header-comp><section class="site-canvas"><section *ngIf="isMenuOpen" class="site-menu" [@isMenuOpenChanged]><menu-comp></menu-comp><!--//这部分激活菜单中的路由,通过一个服务,通过isMenuOpen隐藏菜单--></节><section *ngIf="!isMenuOpen" [@isContentChanged] class="content main-content"><路由器插座></路由器插座><footer-comp></footer-comp></节></节></节>
因此,当我在主页上并使用随机项目导航到 ProjectItemComponent 时,一切顺利.当我在 ProjectItemComponent 中并导航到另一个项目时,它会抛出:outlet is null.
我创建了一个 plunkr 来重现错误.
有什么想法吗?
终于找到解决方案:它似乎是角度路由器中的一个错误
我通过改变内部来测试它:
<块引用>node_modules\@angular\router\bundles\router.umd.jsnode_modules\@angular\router\esm2015\router.jsnode_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));}
现在工作正常.
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:
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"
The above exception is in firefox. In chrome it is: TypeError: Cannot read property 'component' of null
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 code:
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>
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.
I created an plunkr to reproduce the error.
Any idea's?
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
This line:
this.canDeactivateChecks.push(new CanDeactivate(outlet.component, curr));
Into this:
if (outlet && outlet.component) {
this.canDeactivateChecks.push(new CanDeactivate(outlet.component, curr));
}
And now its working fine.
这篇关于Angular 5 TypeError:出口为空/路由时无法读取空的属性“组件"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!