LazyLoadingAngular19

Lazy Loading in Angular 19 Using Standalone Components: A Pokémon Example 🐉⚡

With Angular 19, you can build apps using pure standalone components, ditching NgModule entirely. Lazy loading is cleaner than ever using the loadComponent() method with route-based dynamic imports.

In this post, we’ll walk through creating a Pokémon type navigator (Fire, Electric, Water) using Angular 19 + lazy-loaded standalone components — no modules required.

Goal

  • ✅ Use loadComponent() with Routes
  • ✅ Declare and lazy load standalone components
  • ✅ Create route-driven Pokémon screens
  • ✅ No NgModule needed!

Step 1: Generate Your Angular App 

ng new pokemon-standalone --standalone --routing --style=scss
cd pokemon-standalone

Step 2: Generate Standalone Components 

ng generate component pages/fire-pokemon --standalone
ng generate component pages/electric-pokemon --standalone
ng generate component pages/water-pokemon --standalone

Step 3: Setup app.routes.ts 

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'fire',
    loadComponent: () => import('./pages/fire-pokemon/fire-pokemon.component')
      .then(m => m.FirePokemonComponent),
  },
  {
    path: 'electric',
    loadComponent: () => import('./pages/electric-pokemon/electric-pokemon.component')
      .then(m => m.ElectricPokemonComponent),
  },
  {
    path: 'water',
    loadComponent: () => import('./pages/water-pokemon/water-pokemon.component')
      .then(m => m.WaterPokemonComponent),
  },
  {
    path: '',
    redirectTo: 'fire',
    pathMatch: 'full',
  },
  {
    path: '**',
    redirectTo: 'fire',
  },
];

Step 4: Add Basic Component Templates 

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'app-fire-pokemon',
  template: `
    🔥 Fire Pokémon
    
      Charmander
      Charmeleon
      Charizard
    
  `,
})
export class FirePokemonComponent {}

Step 5: App Shell (AppComponent) 

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule],
  template: `
    Pokémon Dex
    
      🔥 Fire
      ⚡ Electric
      💧 Water
    
    
  `,
})
export class AppComponent {}

Step 6: App config 

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};

Summary

Feature Used In
loadComponent() Routes with lazy-loaded standalone UI
standalone Declared for all components
provideRouter() Bootstrapping without NgModule

Final Thoughts

Angular 19 takes lazy loading to the next level — modules are optional, but clean, scalable apps are not. With loadComponent() and standalone architecture, your Angular apps are faster, smaller, and more maintainable.

Lazy load like a pro. Optimize like a champion. ⚡

Happy coding, and may your standalone components always be blazing fast!