Angular 8.0 is Here… How to Upgrade? Features to Watch Out For
“Every new update in technology brings about new features and upgradation challenges…We will deal with this topic today!”
AngularJS developers were highly curious about the next update of Angular which was expected to happen between March and April of the current year. It was estimated to make huge strides in AngularJS mobile app development process. The wait is finally over as it finally happened in May 2019. Yes, this write-up is all about the brand new Angular 8.0 which has finally happened big time for Angular developers. The good news is, Angular developers are going to love it.
Developers are already quite excited about Ivy – the much-anticipated, third-generation renderer on top of other features like CLI APIs, web worker support, differential loading, and much more.
With this major release, we will see a transformation in the entire platform which will be aligned with the ecosystem. The amazing fact is, it encompasses the framework on top of Angular Material. It also enhances the application loading speed on 21st-century browsers.
Since it comes in the form of smaller bundles and higher order components, AngularJS developers can expect better debugging and swifter compilations. You can do all this without the requirement to repeat the codes.
In the forthcoming sections of this write-up, we have provided comprehensive information pertaining to Angular 8.0 features and steps to upgrade from Angular 7.0 to Angular 8.0. We promise after reading this content piece, you will have a better understanding of Angular 8.0 which will help you in utilizing the AngularJS Mobile App Development process in a much better process while developing innovative mobile apps.
Without much ado, let’s get started with the features that are present in Angular 8.
Differential Loading by Default
The good news for developers is that starting with this update Angular will now be employed on two different browsers with different bundles by default. Thanks to CLI extension, it will become easier to execute different bundles for old legacy (ES5) browsers along with state-of-the-art JavaScript (ES2015+) browsers. It is popularly known as differential loading. Why? Because it helps browsers to opt for optimized or legacy bundles that are totally dependent on their capabilities to lead the correct one automatically. This way the users will also be able to receive the bundle required by them.
This way this will automatically speed up the application with the help of modern syntax which would have a positive effect on the build process. This will result in the loading speed of modern browsers to increase tremendously. The Time to Interact will also become swifter. You can always count on the 21st-century browsers to provide differential loading that can save a maximum between 7 to 20% in bundle size on an average.
A prime example of that is, Manfred Steyer’s project ngx-build-modern. In this project, due to the effect of differential loading in Angular 8.0 there has been a drastic improvement in the performance without any special action. The ng build command along with the prod extension is more than enough for comprehensive bundling.
Let’s look at the process in detail.
Right now when you employ ng update, Angular updates the tsconfig.json. Once the process gets over, the CLI observes the target JS level to take a final call whether differential loading needs to be opted or not.
Now, a target set is set to es2015 and two bundles are labeled and created. It is possible to select the right bundle this way:
<script type="module" src="…"> // Modern JS <script nomodule src="…"> // Legacy JS
While runtime, modern JavaScript browsers will be able to ascertain a module type in the script tag of HTML and discard any nomodule attribute. This is the best way to load only the bundle on modern browsers. In case, if you have an older legacy browser, it is possible to interpret nomodule type and overlook any module attribute. This is the best way to only load legacy buncles.
Lazy Loading with Dynamic Imports
Lazy loading was transformed into a toolchain since Angular came into existence. The same thing can be done with the help of the loadChildren key in the route configuration.
Till now, this is how it used to look:
{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}
But, in the recent update in Angular 8.0, the custom string has been removed and instead of that it has now integrated industry-standard dynamic import syntax.
Once you upgrade to Angular 8.0, a lazy loaded import will look like this:
{ path: `/cart`, loadChildren: () => import(`./cart/cart.module`).then(m => m.CartModule) }
This syntax change will automatically work for you, albeit you have employed the ng upgrade command for your app. This enhancement will have a great impact on the support from the editors VSCode and WebStorm. These two will be able to determine and authenticate imports. Along with this, TypeScript and linters will be able to find out any missing or misspelled modules properly.
Enhanced Support for Web Worker Bundling
If you are running CPU-intensive tasks, the best workaround to quicken up the application and enhance their parallelizability is by using web workers. With the help of web workers, it is possible to write code off the main thread and offload tasks to a distinct background thread.
But, there is a problem here. The code that is running in the web worker does not have to be present in the same JavaScript file in an application. The two need to be different. Developers who are using Angular CLI often get frustrated due to the fact that the CLI bundles JavaScript instantly into as few files as possible.
Now, with the introduction of Angular 8.0, it is possible for the developers to fully parallelized web worker bundling without the mentioned discomfort. This is where the front-end developers will breathe a sigh of relief. Why? Because they had to struggle a lot earlier due to single thread limitations.
In order to execute a new web worker from CLI and integrate it to your project run this command:
ng generate webWorker my-worker
Once you get your web worker, execute it in your application by replicating the same process. This way the CLI will bundle and code split as per the requirement. Let’s look at the code given below.
const worker = new Worker(`./my-worker.worker`, { type: `module` });
Opt-In Usage Sharing
This is another additional to Angular CLI that has been integrated simply to align Angular 8 with the community needs. Thanks to this feature, the open-source web application framework that will enable you to collect anonymous data only.
With the help of details like commands utilized and build speed, it will become easier to keep a tap at how the developers employ the platform and the way more improvements can be brought about. This is also a lucrative option available to you to share telemetry about CLI usage with your developer team.
Angular has given more emphasis to giving consent about data sharing which can assist the development team to be improved. It has been observed that most of the platforms accumulate data as a default mechanism on an opt-out basis and stop only when you command them not to. Others do not enable you to inquire whether to stop sharing telemetry. But, there is a correct way to do it which Angular 8.0 has already found.
Support for TypeScript 3.4
Angular 8.0 has opened doors for TypeScript 3.4 by mandating it. In other words, you need to update your TypeScript version as soon as possible. This new update is a great manner to synchronize it with the prevailing ecosystem. Although this might seem to be a small improvement, it has greater benefits in terms of generating clean, readable JavaScript codes.
Dart-sass for Sass Files
Angular CLI has gone for dart-sass instead of node-sass which will assist in creating your Sass file. The amazing thing that it would be substituting Ruby – the legend. Dart is considered to be super swift to the point of notoriety.
The produced Sass files will remain unchanged. Chances are the compiler might become a bit strict. Coupled this with the fibers, the speed would double. This was all a possibility.
But, with Dart becoming default has garnered quite a change. It is still possible for you to use node-sass if you do install it precisely.
Builder APIs and Workspace APIs in the CLI
The new Builder APIs will ensure that you are able to tap into ng build, ng test, and ng run just like Schematics help you to tap into ng new, ng generate, ng add, and ng update. Using this information, you will be able to perform processes, including build and deployment by utilizing third-party libraries and tools.
Apart from this, Angular is also planning to leverage the cloud for APIs. AngularFire’s introduction has eased off the burden of developers. How? By adding a deploy command, which suggests the process of build & deploy to Firebase.
ng add @angular/fire ng run my-app:deploy
In addition to this, changes in angular.json in Schematics needed to be done which required wholesale changes to the workspace configuration manually. But, with the introduction of Angular 8.0, there is a new API which has come up which will make it effortless to alter and read the file.
Changes in ViewChild and ContentChild
Earlier, ViewChild and ContentChild were considered to be two unpleasant, inconsistent things. They were executed in such a way that the components could request elements that were not in a structural directive like golf or ngFor.
It was possible to arrive at the solution of the query with the help of ngOnInit. Alternatively, it was also possible to access with the help of program code in ngAfterViewInit or ngAfterContentInit.
Along with this, the elements that were loaded later into the DOM as a result of data binding, there was a need to put a code in either ngAfterViewChecked or ngAfterContentChecked. All these things led to lots of confusion.
With the introduction of Angular 8.0, the components have to enumerate specifically when a resolution has to take place. There are two scenarios:
@ViewChild('info', { static: true }) paragraph: ElementRef;
In case the static value is true, Angular will be able to find out the element which is lying outside the structural directive while initializing the component.
@ViewChild('info', { static: false }) paragraph: ElementRef;
In case the static value is false, the view will get restored or commenced first. Then the resolution refreshes or is initiated. This is where the ng update command will automatically get depicted. Alternatively, if it fails, add a comment with a TODO.
Over and above, the queries with ViewChildren and ContentChildren will not get affected and remain dynamic.
Enhancements in AngularJS Migration
Developers who are using the $location service will enjoy this new Angular update. Why? Because Angular now allows a LocationUpgradeModule in AngularJS applications which translates to a unified location service.
With the help of a unified location service, it becomes easier to shift the responsibilities from AngularJS $location to Angular Location. This way it will become easier for applications with hybrid operations that are contingent on ngUpgrade and route in AngularJS and Angular part.
The Introduction of Bazel
With the help of Angular 8.0, it could be possible to build a CLI application more effortlessly. How? With the help of Basel, a tool that has been developed and utilized by Google. The amazing part about this tool is, it can function with almost any language input.
It would not be wrong to say that the entire Angular framework is Bazel-born. Let’s now divert our attention to some of its benefits:
- It is possible for AngularJS developers to employ the same tool for developing backends and frontends.
- There is a huge probability for developers to get remote builds and cache on the build farm.
- It allows you to declare tasks with a crystal clear input and output which runs only the most significant ones.
- It enables incremental builds and tests. This way it is possible to gain on rebuild times.
Ivy
Ivy is one of the biggest and core attractions in Angular 8.0. Kara Erickson announced it in Google I/O 2018. She is now part of Angular. Since that time, it has been the main feature that developers were waiting for.
If we talk in layman’s language, it is nothing but a brand-new compiler that assists in developing a next-gen rendering pipeline for the most up-to-date Angular version. This way it delivers more efficient results. It is also able to execute smaller bundles that assist in simplifying incremental compiling resulting in improved runtime speed.
In technical terms, it makes the maximum utilization of incremental DOM where each component gets compiled with instructions. This way it contributes to the DOM tree.
There are two main concepts in Ivy. They are
- Tree shakable
- Local
Let’s look at both of them in detail.
Tree shakable
It gets rid of unused code. This way the application is able to devote its time completely on the code it is executing. This way it is possible to get a smaller bundle and quicker runtime.
Local
Under this concept, only those components that are altered are compiled. This way it is possible to get swifter compiling.
So, whenever there is any change in the data, it will automatically update. So, in case, you consider the UI of your application is important, it is time to get excited about Ivy.
Let’s look at some of the benefits of Angular 8 Ivy
- Dismissal of metadata.json;
- Enhanced template type checking;
- Extensive compatibility with prevailing Angular applications;
- Increased backward compatibility;
- Introduction to metaprogramming;
- Pre-compiled code shipment;
- Quicker rebuild times;
- Reduced payload size;
- Tiny bundles.
At present, Ivy is integrated in Angular 8.0 only as an opt-in preview for testing. It is possible for Angular developers to experiment with it. This way they will be able to find out the true potential and performance of their Angular application. Once that is done, it will make such applications uncomplicated, compact, and brisk than ever before.
All of this is possible without making any changes in the existing application. Isn’t it amazing? All in all, Ivy is the future of development that can give new wings to the Angular world.
Now, that you have looked at the new features in Android 8.0, it is time to look at the various steps to update from Angular 7 to Angular 8.
Upgrade from Angular 7 to Angular 8
It is extremely easy to update from Angular 7 to Angular 8. This is especially true if you are employing HttpClient and have already upgraded to RxJS 6.
If you run this single command it will automatically migrate the lazy loaded route imports to the new import syntax:
ng update @angular/cli @angular/core
While upgrading to Angular 8.0, keep these things in mind:
There are chances of syntax errors coming up as a result of TypeScript 3.4. This might lead to several issues that did not occur previously. Utilize Node.js version 12 or later without any delay.
If you wish to learn about the Node version that you are currently employing, use the following command:
$ node -v
If you are using an older one, it is better to update it at the earliest.
In order to update Angular Material in your application, run this command:
$ ng update @angular/material
In case, you are employing a version that is earlier than Angular 7, click here to get the instructions from the official guide for the Angular upgrade.
Parting Thoughts
All in all, Angular 8.0 will make the lives of AngularJS developers smooth. Although apart from Ivy there is nothing much to talk about. But, in case, you are wondering if you need to upgrade to Angular 8.0, the answer is undoubtedly a big YES! Since there are far lesser changes, the prevailing applications will work wonderfully well without any real modification. Along with this, it is possible for the developers to get performance gains by employing differential loading and planning to execute your applications for Ivy. In the near future, there are chances that Ivy will become a default feature in Angular 9 or Angular 10. To make the most of Angular 8, avail the services of a reputed AngularJS mobile app development company.
