Unleashing Angular 8

Every version of Angular provides us amazing futures to rapidly build applications and to address the market needs. Considering the changes between Angular 2 vs previous versions every time the angular release happens it is essential for us to know on what is new changes that we can leverage and what are the changes we need to be careful about. I did some digging through the video published by Academind Channel in youtube and also the article that discuss about what is new in angular 8.

While the details have been provided in the article, I am going to focus on what are high level new features that are showing projected revolution in Angular 8 and what will break our code. For details you can refer to the video and article as mentioned above.

Important New Features

Experimental support for Ivy

Ivy is the new internal rendering engine which should shrink the bundle size. It is the part of the framework that will understand your instructions, templates and compiled code and does the required heavy lifting. These engines have been updated in the past also but this time it is complete rewrite. This is experimental and hence you can enable it if required in Angular8. As this is not fully implemented and has some edge cases missing, it is recommended to use this only for demo applications

Experimental support for Bazel

Bazel is a build tool of Google which is open sourced now. Orchestrates the build proacess (webpack) to optimize the build flow and speed. This is not fully finished / tested yet and hence we need to turn this on as optional. In future it is expected to be used by CLI automatically and will result in faster development process by reducing rebuild time and CI/CD pipeline lead times.

Differential Loading

The angular version has the capability Automatic creates multiple production bundles for modern and legacy browsers. It leverages the modern browsers capability and creates smaller bundles. We are expected still to deploy the entire dist folder content and once user visits the page, it automatically detects and loads the right bundle and scripts. It is expected to reduce size of code bundles by 7% to 20% with zero code changes.

Breaking Changes that need attention

1. @angular/http is no longer supported from Angular 8. It has been deprecated in Angular 4. Migrate this to @angular/common/http.
2. Release candidate rc5 of angular 8, @ViewChild & @ContentChild needs a second argument which needs to be false. You need to set this to true if you need to access the fetched value in ngOnInit. You can read more about angular.io has article on static query migration guide FAQ.
3. The DOCUMENT token moved from @angular/platform-browser to @angular/common.
4. The @angular/platform-webworker package enabled running your Angular application in a Web Worker. As this proved trickier than expected (for building the application, SEO…), and not that good performance-wise, the package has been deprecated and will be removed in the future.

What is in store for Angular 9+

1. Stable Support for Bazel --> Fully usable as part of CLI
2. Stable Support for Ivy ==> Default view engine
3. Future Ivy API ==> Might have some changes in way we write code. But will have backward compatibility.
4. Alternative Bootstrap API
5. No modules, no Zone.Js
6. Change detection to be done differently.
7. Drastically smaller bundles (~70% to 90% smaller of existing builds)