What’s new in Angular 8.0?

Angular 8 is the first major release from Google in the year 2019. It has focused on the toolchain and also making Angular easier for users for different applications development with performance improvements. But this, major version release also contains some new features and upgradation with respect to the previous versions. New Angular version is much lighter, faster and easier. Angular 8 supports the TypeScript version 3.4. So, using the new TypeScript version, it is easy to code with faster subsequent build with the incremental flag, type checking for globalThis, and generic type arguments. With the new release now available, it’s important to understand what has changed so you’ll know how to approach Angular 8. 

Angular 8.0

New features of Angular 8-

1. Angular Ivy-

If you’re not familiar with Ivy, is it something you should think about? If the case is that, user experience of your apps is significant for you, then Ivy is definitely something you should think about. In spite of the fact that the system has made huge upgrades in file size and runtime speed since the times of Angular 2, Angular applications frequently will in general be on the substantial side with regards to file size and memory use.

Compared with the current Angular View Engine, Ivy provides the following benefits:

  • The code generated by the Angular compiler is now much simple to read and understand.
  • Rebuild times are significantly faster
  • Decreased payload size, so it will take browsers less time to download and parse your applications.
  • Better template type checking, so you can catch more errors at build time and prevent your users from encountering them at runtime

Over this, Angular Ivy aims to be broadly compatible with existing Angular applications, so preferably, you’ll have the option to get the majority of Ivy’s advantages without changing your applications at all. There will be some bugs and hiccups, however. So it’ll be helpful to develop your current Angular apps using Angular 8 and Ivy. There are some areas where Ivy is lacking—in particular, internationalization and Angular Universal support aren’t yet fully compatible. So if your Angular app supports multiple languages and additionally uses server-side rendering, don’t expect it to be ready to work with Ivy just yet.

2. Web Worker support-

As we all know that JavaScript executes in a single-threaded manner. So, to perform any huge data call or any consecutive Rest API call in an asynchronous manner is essential. But, in real application based scenario, this concept will not help us. This is because today all the web browser support the web worker process. Basically, the web worker process is the scripts executed by the browser in a separate thread. Communication with that thread in the browser tab will be carried out by sending messages. So, in general, web worker is not related to Angular from any point-of-view. But, the main point is that these scripts should be considered in the build process of the application. So, that after deployment of application the same process can be performed continuously. Hence, the main objective is to provide one single bundle for every web worker. Now, in Angular 8 this task can be performed by the Angular CLI.

Also, we can configure our Angular CLI project if we add the web worker for the first time. In this process, CLI will exclude the worker.ts files from the tsconfig.json files and also, add a new TypeScript configuration file named tsconfig.worker.json which handles the worker.ts file. Also, this information also added to the angular.json file as

“webWorkerTsConfig”: “tsconfig.worker.json” 

3. Support for typescript-

Finally, Angular 8 is updates to the latest and greatest versions of Angular’s dependencies, which include tools like RxJS and TypeScript. In spite of the fact that this might seem like a small improvement, it’s also an appreciated one. Keeping up with TypeScript, in particular, is great because the TypeScript team consistently appears to pack useful new features into every release. In spite of the fact that there’s nothing preventing you from manually upgrade to the latest version of TypeScript in your projects, it’s great to see that the Angular team is keeping up with everything that TypeScript has to offer and that new apps generated via the Angular CLI will also use the newest version of TypeScript by default.

4. Bazel support- 

In new version of Angular, Google introduced another build tool called Bazel. In reality, it is not a new tool. Google used this tool internally since a long time but now, they released this tool as open source. But Bazel is not totally ready in Angular 8. It is introduced as pick in choice with Angular 8 and is expected to be included in the Angular CLI in version 9. 

Benefits of using Bazel-

  1. It will provide a faster build time. Generally, It takes time for the first build but taking less time from the concurrent builds. 
  2. Using this tool, we can develop the application as an incremental build and deploy only what has been changed rather than the entire app.
  3. We can eject the Bazel file which is normally hidden.

We can add Bazel Support using the below Angular CLI Command,

ng add @angular/bazel

Also, we can create a new app with Bazel with the help of below command,

npm install -g @angular/bazel  

ng new my-app –collection=@angular/bazel  

5. Differential Loading for performance optimization-

It is one of the best new features in the Angular CLI 8. Because with the assistance of these features, we will determine which browser we will target and the CLI will build the application with related necessary JS bundles with the necessary polyfills. The default target browser in the tsconfig.json file is now es2015. This means that when CLI build the application, it will build for the modern browser that supports ES6 features. But, we have to run the application in an older browser like IE9, then we have to specify it in the browser list file. This file exists in the root folder of the CLI project. Previously, it is used for the CSS part only. Now, it can be used for JS generation.

6. Changes in Lazy Loading in Route-

In Angular from the starting, the router mechanism always supports the concept of lazy loading. Till Angular 7, it was done by the string value of the loading module as below,

{  

   path: ‘lazy’,  

   loadChildren: () => ‘./admin/admin.module#AdminModule’  

The value up to the #(hash) sign represents the path of the module file. In this the target component exists and the value after the hash sign represent the class name of that module. This style will continuously work in Angular 8. Only the way of writing lazy module has been changed. The string value of the loadchildren has been deprecated because of the support of ECMAScript and Ivy will only support this. So, now the loadchildren declaration will be like this,

{  

   path: ‘lazy’,  

   loadChildren: () => import(‘./admin/admin.module’).then(m => m.AdminModule)  

}  

7. Use Analytics Data-

In Angular 8, Angular CLI use analytics data so that Angular team can prioritize the features and improvements. So, when we update the CLI projects, it will opt-in with ng analytics on options. If we allow this globally, then it will collect some data like command used, the flag used, Operating System, Node Version, CPU Count, RAM Size, execution time and error with crash data if any to the Angular team for the improvement purpose in the future releases.

8. Support SVG Template-

Now, Angular 8 supports the template features with a file extension SVG. This means that, we can use the SVG extension file as a template in place of HTML file without any extra configuration settings. But why we will use a .svg file as a template instead of using the image in an HTML file? The reason is when we use SVG as a template, then we can use that as a directive and as a result, we can bind it just like HTML templates. With this approach, we can dynamically generate interactive graphics in our Angular Applications. 

@Component({  

   selector: “app-icon”,  

   templateUrl: “./icon.component.svg”,  

   styleUrls: [“./icon.component.css”]  

})  

export class DashboardComponent {…} 

9. PNPM Support-

In Angular 8, Angular CLI also support PNPM including NPM and Yarn. Also, in the command ng add now provide a new flag called – registry for adding packages from any private NPM registry. This command is already available in the Angular CLI version for ng update command.

Conclusion-

These are the new features in Angular 8, that you can use for effective development. If your apps are going to need changes, it’s better to find out immediately than to wait. You can know the comparison between Angular, React and Vue at out blog- Angular vs. React vs. Vue: A 2019 Comparison (Updated).

Are you looking to develop software with Angular? We suggest you the development with Angular 8. Solace is the perfect place to start with. Developers at Solace are well trained in Angular 8 development to give you the best solution. Get a free quote for software development that helps your business to stand out in the wide market competition.