Angular

What's new in Angular v12

Published May 19, 2021

Updated Feb 16, 2023

8 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Angular 12 Released

Angular v12 has been released! Here are some main updates.

Nullish coalescing operator support

@Component(){
  selector: 'app-comp',
  template: `<div>Hello, {{title ?? 'Angular'}}</div>`
})

Core

APP_INITIALIZER now supports Observable.

It is also a long-waited feature request: in Angular v12, we can now use Observable as APP_INITIALIZER.

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

function observableInitializer() {
  // Before Angular v12, you have to return a Promise.
  // return () => someObservable().toPromise();
  // Now you can return the observable directly.
  return () => someObservable();
}

@NgModule({
  imports: [...],
  providers: [{
    provide: APP_INITIALIZER,
    useFactory: observableInitializer,
    multi: true
  }],
  ...
})
export class AppModule {}

Http

HttpClient

Before Angular 12, if you wanted to pass boolean or number as HttpParams, you had to:

HttpClient.get('api/endpoint', { param1: '10', param2: 'true' })

With Angular 12, the HttpParams has been updated to accept the boolean and the number values:

HttpClient.get('api/endpoint', { param1: 10, param2: true })

Http Interceptor Context

This is a very long waited feature. In Angular 12, you can now pass data between interceptors. Here is a great article by Netanel Basal.

Form

Form: Support min/max validator

HTML5 standards support built in validator such as min/max for input element.

<input type="number" min="5" max="10">

Before Angular 12, the min/max attributes are ignored by FormsModule, so the Angular FormControl valid property will still be true even the input data exceed the min or max range. But the underlying DOM HTMLInputElement's validity.valid will still be false.

From Angular 12, the min/max validator is implemented so the valid result will be consistent with native DOM status.

Animation

Sometimes we want to disable animations. Before Angular 12, we needed to provide the NoopAnimationModule. In Angular 12, there is a new way to do that by using BrowserAnimationsModule.withConfig({disableAnimations: true}) so the user can disable animations based on the runtime information.

Router

Router: Support location.historyGo() functionality.

Support location.historyGo(relativePosition: number) to navigate to the specific history page so it will be compatible with the DOM history.go() API.

Router: Provides RouterOutletContract interface

Provides RouterOutletContract interface allows the 3rd party library to implement its own RouterOutlet more easily (such as add own logic for navigation, animation). For details, please refer to this PR https://github.com/angular/angular/pull/40827.

Tooling

Angular Linker

Ivy has been released from Angular 9 and has become the default in the Angular App from Angular 10. It is fast, easy to debug, and has a lot of possibilities in the future. However, for Angular library development, the user still has to compile the lib with the old ViewEngine to publish to npm. The Angular library deploy process is:

The developer compiles the lib with ViewEngine.
When the Angular app is using the lib, when yarn install, Angular compiler will travel the node_modules directory and use ngcc to convert the ViewEngine library to Ivy. This process is slow and needs to run whenever node_modules changes.

The reason we need this process is if we remove ngcc and publish the Ivy instructions to npm, the instruction code will become the public API. It is very difficult to change it in the future. ViewEngine is not instruction but metadata, so it can be used across multiple versions even for Ivy.

To resolve this issue, Angular provides an RFC last year, https://github.com/angular/angular/issues/38366, with an idea which is Angular Linker. It is an advanced version ngcc. It compiles the Angular library code with partial mode.

The output is not Ivy instructions, so it allows future changes.
The output is still metadata, but not like ViewEngine, the metadata is self-contained, so the output for one component contains all the information needed to compile this component without any other global knowledge(such as NgModule). It is fast and be able to do incremental/cache/parallel build.
The new intermediate output can be directly consumed by Angular Compiler, so the node_modules folder doesn't need to be touched.

To use this feature, update the option in the tsconfig.lib.prod.json like this.

"enableIvy": "true", "compilationMode": "partial"

Typescript 4.2 support

Supports Typescript 4.2.

E2E protractor RFC

Angular is using protractor for e2e test. The protractor has a long history from 2013. It helped users write e2e test, and to support better async test, protractor did a lot of work via ControlFlow to make async/await work.

Since the native async/await is introduced into Javascript standard, protractor ControlFlow becomes incompatible with the native async/await, so protractor drops the ControlFlow and uses the solution of selenium-webdriver completely.

Also protractor has a lot of features just for AngularJS such as locator/mock. After removing these codes, protractor becomes a wrapper of selenium wrapper without any valuable functionalities.

And now the Angular developers are using several alternative solutions to do the e2e test such as:

Cypress
PlayWright
Puppeteer

The Angular team posts an RFC to deprecate the protractor and make Angular easy to integrate with the 3rd party e2d platform.

Here is the RFC https://github.com/angular/protractor/issues/5502

Based on the RFC, Angular plans to drop the protractor support until Angular v15 and will guide the Angular developers to select an alternative platform when the user tries to run ng e2e.

CLI: Webpack 5 support

Webpack 5 support many new features such as:

Module federation is a new way to develop micro-frontend
Disk caching for faster build
Better tree shaking

CLI: Lint

Angular v11 deprecated to use TSLint as the default linter, and Angular v12 remove TSLint and codelyzer from cli, so please reference the following article to migrate to eslint. (https://github.com/angular-eslint/angular-eslint#migrating-from-codelyzer-and-tslint)

CLI: Build

When we build an Angular app, we use ng build --prod all the time. The options often confuse the user that --prod will make a production build, but it is just an alias of ng build --configuration=production. To make this more clear, CLI remove --prod and add a defaultConfiguration setting with the value production. Now, ng build default will build with production configuration.

CLI: Build bundles with ES2017+

Until Angular 12, Angular only supports output bundles in ES2015 format. ES2017+ is not supported because Zone.js is not supporting native async/await patching. From Angular 12, CLI supports to only transpile the native async/await code to Promise but keep the other ES2017+ code untouched, so you can specify the output bundle format to ES2017+ from Angular 12.

CLI: `inlineCritical` by default

The inlineCritical settings of styles optimization in the angular.json becomes true by default. Please reference here for more details.

CLI: `strict` mode by default

The workspace generated by CLI will use strict mode by default. To generate non-strict mode, use --no-strict option.

CLI: Built in `tailwindcss` support

Tailwindcss is a popular CSS library. Before Angular 12, to integrate with Tailwindcss, the user needs to do some postcss configuration themselves. With Angular 12, this is done by the CLI so it is super easy to do the integration.

npm install -D tailwindcss npx tailwindcss init

This is the same process to install the normal Tailwindcss.

CLI: confirm `ng add` before install packages from npm.

Now ng add will ask the user to confirm the package/version before installing the packages. This gives the user a chance to stop the process when the user has a typo in the project name or want to initialize the project with other options.

Angular Language Service for Ivy

Angular Ivy has been released since v9, but the Angular Language Service is still using View Engine to compile the template and did a lot of magic work to make everything work in Ivy, which is not efficient. Also, since View Engine is deprecated, some issues and features may not be implemented in the View Engine version of Language Service for Ivy.

Now we have the new Angular Language Service written in Ivy and for Ivy.

You can opt-in the new Angular Language Service beta with Ivy support now. To use it in VSCode, try the following steps.

Install the latest extension in the VSCode Marketplace
Set strictTemplates: true in tsconfig.json Angular compiler options
Go to Preferences -> Settings -> Extensions -> Angular Language Service -> Check “Experimental Ivy”

Please reference this blog for more details.

CLI: Support inlineStyleLanguage option

A new build option inlineStyleLanguage is added. Now you can write css/sass/scss/less in the inline style of a component!

Angular Components

MDC Web based new component

Angular Component is continuing to create new MDC Web based components and the backward-compatible. Here is the design.

For the new Angular Material Component, Angular CDK provides the behavior and the MDC Web Component provides the user experiences defined by the Material Design spec. The Angular Material team doesn't need to maintain another implementation of the Material Design and the UI will be more consistent.

New `@use` SASS module system

You may already use the @import syntax in the SASS style file, but it has some flaws and make the module system hard to maintain. For details, please reference the article here.

Now Angular Components are using the new @use syntax for the better module system of SASS. To use the new module system, you can use the following schematic to migrate.

ng g @angular/material:themingApi

Also, the node-sass package will be replaced by the new sass package.

Deprecations

IE11 support is deprecated!
ViewEngine for application build is removed. All applications are using Ivy to build.
entryComponent is removed from Component schematic.
string based lazy loading support is dropped.

{ path: 'Lazy', component: LazyComponent }, { path: 'lazy', loadChildren: './modules/lazy/lazy.module#LazyModule', }

is not supported, please use dynamic import instead.

{ path: 'Lazy', component: LazyComponent }, { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }

For the full deprecation list, please check here.

How to update to v12

Use the Angular CLI:

ng update @angular/cli @angular/core

You can find more information from update.angular.io/.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Jia Li
Jia Li is a frontend developer with passion, he is an Angular Collaborator and the code owner of angular/zone.js. He loves Angular and now develops Angular enterprise application.
@JiaLiPassion @JiaLiPassion

Exploring Angular Forms: A New Alternative with Signals

Exploring Angular Forms: A New Alternative with Signals In the world of Angular, forms are essential for user interaction, whether you're crafting a simple login page or a more complex user profile interface. Angular traditionally offers two primary approaches: template-driven forms and reactive forms. In my previous series on Angular Reactive Forms, I explored how to harness reactive forms' power to manage complex logic, create dynamic forms, and build custom form controls. A new tool for managing reactivity - signals - has been introduced in version 16 of Angular and has been the focus of Angular maintainers ever since, becoming stable with version 17. Signals allow you to handle state changes declaratively, offering an exciting alternative that combines the simplicity of template-driven forms with the robust reactivity of reactive forms. This article will examine how signals can add reactivity to both simple and complex forms in Angular. Recap: Angular Forms Approaches Before diving into the topic of enhancing template-driven forms with signals, let’s quickly recap Angular's traditional forms approaches: 1. Template-Driven Forms: Defined directly in the HTML template using directives like ngModel, these forms are easy to set up and are ideal for simple forms. However, they may not provide the fine-grained control required for more complex scenarios. Here's a minimal example of a template-driven form: ` ` 2. Reactive Forms: Managed programmatically in the component class using Angular's FormGroup, FormControl, and FormArray classes; reactive forms offer granular control over form state and validation. This approach is well-suited for complex forms, as my previous articles on Angular Reactive Forms discussed. And here's a minimal example of a reactive form: ` ` Introducing Signals as a New Way to Handle Form Reactivity With the release of Angular 16, signals have emerged as a new way to manage reactivity. Signals provide a declarative approach to state management, making your code more predictable and easier to understand. When applied to forms, signals can enhance the simplicity of template-driven forms while offering the reactivity and control typically associated with reactive forms. Let’s explore how signals can be used in both simple and complex form scenarios. Example 1: A Simple Template-Driven Form with Signals Consider a basic login form. Typically, this would be implemented using template-driven forms like this: ` ` This approach works well for simple forms, but by introducing signals, we can keep the simplicity while adding reactive capabilities: ` ` In this example, the form fields are defined as signals, allowing for reactive updates whenever the form state changes. The formValue signal provides a computed value that reflects the current state of the form. This approach offers a more declarative way to manage form state and reactivity, combining the simplicity of template-driven forms with the power of signals. You may be tempted to define the form directly as an object inside a signal. While such an approach may seem more concise, typing into the individual fields does not dispatch reactivity updates, which is usually a deal breaker. Here’s an example StackBlitz with a component suffering from such an issue: Therefore, if you'd like to react to changes in the form fields, it's better to define each field as a separate signal. By defining each form field as a separate signal, you ensure that changes to individual fields trigger reactivity updates correctly. Example 2: A Complex Form with Signals You may see little benefit in using signals for simple forms like the login form above, but they truly shine when handling more complex forms. Let's explore a more intricate scenario - a user profile form that includes fields like firstName, lastName, email, phoneNumbers, and address. The phoneNumbers field is dynamic, allowing users to add or remove phone numbers as needed. Here's how this form might be defined using signals: ` > Notice that the phoneNumbers field is defined as a signal of an array of signals. This structure allows us to track changes to individual phone numbers and update the form state reactively. The addPhoneNumber and removePhoneNumber methods update the phoneNumbers signal array, triggering reactivity updates in the form. ` > In the template, we use the phoneNumbers signal array to dynamically render the phone number input fields. The addPhoneNumber and removePhoneNumber methods allow users to reactively add or remove phone numbers, updating the form state. Notice the usage of the track function, which is necessary to ensure that the ngFor directive tracks changes to the phoneNumbers array correctly. Here's a StackBlitz demo of the complex form example for you to play around with: Validating Forms with Signals Validation is critical to any form, ensuring that user input meets the required criteria before submission. With signals, validation can be handled in a reactive and declarative manner. In the complex form example above, we've implemented a computed signal called formValid, which checks whether all fields meet specific validation criteria. The validation logic can easily be customized to accommodate different rules, such as checking for valid email formats or ensuring that all required fields are filled out. Using signals for validation allows you to create more maintainable and testable code, as the validation rules are clearly defined and react automatically to changes in form fields. It can even be abstracted into a separate utility to make it reusable across different forms. In the complex form example, the formValid signal ensures that all required fields are filled and validates the email and phone numbers format. This approach to validation is a bit simple and needs to be better connected to the actual form fields. While it will work for many use cases, in some cases, you might want to wait until explicit "signal forms" support is added to Angular. Tim Deschryver started implementing some abstractions around signal forms, including validation and wrote an article about it. Let's see if something like this will be added to Angular in the future. Why Use Signals in Angular Forms? The adoption of signals in Angular provides a powerful new way to manage form state and reactivity. Signals offer a flexible, declarative approach that can simplify complex form handling by combining the strengths of template-driven forms and reactive forms. Here are some key benefits of using signals in Angular forms: 1. Declarative State Management: Signals allow you to define form fields and computed values declaratively, making your code more predictable and easier to understand. 2. Reactivity: Signals provide reactive updates to form fields, ensuring that changes to the form state trigger reactivity updates automatically. 3. Granular Control: Signals allow you to define form fields at a granular level, enabling fine-grained control over form state and validation. 4. Dynamic Forms: Signals can be used to create dynamic forms with fields that can be added or removed dynamically, providing a flexible way to handle complex form scenarios. 5. Simplicity: Signals can offer a simpler, more concise way to manage form states than traditional reactive forms, making building and maintaining complex forms easier. Conclusion In my previous articles, we explored the powerful features of Angular reactive forms, from dynamic form construction to custom form controls. With the introduction of signals, Angular developers have a new tool that merges the simplicity of template-driven forms with the reactivity of reactive forms. While many use cases warrant Reactive Forms, signals provide a fresh, powerful alternative for managing form state in Angular applications requiring a more straightforward, declarative approach. As Angular continues to evolve, experimenting with these new features will help you build more maintainable, performant applications. Happy coding!...

Oct 4, 2024

5 mins

AngularJavaScript

How to Develop a Vision Pro App using Angular with Nathan Walker

In this training led by Nathan Walker, viewers are introduced to Angular app development for VisionPro. The session covers integrating 3D models, manipulating them with NeoScript Swift, and using USDZ files, with a focus on asset management and Swift packages for immersive experiences. Nathan also reviews integrating and manipulating 3D models using NeoScript Swift, enhancing Angular apps with interactive and visually appealing interfaces. The use of USDZ files added stunning 3D graphics, bringing apps to life. The training also explores the interaction between NativeScript views and Swift UI components, demonstrating the flexibility in app development. This integration allows developers to create dynamic user interfaces, combining the strengths of Angular and Swift UI for exceptional user experiences....

Jun 11, 2024

1 min

AngularJavaScript

Zone.js deep diving - Execution Context

Zone.js deep diving Chapter 1: Execution Context As an Angular developer, you may know NgZone, which is a service for executing work inside, or outside of the angular Zone. You may also know that this NgZone service is based on a library called zone.js, but most developers may not directly use the APIs of zone.js, or know what zone.js is, so I would like to use several articles to explain zone.js to you. My name is Jia Li. I am a senior software engineer at This Dot Labs, and I have contributed to zone.js for more than 3 years. Now, I am the code owner of angular/zone.js package (zone.js had been merged into angular monorepo), and I am also an Angular collaborator. What is Zone.js Zone.js is a library created by Brian Ford in 2010 and is inspired by Dart. It provides a concept called Zone, which is an execution context that persists across async tasks. A Zone can: 1. Provide execution context that persist across async tasks. 2. Intercept async task, and provide life cycle hooks. 3. Provide centralized error handler for async tasks. We will discuss those topics one by one. Execution Context So what is Execution Context? This is a fundamental term in Javascript. Execution Context is an abstract concept that holds information about the environment within the current code being executed. The previous sentence may be a little difficult to understand without context, so let's use some code samples to explain it. For better understanding of Execution Context/Scope, please refer to this great book from getify 1. Global Context ` So in this first example, we have a global execution context, which will be created before any code is created. It needs to know it's scope, which means the execution context needs to know which variables and functions it can access. In this example, the global execution context can access variable a. Then, after the scope is determined, the Javascript engine will also determine the value of this. If we run this code in Browser, the globalThis will be window, and it will be global in NodeJS. Then, we execute testFunc. When we are going to run a new function, a new execution context will be created, and again, it will try to decide the scope and the value of this. In this example, the this in the function testFunc will be the same with globalThis, because we are running the testFunc without assigning any context object by using apply/call. And the scope in testFunc will be able to access both a and b. This is very simple. Let's just see another example to recall the Javascript 101. ` Here, testFunc is a property of testObj. We call testFunc in several ways. We will not go very deeper about how it works. We just list the results here. Again, please check getify for more details. 1. call testObj.testFunc, this will be testObj. 2. create a reference newTestFunc, this will be globalThis. 3. call with apply, this will be newObj. 4. call bounded version, this will always be bindObj. So we can see that this will change depending on how we call this function. This is a very fundamental mechanism in Javascript. So, back to Execution Context in Zone. What is the difference? Let's see the code sample here: ` So, in this example, we created a zone (we will talk about how to create a zone in the next chapter). As suggested by the term zone, when we run a function inside the zone, suddenly we have a new execution context provided by zone. Let's call it zoneThis for now. Unlike this, the value of zoneThis will always equal the zone, where the functions is being executed in no matter if it is a sync or an async operation. You can also see, in the callback of setTimeout, that the zoneThis will be the same value when setTimeout is scheduled. So this is another principle of Zone. The zone execution context will be kept as the same value as it is scheduled. So you may also wonder how to get zoneThis. Of course, we are not inventing a new Javascript keyword zoneThis, so to get this zone context, we need to use a static method, introduced by Zone.js, which is Zone.current. ` Because there is a Zone execution context we can share inside a zone, we can also share some data. ` Execution Context is the fundamental feature of Zone.js. Based on this feature, we can monitor/track/intercept the lifecycle of async operations. We will talk about those hooks in the next chapter....

Jan 28, 2020

4 mins

Angular

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

In this episode of Leadership Exchange, host Rob Ocel chats with Jerry Reghunadh, Senior Director of Enterprise Architecture at Data Nimbus, about leadership, AI adoption, and data-driven decision-making. Jerry shares his career journey, insights on leveraging tools like ChatGPT and Copilot, and strategies for building effective data pipelines. They explore how companies can avoid "analysis paralysis," adopt AI strategically, and evaluate new technologies to solve real-world problems. Tune in for practical advice on aligning innovation with business goals and staying competitive in a rapidly evolving tech landscape. Chapters 00:00 – Introduction 00:31 – Jerry’s Leadership Journey 02:01 – Discussing AI in Leadership 03:59 – Experimenting with AI Tools 06:24 – Overcoming Analysis Paralysis 09:18 – Importance of Early AI Adoption 13:12 – AI’s Impact on Efficiency 14:30 – Sponsor Message 16:26 – Setting Realistic Goals for AI 19:41 – Data Management and AI 23:09 – Is AI Just a Fad? 27:22 – Testing New Technologies 29:56 – Final Thoughts on AI 30:25 – Connect with Jerry 30:44 – Closing Remarks 31:20 – Outro Follow Jerry on Social Media Linkedin: https://www.linkedin.com/in/jerrymannel/ Sponsored by This Dot: thisdot.co...

Nov 18, 2024

1 min

AIEngineering Leadership

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Angular 12 Released

Nullish coalescing operator support

Core

APP_INITIALIZER now supports Observable.

Http

HttpClient

Http Interceptor Context

More readable Http status code

Form

Form: Support min/max validator

Animation

Router

Router: Support location.historyGo() functionality.

Router: Provides RouterOutletContract interface

Tooling

Angular Linker

Typescript 4.2 support

E2E protractor RFC

CLI: Webpack 5 support

CLI: Lint

CLI: Build

CLI: Build bundles with ES2017+

CLI: inlineCritical by default

CLI: strict mode by default

CLI: Built in tailwindcss support

CLI: confirm ng add before install packages from npm.

Angular Language Service for Ivy

CLI: Support inlineStyleLanguage option

Angular Components

MDC Web based new component

New @use SASS module system

Deprecations

How to update to v12

Jia Li

Exploring Angular Forms: A New Alternative with Signals

How to Develop a Vision Pro App using Angular with Nathan Walker

Zone.js deep diving - Execution Context

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

Let's innovate together!

Exploring Angular Forms: A New Alternative with Signals

How to Develop a Vision Pro App using Angular with Nathan Walker

Zone.js deep diving - Execution Context

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

CLI: `inlineCritical` by default

CLI: `strict` mode by default

CLI: Built in `tailwindcss` support

CLI: confirm `ng add` before install packages from npm.

New `@use` SASS module system