Angular 5 feature modules nested routing

Question

I'm building a web application that contains several feature modules (for modularity). I'm having a hard time getting the routing to work. I currently have 2 modules, a root module and a login module. The login module contains a few components:

• Base component (showing the layout for the entire login page)
• Login form component (showing the form, to be loaded into the base component)
• Password forget form component (showing the form, also to be loaded into the base component)
• A few more.

App.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {LoginModule} from './login/login.module';

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

App-routing.module.ts

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

const routes: Routes = [
  {
    path: 'login',
    loadChildren: './login/login-routing.module#LoginRoutingModule'
  }
];

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

login-routing.module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginBaseComponent} from '../login/login-base/login-base.component';

const routes: Routes = [
  {
    path: '',
    component: LoginBaseComponent
  }
];

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

When I test the routing by visiting the /login url, I get redirected to the app root with the following error in the console:

ERROR Error: Uncaught (in promise): TypeError: __webpack_require__.e is not a function
TypeError: __webpack_require__.e is not a function
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:19:29)

I'm stuck, I have no clue how to proceed.

Any ideas will be greatly appreciated!

Answer 1

Remove all imports of your Lazy Loaded Module from you root module.

App.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';

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

You also want to load your LoginModule not the login router module

App-routing.module.ts

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

const routes: Routes = [
  {
    path: 'login',
    loadChildren: './login/login.module#LoginModule'
  }
];

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