Angular：无法读取null的属性'component'

我有一个奇怪的问题。我有一个基本的路由配置是这样的：Angular：无法读取null的属性'component'

const appRoutes: Routes = [ 
    {path: '', redirectTo: '/search', pathMatch: 'full'}, 
    {path: 'login', component: LoginComponent }, 
    {path: 'dashboard', component: DashboardComponent, canActivate: [OnlyLoggedInGuard]}, 
    {path: 'search', component: SearchComponent, canActivate: [OnlyLoggedInGuard]} 
];

在应用HTML，我导入有条件的路由器出口：

<div *nfIf="condition"> 
... 
<router-outlet></router-outlet> 
... 
</div> 
<div *nfIf="!condition"> 
... another dom construction 
<router-outlet></router-outlet> 
... 
</div>

我拦截（与HttpInterceptor）HTTP 401错误重定向到登录页。在我的HTTP拦截某些时候这意味着我有这样的：

this._router.navigate(['/login', {error:'I am an error message'}]);

当我在仪表盘和401时，我重定向正确与正确的错误参数到登录页面。然而，当我在登录页上，我得到我有以下错误的服务器401：

core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'component' of null 
TypeError: Cannot read property 'component' of null 
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4343) 
    at router.es5.js:4305 
    at Array.forEach (<anonymous>) 
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (router.es5.js:4304) 
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverse (router.es5.js:4261) 
    at MapSubscriber.project (router.es5.js:4100) 
    at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:77) 
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) 
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:143) 
    at InnerSubscriber.webpackJsonp.../../../../rxjs/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:23) 
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4343) 
    at router.es5.js:4305 
    at Array.forEach (<anonymous>) 
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (router.es5.js:4304) 
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverse (router.es5.js:4261) 
    at MapSubscriber.project (router.es5.js:4100) 
    at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:77) 
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) 
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:143) 
    at InnerSubscriber.webpackJsonp.../../../../rxjs/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:23) 
    at resolvePromise (zone.js:783) 
    at resolvePromise (zone.js:754) 
    at zone.js:831 
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) 
    at Object.onInvokeTask (core.es5.js:3881) 
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) 
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191) 
    at drainMicroTaskQueue (zone.js:595) 
    at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502) 
    at invokeTask (zone.js:1370)

来源

2017-08-09 R. G

当您打开应用程序时，服务器也会抛出401 –

我刚刚尝试执行操作（例如：登录）时收到401错误。不是当我加载页面开始。 –

如果删除搜索路径上的'canActivate'，错误是否会消失？ –

确定。我设法解决这个问题。我不完全理解，但这里是我发现：

当router-outlet仅包含在应用HTML一旦Cannot read property 'component' of null disapear（比如：违背每个ng-if的多个分支列入的router-outlet条件）
当我改变的router-outlet的条件包含从

这种形式：

<div *nfIf="condition"> 
     <router-outlet></router-outlet> 
    </div> 
    <div *nfIf="!condition"> 
     <router-outlet></router-outlet> 
    </div>

这种形式：

<div *nfIf="condition;else notcondition"> 
     <router-outlet></router-outlet> 
    </div> 
    <ng-template #notcondition> 
     <router-outlet></router-outlet> 
    </ng-template>

我没有问题，从登录页面导航与参数到登录页面。

来源

2017-08-10 09:00:33

好了，但是也想到了这一点。我会说这不应该用这种方式。一种情况是，你将有多个视图，所以你将有多个路由器插座（你可以给它们ID） - 但这不是这种情况，所以我将一个路由器插座放在具有子路由的路由中以解决不同的问题views –

我使用条件的原因是，我希望围绕路由器插座的DOM根据一些外部因素（应用程序全局配置相关的事情，我不希望我的应用程序的URL反映这些更改）发生变化。如果我理解正确，你的建议就意味着我的应用程序的URL模式发生了变化。 –

是的，这是我的意图。如果这是全球性的环境 - 你可以有条件地注入应用程序引导组件。否则，这可能可以通过有条件地或者用CSS来包装一个组件。 –

Angular：无法读取null的属性'component'

回答

相关问题