Table of Contents
Latest Angular 8 release date was announced in Annual Angular Conference within May 13-15, 2019 | London, this periodic release has spanned entire platform including the framework, Angular material (UI component library) and the CLI (Command Line Interface) synchronized major versions. This latest release also brings an extensive list of bug fixes and some important build changes. Are you eager to have a sneak peek at most interesting changes?
We have been using popular Angularjs frameworks including Lumx, Ionic, Supersonic, Mean.IO, Angular UI Grid, Angular Foundation, Videogular, Protractor, Suave UI, Supersonic, Mobile Angular UI, etc. This announcement includes all updates included in the Angular 7.0 and earlier AngularJS versions, Angular Material, CLI and features with improved support inclusion of IVY engine. This has increased its compile-time three times.
Angular 8.0 is the first major release from Google in the year 2019, focusing primarily on tool-chain, thus making it easier for users to create different types of application along with performance improvements. Besides this release as well confirms that Angular 8.0 is lightweight, faster and easier. It supports TypeScript version 3.4, making it easy to code with faster subsequent build with incremental flag. Moreover, Angular 8.0 improves application startup time on modern browsers, provides new API’s for tapping into the CLI and aligns Angular to the ecosystem and further web standards.
Rendering Pipeline in Angular before 8.0
Rendering Pipeline in Angular Ivy
It is one of the most important and expected features of Angular 8.0, known as IVY render engine. It is a compiler for Angular as well as a tool that acts as a new rendering pipeline. It generates small bundles, comes with incremental compilation feature. Google recommends not to make use of the preview version of Ivy for production as it was mainly published for feedback.
What’s new in Ivy?
Angular Ivy is an initiative to build a next-generation rendering pipeline for Angular.
Two Key Concepts of Ivy
Features that will be available in the Ivy preview:
The impressive benefits of Ivy
TypeScript must be upgraded to 3.4 or above in order to use Angular 8.
Router mechanism in Angular always supported lazy loading. But it is now accomplished by the string value of the loading module as:
In above code excerpt, the value up to the # is the path of the module file in which the target component exists and the value thereafter represents the class name of the module. Although this type still works in Angular 8 there is a slight change in the lazy module this time: Deprecating the string value of the loadchildren due to the support of ECMAScript. So, now loadchildren will be represented like this:
JavaScript works in a single-threaded manner. It is important to perform any huge data call or any consecutive Rest API call in an asynchronous manner. As this concept is no more supported, therefore modern web browsers support the web worker process. And as web worker process is a script that runs in a separate thread, therefore all communication with that thread in the browser tab will be done by sending messages. These scripts are particularly required during the build process of the application. This process must continue even after the application is deployed. Therefore, one single bundle for every web worker is required and this task is performed by the Angular CLI.
Developers can configure their Angular CLI project if a web worker is added for the first time. CLI excludes the worker.ts files from the tsconfig.json files, add a new TypeScript configuration file named tsconfig.worker.json which handles the worker.ts file. This information is added in Angular.json file.
Like cookie settings, Angular 8.0 has Angular CLI that collects usage analytics data which enables Angular team to customize features and make personalized improvements. CLI projects must be updated globally to collect data like command used, the flag used, execution time, operating system, CPU count, node version, RAM size, error and crash reports, etc.
Bazel is an opt-in option in Angular version 8.0 and is as well expected to be included in the Angular CLI in version 9. It provides fast build time, applications can be built as an incremental build and deploy the recent changes only, rather than the entire app. Bazel file can be ejected in Angular 8 which is normally hidden.
Angular CLI 8 is lightweight and smaller in size. Therefore it leads to high performance and specifies the browser that is to be targeted and the required JS bundles with related polyfills within the application. Es2015 is the default target browser within the tsconfig.json file. A CLI build application supports ES6 features but if the same application is to be executed on IE9, then the developer needs to specify the browserlist file.
Angular has stopped the supporting @angular/http from version 8.0. Therefore, developers need to make adjustment in their code to use @angular/common/http in place of @angular/http.
Angular 8.0 mandates it to provide a Boolean static flag to define the instance of a ViewChild and ContentChild. These instances are available in ngOnInit, but at other times these are not visible until ngAfterContentInit or ngAfterViewInit. This increases the complexity, as the elements will be loaded into the DOM in ngAfterViewInit or ngAfterContentInit. In Angular 8.0, there is a need to specify each component at the time of resolution:
If the static value is true, angular will try to find the element at the time of component initialization i.e. ngOninit.
Angular 8 supports the template features with a file extension SVG. This SVG extension file can be used as a template in place of HTML file without any extra configuration settings. This also acts as a directive and as a result and can be bound in the same way as HTML templates. Interactive graphics can be generated in Angular Applications with this approach.
PNPM is a new package manager that comes along with Angular 8.0 and also includes NPM and Yarn. A new flag by the name of “registry for adding packages” comes along in the command ng.
Certain rules have been renamed in this version of Codelyzer. When Angular CLI is upgraded, TSLint configuration file is upgraded simultaneously. This update removes the es6 imports command from a polyfills.ts file, as now it is automatically added.
The new version of Angular CLI makes use of Builders, also known as Architect API. These are used to perform operations like server, build, test, lint, and e2e. An example of using builders in the angular.json file.
Upgrading the current version of Angular is easy. Follow these steps:
Alternatively, visit update.angular.io for more details. AngularJS developers can as well make use of the following command: ng update @angular/cli @angular/core
Angular 8 is live and it brings impressive features along with a lot of bug fixes. It’s time to pop the champagne as the much-anticipated Ivy compiler is finally here as an opt-in feature! Google adopted incremental DOM instead of virtual DOM in Angular as the Google team wanted the application to perform well on mobile devices, thus optimizing two things: The bundle size and the memory footprint.
Angular has been recognized as a favored JavaScript framework since long. The contrast angular vs. react has been drastic and has helped developers in aligning their development efforts for front-end development. While Angular is considered an efficient JS framework for front-end development, it is as well suitable for quick development. It has a clean code, is highly performant, handles errors well, updates seamlessly and has updated Angular CLI. Another way around, React JS framework is flexible, simple, gives better user experience, is speedy, is easily testable, and provides code stability.
AngularJS development companies have harnessed the potential of the Angular CLI, NativeScript, and Schematics to convert existing Angular web apps to web and mobile apps. Building and maintaining apps have never been easier or faster. Speak with our experts to know the biggest problems and finest strengths of Angular that makes it evolve in the coming years. Contact us now!
Manish Jain is the co-founder and Managing Director at Konstant Infosolutions. He is responsible for the overall operations of the company and has played a major role in bringing Konstant up from its humble beginnings and, with his immense energy and drive, transforming it into a globally trusted name in IT solutions.
Or send us an email at: [email protected]
