Angular 8 Tutorials - Learn Angular 8 Step By Step

Estimated study time: 16 minutes. A structured walkthrough of Angular 8's key additions.

Angular 8 introduced changes aimed at smaller bundle sizes and a smoother lazy-loading syntax, alongside an early opt-in preview of the Ivy rendering engine.

Step 1: Differential Loading

The CLI began automatically generating two bundles — one for modern browsers (smaller, using ES2015+) and one for older browsers (larger, using ES5) — serving each based on the browser's capabilities.

Step 2: Dynamic Import Syntax for Lazy Routes

Lazy-loaded routes moved from string-based module paths to standard dynamic import() syntax, which works better with modern tooling and type checking.

// Old (pre-8) syntax
{ path: 'admin', loadChildren: './admin/admin.module#AdminModule' }

// Angular 8+
{
  path: 'admin',
  loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
}

Step 3: Previewing Ivy

Angular 8 let developers opt into the new Ivy compiler and runtime ahead of it becoming default, by enabling a flag in tsconfig.json.

{
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

Step 4: Web Worker Support

The CLI added a command to scaffold a Web Worker, making it easier to move CPU-heavy work off the main thread.

ng generate web-worker my-worker