Angular 8.0: Upgrade & Key Features
Google continues to develop Angular which led to the creation of numerous versions in a period of five years. With its rapid growth, the latest version has become one of the most widely used frameworks with over a million developers using it.
Angular 8.0 has been released! This is a major release spanning the entire platform, such as framework, Angular Material, and the CLI with major versions. This release improves application start up time on modern browsers, provides new APIs for tapping into the CLI, and aligns Angular to the ecosystem and more web standards.
Some of its features are mentioned below
- Create optimized bundles for modern browsers.
- Create legacy bundles for older browsers.
- Ensure that the browser loads the right set of bundles.
- Automate the process by facilitating a CLI extension.
Opt-In usage sharing:
To keep their efforts in alignment with the community’s needs, Angular 8.0 will add opt-in telemetry in CLI. With this, Angular 8.0 will start gathering anonymous data like commands used and the build speed but only if you allow them to. This information will help them to know that how developers use Angular 8.0, so that they can make it better in future.
Improved Web Worker Bundling:
Web workers are included while building the production bundles which are important for improving the parallelizability and helps increase the performance.
Angular 8.0 is thus adding building support to CLI which provides one bundle for every web worker.
One of the new features of Angular 8 is the possibility to build your CLI application with Bazel. The Angular framework itself is built with Bazel.
Features of Bazel:
- We will be able to build our backends and frontends with the same tool
- Faster build time the first build will be painfully slow, as Bazel is aiming for exactly reproducible builds but concurrent builds will be a lot faster & it will be beneficial if your app uses several modules and libraries.
- Incremental Build: Codebase will only trigger the smallest rebuild possible help to build and deploy only what has changed rather than the entire App.
- You can eject the Bazel files, they are hidden by default.
- The possibility to have remote builds (with cache) on a build farm
Lazy loading is based on the thoughts of Angular Routing as it helps bring down the size of large files by lazily loading the files that are required. In previous angular versions, the route configuration uses the property @loadChildren which accepts a string and if there was a wrong module name or any typo while writing the code, Angular would not consider it wrong and accept whatever value was there as a string until we try building it.
So to overcome that they have added support for dynamic imports in router configuration in latest Angular 8 which enable the use of import statement for lazy loading the module and this will be understood by the IDEs, webpack etc.
Now Editor will understand what this syntax is and will recognize if there is some mistake and we won’t have to wait till build time to realize about an error.
Angular 8 onwards, this support is not available further. So, we need to make adjustment in our code to use @angular/common/http in place of @angular/http.
Angular router backwards compatibility
With Angular 8, the upgradation of large applications will be simpler as they are adding the backwards compatibility mode.
It will make easier for the teams to move to Angular by allowing lazy loading of AngularJS app’s parts using the $route APIs.
As normal, they are updating all the dependencies on tools such as: RxJS, TypeScript, and Node to keep it synchronized with the rest of the ecosystem.
Support for typeScript 3.4
Angular 8 has authorized the use of Typescript 3.4 with its introduction itself. Thus, making it compulsory for you to update the TypeScript version without any fail.
Angular ships with a service worker implementation starting with version 5. With the Angular Service Worker and the Angular CLI built-in PWA support angular developers can take advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs and can achieve native-like application download and Installation.
Ivy Rendering Engine:
The most important features of Angular 8 are IVY render engine.
- Google introduced a preview version of Ivy with the objective to receive feedback from the Angular Developer community related to Ivy. It is currently in the production environment right now.
- Ivy is the new and latest Angular Compiler as well as a tool serving as a new rendering pipeline.
- Generates significantly small bundles and can perform incremental compilation in simple manner.
- Ivy forms the foundation of future innovations in the Angular world.
- Many sections in the Angular have been changed, after switching to Ivy, the existing application will just work same as earlier. But this will help reduce the size of the bundles.
How to update to version 8?
Visit update.angular.io for detailed information and guidance. For most developers, one command should take care of this update:
“ ng update @angular/cli @angular/core “
Below are the few things which one must consider while updating to Angular 8:
- There’s a possibility of Syntax errors emerging because of the presence of the TypeScript 3.4. This might cause some issues.
- You have to use the version 12 of Node.js or later for the upgradation. You can run the $ node-vcommand to check which version of Node you’re currently using.
- You would also need to update the Angular Material in the application by running the command: $ ng update @angular/material.
If you want to answer of whether you should upgrade to Angular 8.0 or not, then our answer is “yes” without any second thought. With Angular 8.0, you can enjoy applications of Ivy along with performance gains with differential loading.