버튼 2에서 각도를 탐색하는 중 오류가 발생했습니다.

Question

버튼 클릭시 navigateurl 속성을 사용하려고했지만 깨진 것 같습니다. 나는 오류가 아래에 무엇입니까 :

: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 

내 타이프 스크립트 파일의 코드는 다음과 같습니다 -

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'); 
    }; 
} 

그리고 난 리디렉션 할 페이지가, 타이프 라이터 코드는 다음과 같습니다 -

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 파일 : -

여기 내 모듈입니다 .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 at 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 파일에서 찾을 수 있습니다. 따라서 라우트 구성을 두 번 확인하고 필요할 경우 코드를 보호하고 디버깅 할 수 있습니다.