Lazy-loading components

Angular's built-in @defer block defers loading the dependency graph of its contents until a trigger fires — here, a 5-second timer. Combine with @placeholder / @loading / @error to fill the intermediate states.

Basic usage

Angular 17 introduced the control-flow syntax. You can now defer loading of parts of your components (Documentation).

This page demonstrates a way to lazy-load components

  
    
      
        @defer (on timer(5s)) {
        
    
      
          <demo-lazy-loaded></demo-lazy-loaded>
        
    
      
        } @placeholder {
        
    
      
          <span>Loading shortly…</span>
        
    
      
        }

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import { LazyLoadedComponent } from './lazy-loaded.component';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-lazy-loading-demo',
        
    
      
          templateUrl: './my-lazy-loading-demo.component.html',
        
    
      
          imports: [LazyLoadedComponent],
        
    
      
        })
        
    
      
        export class MyLazyLoadingDemoComponent {}