What's new in Angular 11?

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 

npm install -g @angular/cli@latest

>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

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

"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"
  }

>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

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

ng serve --hmr

>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.
				

ng g resolver resolvername

ng g resolver DemoResolver

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 {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
    return of(true);
  }
}

ng xi18n --ivy

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

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

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

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. Table of Content 1. What is Angular? 2. How to update the Angular 11 version? 3. New Features of Angular 3.1. Router 3.2. Pipe 3.3. Webpack 5 support 3.4. Browser support 3.5. Typescript version 3.6. Formatted Build Output 3.7. Support lazy loading 3.8. HMR support 3.9. Generator for Resolvers 3.10. i18n tokens 3.11. Inline Font 3.12. Service Worker Improvements 4. Conclusion 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 dedicated Angular Developer? Your Search ends here. See 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 { resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { return of(true); } }   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 }, } OR "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.