Description
🐞 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."