Angular 12.0: What's New, Release History & Support Lifecycle

What Is New in Angular 12.0

Angular 12.0 delivers a significant update focused on developer experience, performance, and future-proofing the framework. This release introduces a new, more rigorous View Engine deprecation path, a streamlined styling system, and numerous quality-of-life improvements.

What styling improvements were introduced?

Angular 12 introduces support for inline Sass in component styles, a major quality-of-life improvement for developers. You can now use Sass directly within your component's `styles` array without a separate preprocessor configuration.

This works by leveraging the built-in Angular compiler. When you specify `sass`, `scss`, or `less` as the style extension, the compiler will automatically process it. In practice, this simplifies your project setup and reduces the need for external build tooling just for component-scoped styles.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    $primary-color: #369;
    .title { color: $primary-color; }
  `]
})
export class AppComponent {}

How does the nullish coalescing operator help templates?

The nullish coalescing operator (??) is now available for use in Angular templates, providing a safer way to fall back to default values. This is a significant upgrade over the logical OR (||) operator for handling null or undefined values.

Unlike the OR operator, which falls back for all falsy values like 0 or empty strings, the nullish coalescing operator only triggers for true null or undefined. This matters because it prevents accidental overrides of intentional falsy values in your data.

<!-- Only shows 'Default' if currentValue is null or undefined -->
<p>{{ currentValue ?? 'Default' }}</p>

<!-- Old way with OR would also fallback for 0 or empty string -->
<p>{{ currentValue || 'Default' }}</p>

What is the state of the View Engine deprecation?

View Engine, the legacy compilation and rendering pipeline, is now officially deprecated in Angular 12. The framework is now all-in on Ivy, which has been the default since version 9. This deprecation is a clear signal to migrate any remaining View Engine-based libraries.

For most developers using standard Angular tooling, this change is seamless as you're already using Ivy. The impact is primarily on library authors who must ensure their packages are compatible with the Ivy distribution format (NGCC) to avoid breaking changes for users.

What are the key production build changes?

Running `ng build` now defaults to a production configuration, a change that optimizes for real-world deployment scenarios. Previously, you needed to explicitly add the `--prod` flag to enable optimizations like bundling, minification, and dead code elimination.

This change streamlines the deployment process and helps prevent accidentally shipping development builds to users. For development builds, you now need to explicitly use the `--configuration development` flag, making the intent of each build much clearer.

# Now builds for production by default
ng build

# For development builds, be explicit
ng build --configuration development