Angular 在“角度2”中的按钮单击上导航时出错

我试图在单击按钮时使用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

我想重定向的页面，typescript代码是：-

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" }

Module.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 {
}

如果你们以前遇到过这种错误，请告诉我你们是如何解决的

---

提前感谢。

如果当前没有路由器出口（例如，由于某些其他错误，它将从内容中删除），并且设置了预激活规则（如AuthGuard），则路由将失败，如下所示：

错误：未捕获（承诺中）：TypeError:无法读取null的属性“component” TypeError:无法读取null的属性“component” 在PreActivation.webpackJsonp…/../../router/@angular/router.es5.js.PreActivation.traverseRoutes（router.es5.js:4346） 在router.es5.js:4308 在Array.forEach（）处 在PreActivation.webpackJsonp…/../../router/@angular/router.es5.js.PreActivation.traversechildrootes（router.es5.js:4307） 在PreActivation.webpackJsonp…/../../router/@angular/router.es5.js.PreActivation.traverseRoutes（router.es5.js:4338） [……]

---

请检查相同选项以解决您的问题。

如果您能向我们展示您的路线配置以及路线守卫，将更有帮助。通常，可以在

app.module.ts

文件中找到路由配置，代码与此类似

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

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

---

预激活。setupRouteGuards

也可能表明您的路线守卫可能存在问题。因此，如果需要，您可能需要仔细检查路由配置和保护并调试代码

你能显示你的路由模块吗？templateUrl:'./exportPdf.component.html'@MohamedialACHID已更新。@DmitryGrinko我已经尝试过了，但没有成功。你确定你的仪表板目录包含app.component吗？实际上，从“./dashboard/app.component”导入{AppComponent}非常奇怪；请更新check@Sagar

bootstrap:[AppComponent，ExportPdfComponent]

不确定为什么要在那里添加ExportPdfComponent。正常情况下，我们只能引导AppComponent，一旦出错，我就会隐藏我的路由器出口。将路由器出口移到隐藏模板之外修复了该问题。