Angular：无法读取未定义TypeError的属性“ routeConfig”

Question

在本地运行项目时，一切正常。我使用以下项目构建了项目：

android:horizontalGap

当我在线运行此代码时。我可以看到页眉和页脚。但是我的主页没有显示。如果我单击导航栏转到另一个页面，则会出现此错误：

ng build --prod --build-optimizer --base-href /ProjectName/

应用组件：

main.1414f458336b0098f411.js:1 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'routeConfig' of undefined
TypeError: Cannot read property 'routeConfig' of undefined
    at Qd.shouldReuseRoute (main.1414f458336b0098f411.js:1)
    at main.1414f458336b0098f411.js:1
    at Array.map (<anonymous>)
    at main.1414f458336b0098f411.js:1
    at e (main.1414f458336b0098f411.js:1)
    at main.1414f458336b0098f411.js:1
    at j.project (main.1414f458336b0098f411.js:1)
    at j._next (main.1414f458336b0098f411.js:1)
    at j.next (main.1414f458336b0098f411.js:1)
    at gu.notifyNext (main.1414f458336b0098f411.js:1)
    at j (polyfills.12f318da3477f20d33b8.js:1)
    at j (polyfills.12f318da3477f20d33b8.js:1)
    at polyfills.12f318da3477f20d33b8.js:1
    at e.invokeTask (polyfills.12f318da3477f20d33b8.js:1)
    at Object.onInvokeTask (main.1414f458336b0098f411.js:1)
    at e.invokeTask (polyfills.12f318da3477f20d33b8.js:1)
    at t.runTask (polyfills.12f318da3477f20d33b8.js:1)
    at g (polyfills.12f318da3477f20d33b8.js:1)
    at t.invokeTask [as invoke] (polyfills.12f318da3477f20d33b8.js:1)
    at _ (polyfills.12f318da3477f20d33b8.js:1)

标题组件：

<div id="page-container" class="sidebar-o side-scroll page-header-fixed main-content-boxed">
  <app-header></app-header>

</div>
<app-footer></app-footer>

app.module

<nav id="sidebar">
  blablabla
</nav>
<!-- END Sidebar -->

<!-- Header -->
<header id="page-header">
  <!-- Header Content -->

    BLABLABLA
</header>
<router-outlet></router-outlet>

应用路由：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './interceptors/token.interceptor';
import { DataTablesModule } from 'angular-datatables';
import { AllExamsComponent } from './all-exams/all-exams.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { AddQuestionComponent } from './add-question/add-question.component';
import { ExamSimulatorService } from './services/exam-simulator.service';
import { ResultsComponent } from './results/results.component';
import { ExamComponent } from './exam/exam.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { AddSoftwareComponent } from './add-software/add-software.component';
import { FinishedComponent } from './finished/finished.component';
import { AuthService } from './services/auth.service';



@NgModule({
  declarations: [
    AppComponent,
    AllExamsComponent,
    HeaderComponent,
    FooterComponent,
    AddQuestionComponent,
    ResultsComponent,
    ExamComponent,
    AddSoftwareComponent,
    FinishedComponent


  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    DataTablesModule,
    ReactiveFormsModule,
    FormsModule



  ],
  providers: [
    HeaderComponent,
    FooterComponent,
    ExamSimulatorService,
    AuthService,
    { provide: LocationStrategy, useClass: HashLocationStrategy },
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }],
  bootstrap: [AppComponent]
})
export class AppModule { }

index.html

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AllExamsComponent } from './all-exams/all-exams.component';
import { AddQuestionComponent } from './add-question/add-question.component';
import { ExamComponent } from './exam/exam.component';
import { AddSoftwareComponent } from './add-software/add-software.component';
import { FinishedComponent } from './finished/finished.component';

const routes: Routes = [
  { path: '', redirectTo: '/allExams', pathMatch: 'full' },
  { path: 'allExams', component: AllExamsComponent },
  { path: 'addQuestion', component: AddQuestionComponent },
  { path: 'exam/:software', component: ExamComponent },
  { path: 'addSoftware', component: AddSoftwareComponent },
  { path: 'finished', component: FinishedComponent }


];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

package.json

<!doctype html>
<!--[if lte IE 9]>
<html lang="en" class="no-focus lt-ie10 lt-ie10-msg"> <![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en" class="no-focus">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

  <title>Exams</title>     

  <base href="/">   

</head>

<body>
  <app-root></app-root>

</body>
</html>

Answer 1

这似乎是@angular-devkit/build-angular版本的问题。看到类似问题的this answer，他们说：

  

我已将我所有的@angular/软件包降级为^8.0.0，并且在完成惰性加载后又开始工作后也将其设置为"@angular-devkit/build-angular": "0.800.0"。

Answer 2

我不确定，但是可以尝试一下

ng build --prod --aot --build-optimizer --base-href /ProjectName/

Answer 3

以防万一其他人在创建新管道后遇到此问题：

当您通过从现有管道复制新管道来创建新管道而忘记在装饰器中更改名称时，它看起来就像：

@Pipe({
  name: 'initials',
})

因此您的两个管道具有相同的name，您的应用将失败，并出现与上述完全相同的问题。

在两次不同的项目中，我两次遇到我，我不得不还原软件包的版本，甚至git reset --hard都不知道它是什么，但是这次版本在3个月内没有变化，并且app可以正常工作5几分钟前，我找到了罪魁祸首。