What's New In Angular 8.0 And How To Upgrade To Angular 8

ng new ivy-project --enable-ivy

"angularCompilerOptions": {
    "enableIvy": true
}

ng serve --aot

ng add @angular/bazel

npm install -g @angular/bazel
ng new my-app --colection=@angular/bazel

/* For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed */
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11

<script src="main-es2015.js" type="module"></script> <!-- For ES6 support browser or latest browser -->

<script src="main-es5.js" nomodule></script> <!-- For es5 support browser or old browser -->

In the above image, we can see that the bundle size significantly reduced in the case of the ES2015 version from 9% to 20%. So, ultimately small bundle size means performance optimization. Therefore, angular will build the additional files with polyfills and they will be included in the application with the modules attribute.

Changes in Lazy Loading in Route

In Angular from the beginning, the router mechanism always supports the concept of lazy loading. Till Angular 7, it was done by the string value of the loading module as below,

{path: 'lazy', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
}

The value up to the #(hash) sign represents the path of the module file in which the target component exists and the value after the hash sign represents the class name of that module. This style will still work in Angular 8. But the way of writing lazy modules has been changed. The string value of the loadchildren has been deprecated due to the support of ECMAScript and Ivy will only support this. So, now the load children declaration will be like this,

{
   path: 'lazy',
   loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
}

Web Worker Support

As we all know JavaScript is always executed in a single-threaded manner. So, it is important to perform any huge data call or any consecutive Rest API call in an asynchronous manner. But, in a real application-based scenario, this concept will not help us. That’s why today all the web browsers support the web worker process. Basically, the web worker process is the scripts executed by the browser in a separate thread. Communicate with that thread in the browser tab will be done by sending messages. So, in general, web worker is not related to Angular from any point of view. But, the main point is that these scripts need to be considered in the build process of the application. So, that after the deployment of the application, the same process can be performed continuously. So, the main objective is to provide one single bundle for every web worker. Now, in Angular 8 this task can be performed by the Angular CLI.

Also, we can configure our Angular CLI project if we add the web worker for the first time. In this process, CLI will exclude the worker.ts files from the tsconfig.json files and also, add a new TypeScript configuration file named tsconfig.worker.json which handles the worker.ts file. Also, this information also added to the angular.json file as

"webWorkerTsConfig": "tsconfig.worker.json"

Use Analytics Data

Now in Angular 8, Angular CLI collects usage analytics data so that the Angular team can prioritize the features and improvements. So, when we update the CLI projects, it will opt-in with ng analytics on options. If we allow this globally, then it will collect some data like the command used, the flag used, Operating System, Node Version, CPU Count, RAM Size, execution time, and error with crash data if any to the Angular team for improvement purposes in future releases.

Bye Bye @angular/http

From the Angular 8 version, angular stops the support for @angular/http. They had already depreciated the use of @angular/http in Angular 4 and provided an efficient and secure HTTP call by using @angular/common/http. But, still, Angular 7, allows us to use @angular/http in the application. But, from Angular 8 onwards, this support is not available further. So, we need to make adjustments in our code to use @angular/common/http in place of @angular/http.

Changes in ViewChild and ContentChild

In Angular 8, there are some breaking changes that occurred in the use of ViewChild and ContentChild. It is an unexpected behavior from the Angular team with respect to the previous releases. Now, in Angular 8 it is mandatory to provide a Boolean static flag to define the instance of a ViewChild and ContentChild. Since already experienced an issue that sometimes these instances are available in ngOnInit, but also sometimes we didn’t find these instances until ngAfterContentInit or ngAfterViewInit. It occurred mainly due to elements that will be loaded into the DOM at a later stage according to some data binding (like as per *ngIf or *ngFor), then those elements had to be inserted into the DOM in ngAfterViewInit or ngAfterContentInit. So, it is quite confusing and that’s why now we need to specify the component when the component resolution needs to take place.

@ViewChild('info', { static: false }) _cityViewChild: CityComponent;

If the static value is true, angular will try to find the element at the time of component initialization i.e. ngOnInit. It can be done when the element is not used in any structural directives. When the static value is false, angular will find the element after initializing the view.

Support SVG Template

Now, Angular 8 supports the template features with a file extension SVG. So, it means we can use the SVG extension file as a template in place of an HTML file without any extra configuration settings. But a question is why we will use a .svg file as a template instead of using the image in an HTML file. The reason is when we use SVG as a template, then we can use that as a directive and as a result, we can bind it just like HTML templates. With this approach, we can dynamically generate interactive graphics in our Angular applications.

@Component({
   selector: "app-icon",
   templateUrl: "./icon.component.svg",
   styleUrls: ["./icon.component.css"]
})
export class DashboardComponent {...}

PNPM Support

In Angular 8, Angular CLI also supports new package manager PNPM including NPM and Yarn. Also, the command ng add now provides a new flag called - - registry for adding packages from any private NPM registry. This command is already available in the Angular CLI version for the ng update command

Support Codelyzer 5.0

In Angular 8, the default TSLint configuration supports the Codelyzer 5.0 version. In this version of Codelyzer, some rules have been renamed. But when we upgrade the Angular CLI, it will also update the TSLint configuration file. The CLI update schematic will remove the es6 import command from the polyfills.ts file. Because now it is automatically added if it is required by the CLI.

Support for New Builders/Architect API

The new version of the Angular CLI allows us to use the new version of the Builders which is also known as Architect API. Angular used Builders API for performing operations like server, build, test, lint, and e2e. We can use builders in the angular.json file.

"projects": {
  "app-name": {
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser"
      },
      "serve": {
        "builder": "@angular-devkit/build-angular:dev-server"
      },
      "test": {
        "builder": "@angular-devkit/build-angular:karma"
      },
      "lint": {
        "builder": "@angular-devkit/build-angular:tslint"
      },
      "e2e": {
        "builder": "@angular-devkit/build-angular:protractor"
      }
    }
  }
}

How to Upgrade in Angular 8

To upgrade any existing Angular 7 application to Angular 8, we need to perform the below steps,

1. Angular 8 user TypeScript 3.4, so install TypeScript 3.4
2. You need to use Node LTS 10.16 or above version
3. Now execute the upgrade command of Angular CLI -> ng update @angular/cli @angular/core

Or, alternatively, you can check your upgrade process from the below URL links - https://update.angular.io/

Conclusion

In this article, we discuss the new features of Angular 8. We also discussed some breaking changes in Angular 8 means which have been changed compared to the previous version of Angular. Also, we discussed some new features of Angular 8. In the next article, we will discuss how to write a basic Hello World-type application using Angular 8. I hope this article will help you. Any feedback or query related to this article is most welcome.

Next. Learn Angular 8 Step By Step In 10 Days - Day 1