Angular 8: Know What’s New & How to Upgrade
When it comes to the most popular open-source web application frameworks out there, Angular arguably tops the list. Known for its unmatched efficiency, flexibility, and extensibility, this high-performant TypeScript-based framework is quite popular among developers to build single-page web, mobile, and desktop applications and has received numerous updates post its release, each of which has made the framework better and more powerful in one way or another.
As a recent instance, following the release of Angular 7 last year in October, the Angular team is now back again with a brand-new version of the framework, Angular 8!
Unlike the previous version, which was mainly focused on boosting the speed and performance of the framework, Angular 8.0 revolves around reducing the startup time of applications as well as alignment of the platform with the ecosystem and latest web standards. Let’s explore in detail what new and exciting Angular 8.0 brings to developers.
Differential Loading by Default
From version 8.0 onwards, the Angular CLI will produce and label two separate optimized JavaScript bundles by default, which are Modern (ES2015+) and Legacy (ES5). Means, when users load your application, the browser, depending on your application’s requirements, will automatically load the appropriate bundle for them.
Taking advantage of this new feature, the Angular Team has successfully reduced the initial bundle size for modern browsers by around 41Kb.
Consequently, the loading speed and time to interactive (TTI) of applications built with Angular 8 is expected to get dramatically improved on modern browsers!
Learn more about differential loading here.
Route Configurations Now Use Dynamic Imports
Starting Angular 8, the Angular Team will be using the industry standard dynamic imports in place of below custom syntax which was built into the toolchain:
{path: ‘/admin’, loadChildren: ‘./admin/admin.module#AdminModule’}
Therefore it is highly recommended you use the loadChildren key in the $route APIs to lazily load parts of your applications. The new syntax will look like:
{path: /admin, loadChildren: () =>
import(./admin/admin.module).then(m => m.AdminModule)}
Strictly speaking, the use of Dynamic Imports will improve the support from editors such as WebStorm and VSCode and as a result, they will now be able to better understand and validate these imports for you.
Builder and Workspace APIs in the CLI
Taking the Angular CLI to a whole new level in version 8.0, the Angular Core Developers have added two new APIs to the framework: Builder APIs and Workspace APIs.
Where the Builder APIs lets you perform processes like build and deployment using ng build, ng test and ng run, on the other hand, Workspace APIs make reading and modifying the angular.json file (which was introduced in Angular 6) a breeze for developers.
Improved Support for Web Worker
Offloading unnecessary work to a background thread, Web Workers dramatically boost the speed of your application, particularly when it needs to do any kind of CPU intensive computations. Keeping the request of developers from around the globe, the Angular Team now allows you to generate new web workers right from the CLI. To add a web worker to your Angular project, you just need to run the following command:
ng generate webWorker my-worker
Read more about the usage of Web Workers in the Angular CLI here.
Improvements to AngularJS Migration
To make migrating from AngularJS to Angular as painless as possible, the Angular Team has introduced a new module, called LocationUpgradeModule, in version 8.0. This module enables a unified location service to efficiently shift responsibilities from the AngularJS $location service to the Angular Location Service. The main purpose of this improvement is to improve the lives of applications with routing implemented in both versions of Angular.
In addition, Angular Core Developers have also documented lazy loading best practices to make it easier for developers to migrate the most frequently used features first from AngularJS to Angular.
New Deprecation Guide
Keeping their commitment to maintaining Semantic Versioning and providing a high degree of stability across major versions of the framework, the Angular Team offers a new Deprecation Guide in version 8.0, which puts together all the deprecations and removals into one place for the convenience of developers.
For the public API, the Angular Core Developers are committed to providing feature support for N+2 releases. Thus, a feature that is deprecated in Angular 8 will continue to work in the upcoming two releases of the framework i.e. Angular 9 and Angular 10.
Opt-In usage Sharing
To keep their efforts in alignment with the needs of the community, the Angular Team has added an opt-in telemetry in CLI. Using this feature, Angular 8.0 will be able to collect anonymous data from users only if they allow it to. This information will help the Angular Team to understand how developers use version 8.0 so that they could make the platform even better in the future.
That’s all about Angular 8.0! For detailed information and guidance on upgrading your application to version 8, please visit Angular Update Guide. Feel free to contact us if you face any trouble while upgrading or have any query related to Angular website and application development.
