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

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: `
    <h2>🔥 Fire Pokémon</h2>
    <ul>
      <li>Charmander</li>
      <li>Charmeleon</li>
      <li>Charizard</li>
    </ul>
  `,
})
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: `
    <h1>Pokémon Dex</h1>
    <nav>
      <a routerLink="/fire">🔥 Fire</a>
      <a routerLink="/electric">⚡ Electric</a>
      <a routerLink="/water">💧 Water</a>
    </nav>
    <router-outlet></router-outlet>
  `,
})
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!