Lazy Loading ngModules with own routes

Question

I have this scenario.

I have two Angular Modules: AuthModule and DashModule. Each of these modules have their own .routing.tsfiles.

Then, each of the modules are imported into the AppModule at the appwide level.

In code, here:

auth.module.ts is at src/app/auth/auth.module.ts

auth.module.ts

import { NgModule } from '@angular/core';
... // all necessary imports
import { AuthRoutingModule } from './auth-module.routing';

@NgModule({
  imports: [
    CommonModule,
    AuthRoutingModule
  ],
  declarations: [
    // all declarations
  ],
  providers: []
})

export class AuthModule { }

src/app/auth/auth-module.routing.ts

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

const routes: Routes = [
    { path: 'not-verified', component: NotVerifiedComponent },
    { path: 'login', component: LoginRegisterComponent },
    { path: 'register', component: LoginRegisterComponent },
    { path: 'verify-email/:token', component: VerifyEmailComponent },
    { path: 'reset-password/:token', component: ResetPasswordComponenet },
    { path: 'forgot', component: ForgotComponent },
  ];

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

The DashModule also follow a similar pattern as the AuthModule

My src/app/app.routing.ts looks like this:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NotfoundComponent } from './pages/notfound/notfound.component';

const appRoutes: Routes = [ 
  // this is more like a catchall route. if all routes fail
  {path: '**', component: NotfoundComponent },
];

export const AppRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

My src/app/app.module.ts looks like this:

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

import { AuthModule } from './auth/auth.module';
import { DashModule } from './dash/dash.module';
// Providers
// some providers

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    ...
    AuthModule,
    DashModule,
    AppRouting
  ],
  exports: [  ],
  providers: [
   // providers here
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, can I make both the DashModule and AuthModule lazy load? How?

Answer 1

Lazily loaded modules are not imported into the app.module. Remove them from there, otherwise, they will not be lazy loaded. In your app.routing.ts you need to define the routes and lazy load the modules there using something like:

const appRoutes: Routes = [ 
  { path: 'dashbobard', loadChildren: 'src/app/dash/dashmodule.module#DashModule' },
  // or use relative paths.
  { path: 'auth', loadChildren: './auth/auth.module#AuthModule },
];

If you're switching your application to lazily load modules, you might have to fix some of your routes, eg [routerLink]='[/some/route]'