LogoLoading Please Wait...

New Features of Angular 8

By divine_admin_infosys

One of the JavaScript frameworks – Angular has released Angular 8 latest version on 23 May 2019. The latest release of Google’s Angular framework has bought several attractive features that made Angular 8 unique compared to its previous versions.

What’s New in Angular 8

  • Core Framework
  • Angular Material library
  • The Command Line Interface.
  • Enabled major launch partner
    • Angular Console for running Angular projects
    • #angular/fire for integrating Firebase with Angular
    • StackBlitz integrated IDE and NativeScript for building native mobile apps with Angular

List of Angular 8 Features

Image result for features of angular 8 hd

Preview of Ivy

Ivy is used for rendering pipeline and Angular’s upcoming generation compilation. In Angular 8, using preview version of Ivy you can choose to opt in to start and help in its continues development and tuning. Ivy project is normally rewriting the Angular compiler and runtime code in order to achieve

  • greater build times(Incremental Approach)
  • greater build size more flexible with tree-shaking
  • lazy loading of component expects of modules

How Angular Ivy works on Incremental DOM

The Main idea behind Incremental DOM is every component gets compiled into a series of instructions. These instructions create DOM trees and update them in-place when the data changes.

@Component({
selector: ‘todos-cmp’,
template: `
<div *ngFor=”let t of todos|async”>
{{t.description}}
</div>
`

})
class TodosComponent {
todos: Observable<Todo[]> = this.store.pipe(select(‘todos’));
constructor(private store: Store<AppState>) {}
}

Will be compiled into:

var TodosComponent = /** @class */ (function () {
function TodosComponent(store) {
this.store = store;
this.todos = this.store.pipe(select(‘todos’));
}

TodosComponent.ngComponentDef = defineComponent({
type: TodosComponent,
selectors: [[“todos-cmp”]],
factory: function TodosComponent_Factory(t) {
return new (t || TodosComponent)(directiveInject(Store));
},
consts: 2,
vars: 3,
template: function TodosComponent_Template(rf, ctx) {
if (rf & 1) { /** create dom*/
pipe(1, “async”);
template(0, TodosComponent_div_Template_0, 2, 1, null, _c0);
} if (rf & 2) { /** create dom*/
elementProperty(0, “ngForOf”, bind(pip

eBind1(1, 1, ctx.todos)));
}
},
encapsulation: 2
});

return TodosComponent;
}());

The template function contains the instructions rendering and updating the DOM as they are rendering engine

Differential loading

Angular 8 apps will now be more efficient; it is because of Differential Loading of Modern JavaScript. New apps generated by Angular CLI will now contain separate bundles for legacy JavaScript (ES5) and modern JavaScript (ES2015+) using differential loading.

Image result for features of angular 8 hd

Browser will load right bundle automatically and will be able to download tiny, more efficient app bundles that load and render faster.

Angular Router Backwards Compatibility

Angular 8 added this feature into Angular router, this is use to upgrade the path for big projects and will make it simpler to move to Angular by authoring  lazy loading parts of Angular v1.x apps using $route APIs .In other word, we will be able to upgrade our Angular 1.x apps to Angular 2+ right away.

Improved Web Worker Bundling

Angular CLI 8, web workers are included at that time when framework the production bundles which are important for refining the parallelizability and helps to rise the performance. Angular 8.0 is thus adding building support to CLI which provides one bundle for every web worker.

  • ng g webWorker <name>

Bazel Support

The @angular/bazel package supports a builder that permits  Angular CLI to use Bazel as the build tool.

Image result for bazel angular 8

Bazel key advantages are:

  • Able to create our backends and frontends with the same tool
  • Greater build time ,The first build will be slow because Bazel is targeting  for exactly reproduceable builds but concurrent builds will be a quite faster & it will be favourable if your app uses some modules and libraries.
  • Incremental Build: Codebase will only prompt the least rebuild possible help to build and deploy only what has modified rather than the entire App.
  • You can remove the Bazel files, they are hidden by default.
  • The possibility to have remote builds (with cache) on a build farm

Opt-In Usage Sharing

This will enable opt-in to sharing telemetry about usage of your Angular CLI with the Angular team and  From now Angular 8 can take data from users if users permit them which will support developers improve in future.

CLI workflow improvements

The Angular CLI is persistently refining, and now the ng-build, ng-test and ng-run are equipped to be extended by 3rd-party libraries and tool.
For Example: AngularFire

Builders API

Builder APIs mainly used for : serve, build, test, lint and e2e. Fundamentally, the Builders are functions that applies the logic and behaviour for a work that can alter a command which you pass to the createBuilder() method from @angular-devkit/architect package & now we can create our custom builders as well.

import { BuilderOutput, createBuilder } from ‘@angular-devkit/architect’;
export default createBuilder((options, context) => {
return new Promise<BuilderOutput>(resolve => {
resolve({ success: true });
});
});

AngularJS API Migration Improvements with $location service

Team of Angular wants to give support for all developers using AngularJS to upgrade them with latest Angular so some improvements have been created to provide finer integration with the AngularJS $location service in hybrid (AngularJS <=> Angular) apps. Package for this service: – angular/common/upgrade

  • To fetch the state from location service.
  •  To track all location changes.
  •  Fetch hostname protocol port search properties which were present in AngularJS.
  • To test location service MockPlatformLocation API is added.

Conclusion

Encapsulating all the features that are listed above. Angular version 8 is a considerably more available fix focused on the modern technological trends added features like Ivy, route configurations use dynamic Imports, new builder API in the CLI, web worker support, Unified Angular Location Service & with every new release, the framework is getting flatter and flatter making the Angular platform better.

Source of Content and Images :- angularminds

Divine Infosys