Angular: 无法读取未定义类型错误的 属性 'routeConfig'
Angular: Cannot read property 'routeConfig' of undefined TypeError
当我 运行 在本地安装我的项目时，一切正常。我使用以下方法构建了我的项目：
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>
页眉组件：
<nav id="sidebar">
blablabla
</nav>
<!-- END Sidebar -->
<!-- Header -->
<header id="page-header">
<!-- Header Content -->
BLABLABLA
</header>
<router-outlet></router-outlet>
app.module
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 { }
应用路由：
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 { }
index.html
<!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>
package.json
{
"name": "exam-simulator-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.2.11",
"@angular/common": "~8.2.11",
"@angular/compiler": "~8.2.11",
"@angular/core": "~8.2.11",
"@angular/forms": "~8.2.11",
"@angular/platform-browser": "~8.2.11",
"@angular/platform-browser-dynamic": "~8.2.11",
"@angular/router": "~8.2.11",
"angular-datatables": "^8.0.0",
"core-js": "^2.5.4",
"datatables.net": "^1.10.20",
"jquery": "^3.4.1",
"rxjs": "~6.5.3",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.12.4",
"@angular/cli": "~8.3.13",
"@angular/compiler-cli": "~8.2.11",
"@angular/language-service": "~8.2.11",
"@schematics/angular": "^7.3.9",
"@types/datatables.net": "^1.10.18",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.3.31",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.5.3"
}
}
这似乎是 @angular-devkit/build-angular 版本的问题。请参阅 到类似的问题，他们说：
I've downgraded all of my @angular/ packages to ^8.0.0 and also set "@angular-devkit/build-angular": "0.800.0" once I did that my lazy loading started working again.
我不确定，但你能试试这个吗
ng build --prod --aot --build-optimizer --base-href /ProjectName/
以防万一其他人在创建新管道后遇到这个问题：
当您通过从现有管道复制管道创建新管道时忘记更改装饰器中的名称时看起来像：
@Pipe({
name: 'initials',
})
所以你有两个相同的管道 name 你的应用程序将失败并出现与上述完全相同的问题。
发生在我身上两次，在两个不同的项目上，我不得不恢复包的版本，甚至 git reset --hard 不知道它是什么，但这次版本超过 3 个月没有改变，应用程序是5分钟前工作，所以我找到了罪魁祸首。
当我 运行 在本地安装我的项目时，一切正常。我使用以下方法构建了我的项目：
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>
页眉组件：
<nav id="sidebar">
blablabla
</nav>
<!-- END Sidebar -->
<!-- Header -->
<header id="page-header">
<!-- Header Content -->
BLABLABLA
</header>
<router-outlet></router-outlet>
app.module
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 { }
应用路由：
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 { }
index.html
<!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>
package.json
{
"name": "exam-simulator-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.2.11",
"@angular/common": "~8.2.11",
"@angular/compiler": "~8.2.11",
"@angular/core": "~8.2.11",
"@angular/forms": "~8.2.11",
"@angular/platform-browser": "~8.2.11",
"@angular/platform-browser-dynamic": "~8.2.11",
"@angular/router": "~8.2.11",
"angular-datatables": "^8.0.0",
"core-js": "^2.5.4",
"datatables.net": "^1.10.20",
"jquery": "^3.4.1",
"rxjs": "~6.5.3",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.12.4",
"@angular/cli": "~8.3.13",
"@angular/compiler-cli": "~8.2.11",
"@angular/language-service": "~8.2.11",
"@schematics/angular": "^7.3.9",
"@types/datatables.net": "^1.10.18",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.3.31",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.5.3"
}
}
这似乎是 @angular-devkit/build-angular 版本的问题。请参阅
I've downgraded all of my
@angular/packages to^8.0.0and also set"@angular-devkit/build-angular": "0.800.0"once I did that my lazy loading started working again.
我不确定，但你能试试这个吗
ng build --prod --aot --build-optimizer --base-href /ProjectName/
以防万一其他人在创建新管道后遇到这个问题：
当您通过从现有管道复制管道创建新管道时忘记更改装饰器中的名称时看起来像：
@Pipe({
name: 'initials',
})
所以你有两个相同的管道 name 你的应用程序将失败并出现与上述完全相同的问题。
发生在我身上两次，在两个不同的项目上，我不得不恢复包的版本，甚至 git reset --hard 不知道它是什么，但这次版本超过 3 个月没有改变，应用程序是5分钟前工作，所以我找到了罪魁祸首。