What’s New in Angular 11?

Angular is the most popular framework and platform to build the desktop applications and mobile applications. Angular is written in typescript. Angular 11 has been released in Nov 2020 and it is developed by Google.

What is Angular?

Angular is a Typescript based open-source platform that makes it easy to create applications within web/mobile/desktop. It is a framework and platform to create a single page application.

How to update the Angular 11 version?

To check the installed version of angular, run the ng version command.

Angular CLI: 10.0.8
Node: 12.18.3
OS: win32 x64
Angular:
...
Ivy Workspace:
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1000.8
@angular-devkit/core         10.0.8
@angular-devkit/schematics   10.0.8
@schematics/angular          10.0.8
@schematics/update           0.1000.8
rxjs                         6.5.5

Update your Angular CLI version, run the following command:

npm install -g @angular/cli@latest

g stands for global installation.To check the installed the latest version of angular, open the command prompt and run theng version command.

>ng version
Angular CLI: 11.0.2
Node: 14.15.1
OS: win32 x64
Angular: 11.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.2
@angular-devkit/build-angular   0.1100.2
@angular-devkit/core            11.0.2
@angular-devkit/schematics      11.0.2
@schematics/angular             11.0.2
@schematics/update              0.1100.2
rxjs                            6.6.3
typescript                      4.0.5

New Features of Angular

Router
While using the RouteReuseStrategy #shouldReuseRoute method in an earlier version of angular, there was a concern about the next route for child routes. This issue is fixed in Angular 11.

Pipe
Angular 11 has fixed the typing for date and number pipe, earlier it is used to take any type as an input. In DatePipe, it will round off the millisecond part of the nearest millisecond provided. The async pipe will not return a null value as a value for undefined input.

Read More: Introduction To Custom Angular Schematics

Webpack 5 support
In Angular 11, you can use webpack5. To use the webpack5 in your project, add the following code in your package.json file. In this webpack5 support, to achieve the small bundle and faster build.

"resolutions": {
    "webpack": "5.4.0"
}

To use the webpack5, you will need to use yarn to test this because npm does not support this property.

Browser support
The support for IE 9, IE 10, and IE mobile is removed in the Angular 11, they were deprecated in the Angular 10 release. Angular supports only the IE 11 version.

Typescript version
Angular 11 only supports for Typescript 4.0 to speed up the builds and dropped the support for Typescript 3.9.

"devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.2",
    "@angular/cli": "~11.0.2",
    "@angular/compiler-cli": "~11.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }

Formatted Build Output
Angular 11 bringing to the new CLI output updates to make logs and reports to easier to understand. The output description of the build will be shown in below.

>ng build --prod
? Browser application bundle generation complete.
? Copying assets complete.
? Index html generation complete.
Initial Chunk Files               | Names         |      Size
main.67369a137e02816722b6.js   | main            | 213.08 kB
polyfills.bf99d438b005d57b2b31.js | polyfills    |  36.00 kB
runtime.359d5ee4682f20e936e9.js | runtime         |   1.45 kB
styles.09e2c710755c8867a460.css  | styles          |   0 bytes
                                  | Initial Total | 250.53 kB
Build at: 2020-12-01T04:45:59.463Z - Hash: d633afb7245175d2bf60 - Time: 34869ms

Support lazy loading
Angular 11 supports lazy loading with the named outlets. The earlier version of the angular named outlets always supported the component.

{
      path: '',
      outlet: 'home',
      loadChildren: ()=>import('./home/home.module').then(m=>m.HomeModule)
  }

HMR support
In Angular 11, updated the CLI to allow for enabling the Hot Module Replacement (HMR) when starting the application. HMR allows the modules to be replaced without refreshing the browser. To get started with the HMR, run the following command.

ng serve --hmr

After running this command, the console will display the confirming message that the HMR module is enabled.

>ng serve --hmr
NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.
? Browser application bundle generation complete.
Initial Chunk Files   | Names         |      Size
vendor.js          | vendor      |   2.66 MB
polyfills.js          | polyfills    | 484.95 kB
styles.css, styles.js   | styles          | 350.57 kB
main.js            | main          |  60.88 kB
runtime.js         | runtime        |  33.44 kB
                      | Initial Total |   3.57 MB
Build at: 2020-12-01T07:20:29.835Z - Hash: 4c8934a81ed952e948e6 - Time: 9147ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
? Compiled successfully.

Looking to hire Angular Developer? Your Search ends here.

Generator for Resolvers
In Angular 11, you can generate a resolve guard using CLI and the following command:

ng g resolver resolvername

You can create the resolver in your project using this command:

ng g resolver DemoResolver

After running this command, it will include two files DemoResolver.resolver.ts and DemoResolver.resolver.spec.ts

import { Injectable } from '@angular/core';
import {
  Router, Resolve,
  RouterStateSnapshot,
  ActivatedRouteSnapshot
} from '@angular/router';
import { Observable, of } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class DemoResolverResolver implements Resolve<boolean> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return of(true);
  }
}
</boolean></boolean>

i18n tokens
In Angular 11, you can extract the i18n tokens from the angular packages. You can use the following command with the library.

ng xi18n --ivy

Inline Font
In Angular 11, fonts can be converted into inline in index.html. You can set the flag in your angular.json under the build option. This feature is by default enabled into the production configuration.

"configurations": {          
   "optimization": true,
}

You can disable optimization to change the flag by the following command.

"configurations": {           
"optimization": {
        "fonts": false
     },
}

"optimization": {
        "fonts": {
            "inline": false
         }
     },
}

Service Worker Improvements
We can use the service worker to create a network request for navigation request and allows you to configure a new NavigationReuestStrategy. There is a missing asset in the cache and the server, then the service worker’s new state UnrecoverableStateError will be raised.

Conclusion

In this blog, we have seen what is angular and how to update the angular latest version. Angular released the latest version of Angular 11 and we discussed the new feature of the angular 11.