Angular-cli: Improve semantics of error message for incorrectly imported lazy loaded FeatureModule in AppModule

Created on 3 Apr 2019 · 2Comments · Source: angular/angular-cli

🐞 Bug report

✍️ Description

Lazy routing is so often used a technique, but we still don't have semantic enough error message when a module to lazy route is included in imports of AppModule. Removing this import makes lazy loading implemented correctly, but the error which is being thrown during the import is not correct at all. Similar topics:

#9488 (it's answer helps, but comment just from 27 days ago clearly shows current error message is still confusing);
#9825 (not really address the problem, just the error message is the same);
#23412 (it's answer helps);

🔬 Minimal Reproduction

Step 1. Generate a new component to lazy load, here it's ng g c about-us.
Step 2. Create its module, here it's about-us.module.ts.
Step 3. Add RouterModule.forChild in about-us.module.ts, sample code below:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AboutUsComponent } from './about-us/about-us.component';

@NgModule({
  declarations: [AboutUsComponent],
  imports: [RouterModule.forChild([{ path: '', component: AboutUsComponent }])]
})
export class AboutUsModule {}

Step 4. Add AboutUsModule (FeatureModule) to AppModule, AboutUsModule we want to lazy load, like that (code for app.module.ts):

AboutUsModule.

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AboutUsModule } from '@app/about-us';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AboutUsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 5. Create app-routing.module.ts to define paths, for about-us it would be like that:

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

const routes: Routes = [
  {
    path: 'about-us',
    loadChildren: '@ditectrev-libs/about-us/src/lib/about-us.module#AboutUsModule'
  }
];

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

Step 6. Add to app.component.html, below:

<router-outlet></router-outlet>

Step 7. Run ng serve, and navigate to localhost:4200/about-us, you should see an error like in Exception or Error section below.

🔥 Exception or Error

core.js:15713 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function

🌍 Your Environment


Angular CLI: 7.2.4
Node: 10.15.0
OS: win32 x64
Angular: 7.2.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.1
@angular-devkit/build-angular     0.13.1
@angular-devkit/build-optimizer   0.13.1
@angular-devkit/build-webpack     0.13.1
@angular-devkit/core              7.3.1
@angular-devkit/schematics        7.2.4
@angular/cdk                      7.3.2
@angular/flex-layout              7.0.0-beta.23
@angular/material                 7.3.2
@ngtools/webpack                  7.3.1
@schematics/angular               7.2.4
@schematics/update                0.12.4
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0