Angular: Cannot read property 'routeConfig' of undefined TypeError

Question

When I am running my project locally everything works fine. I did a build of my project using:

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

When I run this code online. I can see my header and my footer. But my main page is not showed. If i click on the nav bar to go to another page I get this error:

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)

App Component:

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

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

Header Component:

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

app-routing:

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

Answer 1

Just in case anybody else comes to this question, after creating new pipe:

It looks like when you create new pipe by copying it from existing one and forget to change the name in decorator:

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

so you've got two pipes with the same name your app will fail with exactly the same problem as mentioned above.

Happened to me twice, on two different projects, I had to revert versions of packages and even did git reset --hard not knowing what it was, but this time versions were not changed for over 3 months and app was working 5 minutes before, thus I found the culprit.

Answer 2

I am not sure but can you try with this

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

Answer 3

This appears to be an issue with the @angular-devkit/build-angular version. See this answer to a similar question, where they said:

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.