Angular 11 vs Angular 12: What’s Changing and Why It Matters

Published: January 15, 2021

---

Introduction

Angular continues its rapid evolution, with Angular 12 released in May 2021 following Angular 11 in November 2020. Both versions bring significant improvements, but Angular 12 stands out with key updates around the Ivy rendering engine, stricter compiler options, and better support for modern JavaScript standards.

If your project is still on Angular 10 or earlier, understanding these changes is critical for smooth migration and to take advantage of the latest framework capabilities.

In this post, we’ll break down the most important differences between Angular 11 and 12 — including practical examples — and offer guidance on migration strategies.

---

1. Ivy Improvements and View Engine Deprecation

Angular 11 Recap

Angular 11 improved Ivy, Angular’s default rendering engine, with faster builds and better debugging experience. It introduced:

• Faster type checking in language service
• Improved component test harnesses
• Support for stricter types and better error messages

Angular 12 Enhancements

Angular 12 continues the Ivy journey by removing support for the older View Engine compiler and runtime in favor of Ivy exclusively. This is a major step:

• View Engine deprecated — all libraries should support Ivy
• Improved Ivy build errors for easier troubleshooting
• New inline Sass support in styles

---

Example: Ivy Compiler Flag in tsconfig.json

Angular 12 removes the enableIvy flag from tsconfig.json. Previously, enabling Ivy looked like:

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

In Angular 12, Ivy is always on, so this option is ignored and can be removed.

---

2. Updated Angular CLI Features

Angular 11 CLI

• Faster builds with improved caching
• Support for ESLint through third-party plugins
• Experimental support for webpack 5

Angular 12 CLI

• Full support for webpack 5 with faster builds and better module federation
• Deprecated support for legacy browsers by default
• Better strict typing in the Angular schematics (code generators)

---

Example: Enabling Webpack 5 in Angular 11 (Experimental)

To try webpack 5 in Angular 11, you’d manually adjust your angular.json:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "webpackConfig": "webpack.config.js"
    }
  }
}

In Angular 12, webpack 5 is the default, so this manual setup is no longer needed.

---

3. ES Module Support

Angular 12 improves support for the modern ES module standard, enabling better tree shaking and faster loads in modern browsers.

• Enables ES2020+ target for smaller bundles
• Removes legacy code for IE11 (disabled by default)
• Requires polyfills only for evergreen browsers

---

Example: Targeting ES2020 in tsconfig.json

Angular 12 recommends updating your tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "node",
    ...
  }
}

This modernizes output JavaScript for better performance in browsers that support ES2020.

---

4. Migration Advice for Angular 10 Projects

If you’re still on Angular 10, you should plan your migration carefully:

• Update to Angular 11 first, fix deprecations, and verify tests
• Run ng update @angular/core@11 @angular/cli@11
• Then upgrade to Angular 12 via ng update @angular/core@12 @angular/cli@12
• Test thoroughly to catch any Ivy-related or breaking changes

Use the Angular Update Guide (https://update.angular.io/) to tailor steps based on your project setup.

---

Summary

Feature	Angular 11	Angular 12
Ivy	Improved but coexists with View Engine	Ivy only, View Engine deprecated
CLI	Experimental webpack 5 support	Default webpack 5 support
ES Module & Target	ES2015 target	ES2020 target & modern browsers
Legacy browser support	Default included	Disabled by default

Angular 12 is a solid step forward for modern web apps, pushing Angular towards a leaner, faster future.

---

Bonus: Simple Angular Component Example (Angular 12 Style)

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

@Component({
  selector: 'app-hello',
  template: `<h1>Hello Angular 12!</h1>`,
  styles: [`
    h1 { color: #1976d2; font-family: Roboto, sans-serif; }
  `]
})
export class HelloComponent {}

---

Final Thoughts

Migrating to Angular 12 may require some effort but will pay off with improved performance, better tooling, and future-proofing your app.