What’s new in Angular 8

Angular is one of the most popular and awesome Javascript frameworks for Web and Mobile Application development. And now Angular has finally released it’s latest "Angular 8" on 23-May-2019. This release of Angular is packed up with many attractive features that made Angular 8 unique compared to its previous versions.

Angular first version was launched in 2009 & it is known as AngularJS or Angular 1. For small applications, it was working well but for large applications, Angular 1 was not a complete fit framework because of its large bundle size, complicated debugging, dependency injection stops to work after minification of code, performance issues, and other technical problems.

Let’s see Top features of Angular 8 👏👏👏

• Differential loading
• Supports TypeScript 3.4
• Dynamic imports for lazy-loaded modules
• Improved Web Worker Bundling
• Support Bazel
• Support IVY
• Angular CLI improvements
• $location service
• Angular Firebase
  
  
  

✔ Differential loading

Differential loading is a new feature that has been introduced in the Angular 8 Version. Angular 8 apps will now be more performant because it creates different production bundles of your application, one for modern browsers and the second is for legacy browsers. Thanks to differential loading.

New browsers will request a bundle that uses ES2015 JavaScript syntax and will be smaller in size than the legacy bundle that uses ES5 syntax to maintain support for older browsers.

Angular CLI generally translates code into two things: modern syntax and polyfills. The newer browser that supports ES2015 syntax use code as it is with lesser polyfills. On other hand, for legacy browser, it needs transpile code and more polyfills to make it works on all older browsers.

So New Question is How the Browser come to know that which compiled JS file has to execute?

Modern browsers have the ability to recognize a "module type" in the script HTML tag < type=”module” > and to ignore a nomodule attribute. So when a new browser runs (like a new version of Chrome or Firefox etc), it loads only appModernBundle.js file.

<script src="appModernBundle.js" type="module"></script>
<script src="appLegacyBundle.js" nomodule></script>

Some of its features are mentioned below:

It creates optimized and smaller bundles for modern browsers.
It creates separate legacy bundles for older browsers.
It also ensures that the browser loads the right set of bundles by using module type attribute and noModule attribute.

Learn more on Differential Loading here:
https://auth0.com/blog/angular-8-differential-loading/

✔ Supports TypeScript 3.4

Angular 8 support Typesciprt updated version 3.4

✔ Dynamic imports for lazy-loaded modules

Lazy loading is a design pattern or a technique that says load a resource (it may be a CSS file, script file, components or images, etc..) when it actually needs. Angular uses lazy loading in the previous version as well but with Angular 8, the framework has adopted the more common dynamic import syntax used widely in client-side web development.

Lazy loading helps the application in initial loading on the browser because it loads the module when that particular router activated.

Below is the way to load the module before angular 8.

const routes: Routes = [
  {
    path: 'home',
    loadChildren: './components/home/home.module#HomeModule'
  },
];

So why Dynamic imports are required?

In previous angular versions, the route configuration uses the property @loadChildren (as above shown) which accepts a string and if we pass here incorrect or 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.

const routes: Routes = [
    {
    path: 'home',
    loadChildren: () => import('./components/home/home.module').then(module => module.HomeModule)
  },
];

✔ Improved Web Worker Bundling

Web worker is a design pattern or a technique to execute a script or long-running script into a separate thread and leave the main thread for free UI rendering. Code executed by a worker runs in a different context while other JS code or UI part runs on the main thread.

We have some limitations working with web workers is that When we run code in a worker we can’t manipulate DOM elements, use window objects, etc.

The context in which workers run is called DedicatedWorkerGlobalScope , and is quite limited in terms of what you can access and generally do.

Now Angular 8 provides a CLI command to add a new Web Worker, we can simply go to our project folder and execute the following command:

ng generate web-worker <componentName>

ng generate web-worker ComputationComponent

------Below are files whicha added or updated when add web worker -------

D:\WORK\my-ang-app\src\app\components\employee>ng g web-worker employee
CREATE tsconfig.worker.json (289 bytes)
CREATE src/app/components/employee/employee.worker.ts (157 bytes)
UPDATE angular.json (5306 bytes)
UPDATE src/app/components/employee/employee.component.ts (673 bytes)

Learn more about DedicatedWorkerGlobalScope
https://developer.mozilla.org/en-US/docs/Web/API/DedicatedWorkerGlobalScope

How to add web worker in Angular 8 – read this article.
https://www.grapecity.com/blogs/speed-up-angular-apps-with-web-workers

Before Angular 8 – How to setup web worker in angular
https://blog.logrocket.com/how-to-execute-a-function-with-a-web-worker-on-a-different-thread-in-angular/

✔ Support Bazel (as an Opt-in)

Bazel support in Angular 8 is optimized and speed up feature to build your CLI application with the Bazel tool. The Angular framework itself is built with Bazel. For now, It is available as an opt-in, it is expected to be included in @angular/cli in Version 9.

Bazel is an open-source build and test tool (developed by Google) similar to Make, Maven, and Gradle. It uses a human-readable, high-level build language. Bazel supports projects in multiple languages and builds outputs for multiple platforms. The Angular team is working to integrate Bazel into the standard Angular toolset for faster incremental builds on large projects.

Learn more on Bazel:
https://docs.bazel.build/versions/4.0.0/bazel-overview.html

✔ Support IVY (as an Opt-in)

Ivy is the code name for Angular's next-generation compilation and rendering pipeline. In Angular 8, It is introduced as an opt-in, so If you want to experience its advanced feature in Angular 8, you can enable its setting in the agular.json file. With the version 9 release of Angular, the new compiler and runtime instructions are used by default instead of the older compiler and runtime, known as View Engine.

IVY Great Features:

✋ Application bundle in a smaller size

With this new compiler, bundle size is reduced by about 40%. This drop-in bundle size improves the overall performance of the apps you build.

✋ Testing (Unit testing)- TestBed Enhancements

With IVY, TestBed has been more optimized and revamped and now is more powerful. Rather than compiling every time all components during each test cycle, the TestBed in Ivy avoids recompilation between tests unless a component has been manually overridden.

✋ Debugging Tool

Now "ng" is a global object and we can simply access it on the console. With this, we can directly access components, directives, and templates on the console for debugging purposes.

✋ Lazy load of a component instead of a module

In Ivy, we can lazy load any component and dynamically rendered it. Components can be lazy-loaded and rendered without Angular modules or routing.

✋ AOT as a default Compiler

JIT was the default compiler till now and in angular 8 as well because AOT has slow processing. Now in Ivy AOT is the default compiler. The angular team did huge improvements in build and rebuild times. We can see AOT as the default compiler in ANgular version 9.

Read more details here:
https://www.neoito.com/blog/top-6-advantages-of-the-angular-9-ivy-compiler-2/

✔ Angular CLI improvements

The Angular CLI is continuously improving, and now the commands ng-build, ng-test, and ng-run are equipped to be extended by 3rd-party libraries and tools (an example is AngularFire).

✔ Location service

A new package angular/common/upgrade is added for upgrading from the $location service provided in AngularJS to Angular’s unified location service.
https://angular.io/api/common/upgrade

✔ Angular Firebase

Now Angular 8 provides a way (with CLI commands) to deploy an Angular app to Firebase Cloud hosting. Deploying an Angular app to Firebase is very easy, and it doesn’t take too much time. It offers a free plan to host your initial app to their server without register any card.

ng run [PROJECT_NAME]:deploy

What’s new in Angular 9 | Top updates in Angular 9 By JS mount

VS Code Useful Extensions for Web Development

What’s new in Angular 8