角度2のボタンをクリックしてナビゲート中にエラーが発生しました

Question

ボタンクリックでnavigateurlプロパティを使用しようとしていますが、壊れているようです。

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'src/app/dashboard/app.component.html' 
}) 

export class AppComponent { 
    name: string = 'Angular'; 

    constructor(private router: Router) { } 

    btnClick() { 
     console.log("Button has been clicked"); 
     this.router.navigateByUrl('/exportPdf'); 
    }; 
} 

と私はリダイレクトするページ、typescriptですコードは次のとおりです。 - - ：

:53806/node_modules/@angular/core/bundles/core.umd.js:1389 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'component' of null 
TypeError: Cannot read property 'component' of null 
    at PreActivation.setupRouteGuards (:53806/node_modules/@angular/router/bundles/router.umd.js:3601) 
    at eval (:53806/node_modules/@angular/router/bundles/router.umd.js:3550) 
    at Array.forEach (<anonymous>) 
    at PreActivation.setupChildRouteGuards (:53806/node_modules/@angular/router/bundles/router.umd.js:3549) 
    at PreActivation.initialize (:53806/node_modules/@angular/router/bundles/router.umd.js:3483) 
    at MapSubscriber.eval [as project] (:53806/node_modules/@angular/router/bundles/router.umd.js:5311) 
    at MapSubscriber._next (:53806/node_modules/rxjs/operators/map.js:79) 
    at MapSubscriber.Subscriber.next (:53806/node_modules/rxjs/Subscriber.js:89) 
    at MergeMapSubscriber.notifyNext (:53806/node_modules/rxjs/operators/mergeMap.js:145) 
    at InnerSubscriber._next (:53806/node_modules/rxjs/InnerSubscriber.js:23) 
    at PreActivation.setupRouteGuards (:53806/node_modules/@angular/router/bundles/router.umd.js:3601) 
    at eval (:53806/node_modules/@angular/router/bundles/router.umd.js:3550) 
    at Array.forEach (<anonymous>) 
    at PreActivation.setupChildRouteGuards (:53806/node_modules/@angular/router/bundles/router.umd.js:3549) 
    at PreActivation.initialize (:53806/node_modules/@angular/router/bundles/router.umd.js:3483) 
    at MapSubscriber.eval [as project] (:53806/node_modules/@angular/router/bundles/router.umd.js:5311) 
    at MapSubscriber._next (:53806/node_modules/rxjs/operators/map.js:79) 
    at MapSubscriber.Subscriber.next (:53806/node_modules/rxjs/Subscriber.js:89) 
    at MergeMapSubscriber.notifyNext (:53806/node_modules/rxjs/operators/mergeMap.js:145) 
    at InnerSubscriber._next (:53806/node_modules/rxjs/InnerSubscriber.js:23) 
    at resolvePromise (zone.js:824) 
    at resolvePromise (zone.js:795) 
    at zone.js:873 
    at ZoneDelegate.invokeTask (zone.js:425) 
    at Object.onInvokeTask (:53806/node_modules/@angular/core/bundles/core.umd.js:4659) 
    at ZoneDelegate.invokeTask (zone.js:424) 
    at Zone.runTask (zone.js:192) 
    at drainMicroTaskQueue (zone.js:602) 
    at ZoneTask.invokeTask [as invoke] (zone.js:503) 
    at invokeTask (zone.js:1540) 
defaultErrorLogger @ :53806/node_modules/@angular/core/bundles/core.umd.js:1389 

マイtypescriptファイルのコードは次のとおりです。私は、エラーの下に取得しています

import { Component } from '@angular/core' 


@Component({ 
    selector: 'exportPdf', 
    templateUrl: 'src/app/exportPdf/exportPdf.component.html' 
}) 


export class ExportPdfComponent { name: string = "Export View to Pdf" } 

モジュール。 tsファイル： -

ここは私のmodule.tsコードです

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 

import { RouterModule, Routes } from '@angular/router'; 

import { AppComponent } from './dashboard/app.component'; 
import { ExportPdfComponent } from './exportPdf/exportPdf.component'; 

const appRoutes: Routes = [ 
    { path: 'Dashboard', component: AppComponent }, 
    { path: 'ExportPdf', component: ExportPdfComponent } 
] 

@NgModule({ 
    imports: [BrowserModule, FormsModule, RouterModule.forRoot(appRoutes)], 
    declarations: [AppComponent, ExportPdfComponent], 
    bootstrap: [AppComponent, ExportPdfComponent] 
}) 

export class AppModule { 
} 

あなたがこの種のエラーに直面していた場合は、その前にどうすれば解決したか教えてください。

ありがとうございます。

：現在のところルータ出口が存在しない場合

Answer 1

ルーティングのようなもので失敗する（例えば、ために、いくつかの他のエラーの内容から削除されます）とプレ活性化規則は、（例えばAuthGuardとして）設定されていますエラー：予期しない（未定）：TypeError：nullのプロパティ 'component'を読み取ることができません。 TypeError：PreActivation.webpackJsonp .../../../router/@ angular /にNULL のプロパティ 'component' router.es5.js.PreActivation.traverseRoutes（router.es5.js：4346） at router.es5.js：4308 、Array.forEach（） at PreActivation.webpackJsonp .../../../router /@angular/router.es5.js.PreActivation.tr （ルーター.es5.js：4338） [ルータの設定] ..]

問題を解決するには同じ項目をチェックしてください。

Answer 2

ルートの設定とのルートガードを表示できれば、はるかに役立ちます。通常、この

const appRoutes: Routes = [ 
    { path: 'exportPdf', component: ExportPdfComponent }, 
    ... 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(appRoutes) 
    ], 
    ... 
}) 
export class AppModule { } 

PreActivation.setupRouteGuardsのようなコードで設定がapp.module.tsファイルで見つけることができますルートは、またあなたのルートガードに問題がある可能性があります示唆しています。したがって、必要に応じてルートの設定を確認し、コードを保護してデバッグすることができます。