Angular5+ Illegal state: Could not load the summary for directive RouterOutlet

Question

If i try to build my Angular App with ng build --prod --aot, i got always this Error:

ERROR in : Illegal state: Could not load the summary for directive RouterOutlet in C:/Path-To-Project/node_modules/@angular/Router/router.d.ts.

If I compile my project with "ng serve", I do not get an error message. I tried to implement several variants of lazy loading but each one caused the error. Furthermore, I have tried to completely rebuild the app and to keep to all the specifications of Angular, but I always come back to the same point with this error message.

My package.json:

{
  "name": "Name",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.4",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

My app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { Routes, RouterModule } from '@angular/Router';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from './Core/core.module';
// import { ProtkollModule } from './protokoll/protokoll.module';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CoreModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

My app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/Router';

import { AppComponent } from './app.component';
import { LoginComponent } from './Core/login/login.component';
import { AuthGuardService } from './Core/login/auth-guard.service';
import { AdminComponent } from './admin/admin.component';
import { ErrorComponent } from './Core/error/error.component';

const appRoutes: Routes = [
    {path: '', component: AppComponent, pathMatch: 'full'},
    {path: 'login', pathMatch: 'full', component: LoginComponent},
    {path: 'freigabe', loadChildren: './product-list/product-list.module#ProductListModule' , canLoad: [AuthGuardService]},
    {path: 'protokoll', loadChildren: './protokoll/protokoll.module#ProtkollModule' , canLoad: [AuthGuardService]},
    {path: 'admin', component: AdminComponent, canActivate: [AuthGuardService]},
    {path: 'error', component: ErrorComponent},
    {path: '**', redirectTo: ''}
  ];


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

My product-list.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/Router';

import { ReleaseButtonComponent } from './buttons/release-button/release-button.component';
import { SyncButtonComponent } from './buttons/sync-button/sync-button.component';
import { RollbackButtonComponent } from './buttons/rollback-button/rollback-button.component';
import { ProductListComponent } from './product-list.component';
import { LinkGeneratorComponent } from './link-generator/link-generator.component';
import { SearchProductsComponent } from './search-products/search-products.component';
import { ProductComponent } from './product/product.component';
import { UnderproductComponent } from './product/underproduct/underproduct.component';
import { VersionComponent } from './product/version/version.component';
import { ReleaseComponent } from './product/release/release.component';
import { SetButtonClassDirective } from './buttons/set-button-class.directive';
import { ButtonService } from './buttons/button.service';
import { ButtonCreateService } from './buttons/button-create.service';
import { ListToggleService } from './product/list-toggle.service';
import { LinkGeneratorService } from './link-generator/link-generator.service';
import { ProductListService } from './product-list.service';
import { SpinnerComponent } from './buttons/spinner/spinner.component';


const productListRoutes: Routes = [
    {path: '', component: ProductListComponent},
];

@NgModule({
    declarations: [
        ReleaseButtonComponent,
        SyncButtonComponent,
        RollbackButtonComponent,
        ProductListComponent,
        LinkGeneratorComponent,
        SearchProductsComponent,
        ProductComponent,
        UnderproductComponent,
        VersionComponent,
        ReleaseComponent,
        SetButtonClassDirective,
    ],
    imports: [
        CommonModule,
        RouterModule.forChild(productListRoutes)
    ],
    providers: [
        ButtonService,
        ButtonCreateService,
        ListToggleService,
        LinkGeneratorService,
        ProductListService,
    ],
    exports: [
    ]
})
export class ProductListModule { }

Does anyone know a solution to the problem?

Please post the `ProductListModule` and its routing configuration. — Tomasz Kula, Apr 09 '18 at 14:10

score 11 · Answer 1 · answered Jul 05 '18 at 14:19

I was getting a similar error when I run ng test in my angular 5 application with some test written using jasmine. The error I was getting is Error: Uncaught (in promise): Error: Illegal state: Could not load the summary for directive RegisterComponent.. The mistake I was doing was, I didn't add the declarations with my RegisterComponent, once I added that to my TestBed.configureTestingModule({}) the error goes away. Here is my code.

beforeEach(fakeAsync(() => {
    TestBed.configureTestingModule({
     declarations: [
      RegisterComponent
     ],
     providers: [
      ApiService,
      AuthService,
      FormBuilder
     ]
    }).overrideComponent(RegisterComponent, {
     set: {
      providers: [{
       provide: ApiService,
       useClass: MockApiService
      }]
     }
    }).compileComponents().then(() => {
     componentFixture = TestBed.createComponent(RegisterComponent);
     component = componentFixture.componentInstance;
    });

score 1 · Answer 2 · answered Apr 10 '18 at 08:48

I just fixed the mistake.

Unfortunately, I can not describe exactly what it was. My approach was to completely disassemble an identical project and repeatedly start the command ng build --prod --aot. After that, I rebuilt component via component and module via modules back into the fragmented project.

One of my bugs was that in my app-routing.module I made an entry on the AppComponent: {path: '', component: AppComponent, pathMatch: 'full'}. I changed that into this entry: {path: '', redirectTo: '', pathMatch: 'full'},

Other errors were wrong imports and exports into different modules, as well as a different write-in of the router's import. This process costs me 3 hours to find that error, so everyone that has the same bug, maybe you try the same way to find out wehere the error lies.

I hope this Post is usefull for others.

score 1 · Answer 3 · answered Oct 25 '19 at 10:27

1

For the error

Uncaught Error: Illegal state: Could not load the summary for directive MyComponent

Following fixed it in my case,

declarations:[
      ...components....
      MyComponent  // <- adding this GOT RID of the ISSUE
]

answered Oct 25 '19 at 10:27

kathikeyan A

1,668
2
16
31

Angular5+ Illegal state: Could not load the summary for directive RouterOutlet

3 Answers3