Improve semantics of error message for incorrectly imported lazy loaded FeatureModule in AppModule

[danieldanielecki]

🐞 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

Describe the solution you'd like to have

Throw an error something like "AboutUsModule is incorrectly imported into AppModule, because it supposed to be lazy loaded."

[filipesilva]

I agree with you. This is super common. We could do better informing users about this pitfall.

[alan-agius4]

Related to #6373 (comment)

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}