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'

回答

相關問題