Angular 8 was officially released on May 28, 2019. Ivy entered preview as an opt-in feature, and differential loading was enabled by default. After a month of hands-on experience, here's a summary of the upgrade experience and the practical results of each feature.

Differential Loading: Enabled by Default

Changes in build output

# Angular 7 (old)
dist/
  main.js          # ES5 bundle for all browsers

# Angular 8 (new)
dist/
  main-es2015.js   # Modern browsers (Chrome 61+, Firefox 60+)
  main-es5.js      # Legacy browsers (IE11 fallback)

Auto-generated HTML:

<script type="module" src="main-es2015.js"></script>
<script nomodule src="main-es5.js"></script>

Measured results (medium-sized Angular project):

• Main bundle reduced by 20%+ in modern browsers
• Noticeably faster runtime parse speed

Using Ivy as Opt-in

// tsconfig.app.json
{
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

Changes after enabling Ivy:

Build output: Component factory and rendering code is generated alongside the component file, rather than in a separate ngfactory file.

// Before: user.component.ngfactory.ts would be generated
// After Ivy: deployment graph (instructions) is inlined into the component class
static ɵcmp = defineComponent({...}); // generated by compiler

ngcc Compatibility Compiler

Ivy requires all dependencies to also be in Ivy format. For third-party libraries not yet compiled with Ivy, Angular provides ngcc (Angular Compatibility Compiler) which automatically converts them during installation:

# Runs automatically after installing dependencies
# Can also be run manually
node_modules/.bin/ngcc

Web Worker CLI Support

ng generate web-worker heavy-task
# Generates src/app/heavy-task.worker.ts

// heavy-task.worker.ts
onmessage = ({ data }) => {
  // Computation here won't block the main thread
  const result = data.reduce((sum: number, n: number) => sum + n * n, 0);
  postMessage(result);
};

// Usage in component.ts
export class AppComponent {
  compute(data: number[]) {
    const worker = new Worker("./heavy-task.worker", { type: "module" });
    worker.onmessage = ({ data: result }) => {
      this.result = result;
    };
    worker.postMessage(data);
  }
}

Upgrade Recommendations

# Upgrade command
ng update @angular/cli @angular/core

# The CLI will automatically convert string loadChildren to import() syntax
# If you use ViewChild('...'), you'll be prompted to add { static: true/false }

Summary

Angular 8's differential loading is the most impactful runtime improvement for existing projects. While Ivy is still in preview, now is a good time to audit your ViewChild static queries and lazy loading patterns to prepare for Angular 9, where Ivy becomes the default.