Lazy Loaded Login Feature Configure the router for lazy-loaded user module, aka code splitting.

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.


*Enrollment provides full access to this course (and updates) for life.

Or Signup for Unlimited PRO Access
👈 Firebase Setup
Google SignIn 👉

Create a lazy-loaded feature module to handle user sign-in and related tasks.

Steps

Step 1

Generate a feature module with routing and add a component to it.

command line 
ng g module user --routing
ng g component user/login-page

Step 2 - Update the User Routes

Add the component to the user module routes.

file_type_ng_component_ts user-routing.module.ts 
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginPageComponent } from './login-page/login-page.component';


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

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

Step 3 - Update the Root Routes

Use a dynamic import in the root router that references the lazy user module.

file_type_ng_component_ts app-routing.module.ts 
const routes: Routes = [
  { path: '', component: HomePageComponent },
  {
    path: 'login', loadChildren: () => import('./user/user.module').then(m => m.UserModule)
  }
];

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

Q&A Chat