2017-08-09 12 views
2

私は奇妙な問題があります。ログインにリダイレクトするようにHTTP 401エラー(HttpInterceptor付き)角度:nullのプロパティ 'component'を読み取れません

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

と私のインターセプト:私は条件付きでルータコンセントをインポートし、アプリケーションのHTMLで

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

:私はこのような基本的なルート設定を持っていますページ。私はダッシュボードの上だと401は私が正しく、正しいエラーパラメータを指定してログインページにリダイレクトされていますが発生した場合

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

:私はこれを持って私のhttpインターセプターの中でいくつかの点で意味。 しかし、私は、ログインページ上だと私は、私は次のエラーを持っているサーバーから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) 
+0

アプリを開いたときにサーバーが401をスローする –

+0

アクションを実行しようとしているとき(例:ログイン)に401エラーが表示されます。私が最初にページを読み込むときではありません。 –

+0

検索ルートで 'canActivate'を削除すると、エラーは消えますか? –

答えて

6

[OK]をクリックします。私はこれを修正することができた。私は完全に理解しますが、ここで私が見つけたものではありませんん。router-outletは一度だけのアプリのHTMLに含まれている

  • Cannot read property 'component' of null disapearを(例えば:ng-ifの複数のブランチのそれぞれにおけるrouter-outletを含めることに反対条件)

  • Iは

からこのフォームを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> 

は、私は何の問題のパラメータでログインページにログインページからナビゲートしていません。

+1

さて、それも考えました。私はこれをこのように使うべきではないと言います。 1つのケースは複数のビューを持つため、複数のルータのアウトレット(IDを与えることができます)がありますが、これはそうではありません。したがって、ルータのアウトレットをサブルート付きのルートに置いて、表示 –

+0

私は条件を使用する理由は、いくつかの外部要因(アプリケーションのグローバル構成に関連するもの、私はこれらの変更を反映して私のアプリケーションのURLをしたくない)に応じて変更するルーターコンセントを囲むDOMをしたいです。私が正しいとすれば、あなたの提案は私のアプリケーションのURLパターンの変更を意味するでしょうか? –

+1

はい、これは私の意図でした。これが環境全体のような "グローバル"の場合、アプリケーションのブートストラップに条件付きでコンポーネントを注入することができます。それ以外の場合は、条件付きでCSSを使用してコンポーネントをラップすることができます。 –

関連する問題