Welcome to Angular 8.0, It was released on May 28, 2019 and open-source web app framework which is widely used by developers across the globe. here is the features, changes, and improvements related to angular 8.
Most prominent features of Angular 8:
- Support TypeScript 3.4
- Lazy loading
- Supports Web Workers
- Differential Loading of Modern JavaScript
- Ivy Rendering Engine
- Router Backwards Compatibility
- Bazel Support
- Opt-In Usage Sharing
- The above features are described as below.
Support TypeScript 3.4:
Faster subsequent builds with the –incremental flag.
TypeScript is a programming language based on JavaScript. It is an amazing factor of Angular to support TypeScript. It’s introduces a new flag called – incremental which tells TypeScript to save information about the project graph from the last compilation. So, next time TypeScript is invoked with -incremental, and it will use that information to catch the least costly way to type-check.
// in the angular root folder tsconfig.json
{
“compilerOptions”: {
“incremental”: true
}
}
Lazy Loading:
It facilitates you to use standard import statement instead of custom string for lazy-loaded modules.
It means previously it is looked like this:
{ path: ‘/student’, loadChildren: ‘./student/student.module#StudentModule’ }
Well be look like this:
{ path: ‘/feature’, loadChildren: () => import(‘./feature/feature.module’).then(s => s.FeatureModule) }
Web Worker:
Angular 8 support for Web Workers. Web workers are essential for improving the speed of your application. Web workers help run scripts in background without interfering with the user interface.
New feature in Angular 8.0 will be improved support for web workers with the Angular CLI. This is done to address the common request from the developers. Web workers help run scripts in background without interfering with the user interface. We can generate web worker using below command.
ng generate web-worker <worker-name>
Differential Loading of Modern JavaScript:
In Angular 8, the team decided to find some new ways to fix and reduce the bundle size and then the concept of differential loading comes into action.
What is happening till angular 7 when we build our apps with “ng build” command, our all the typescript files are converted to js and then the final application bundle is created for all browsers either modern or older one considering the application should run properly of older browser. which results in larger bundle size because all the modern JS/TS code need to be converted in JS which can be easily supported by older browsers.
Now What’s happening in angular 8 when we build an app with “ng build” command.
when we build the project it created two different bundles one is for older browser(marked with red) and another is for browsers that supports modern javascript (marked with blue).
During deployment both the bundles are deployed and when a client opens your web app then based on browser compatibility the JS bundle is loaded.
But the question is how the application knows whether the browser is older or modern?
<script type=”text/javascript” src=”runtime.js”></script>
<script type=”text/javascript” src=”polyfills.js”></script>
<script type=”text/javascript” src=”polyfills-es5.js”></script>
<script type=”text/javascript” src=”styles.js”></script>
<script type=”text/javascript”src=”scripts.js”></script>
<script type=”text/javascript” src=”vendor.js”></script>
<script type=”text/javascript” src=”main.js”></script></body>
from the above image you can easily understand how it is working . when nomodule is true then it will load js for older browser and ignore the next script, otherwise it will load the js for modern browsers.
Ivy Rendering Engine:
Ivy is huge changes Angular history in terms of view engine. It totally changed the way angular framework works internally, without changing the way angular applications are written. We can say that Angular Ivy is the prime feature of Angular 8.
IVY was earlier announced in Google I/O 2018. It was announced and explained by Kara Erickson, who is now leading features of angular.
It is ready for proper use with Angular 8. It is a new compiler of Angular and Angular 8. It is better incremental compilation leading to improved build times.
To use Ivy in your project, you can first instruct the Angular CLI to enable Ivy in your project using the –enable-ivy switch:
ng new angular-project –enable-ivy
Advantages of Angular 8.0 with IVY
- Enable debugging at run-time
- Enhanced payload size
- Smaller builds in size
- Shipping of per-compiled code
- Excellent backwards compatibility
- Quick re-build time
- No requirement of metadata.json
Angular Router Backwards Compatibility:
In the latest version, the backward compatibility feature in Angular router will help you to easily upgrade the path for large Angular projects.
This means the latest version will still work with older versions of the framework, and this will making it smoothly to migrate to the newest version of Angular.
By allowing lazy loading on parts of AngularJS apps using $route APIs, it simplifies the upgrade and transferring of large projects.
Bazel Support:
In Angular 8, Google introduced another build tool called Bazel and it is an open-source programming development tool. With this feature it is the possibility to build your CLI application with Bazel. It is available as opt-in, it is expected to be included in the Angular CLI in Version 9.
This is a tool to build faster time because It is use incremental build and deploy only what has been changed rather than change the entire app.
Bazel key advantages are:
- We will use the same tool to build our backends and frontends.
- By allowing incremental build and tests, thus bringing gains on rebuild times.
- You can eject the Bazel files, they are hidden by default.
Opt-In Usage Sharing:
Opt-In telemetry will be added to the CLI allowing gathering useful data to analyze and possibly apply for the next update.
Opt-in metric will help Angular team to know that how developers are using Angular 8.0 and that they can make it better improve in future.
Conclusion:
In summary, Angular 8.0 is an advanced, modern, and efficient framework to built next generation products. So, if you are thinking to upgrade to the latest Angular version then go ahead. It’s a big YES from our side. No need to have a second thought about it. Rydot Infotech offer cost-effective and custom web development services to cater your software development requirements.
Looking to gain benefits of Angular 8 features? Get in touch with our experts on info@rydotinfotech.com