One of the most popular Javascript frameworks - Angular has finally released it’s latest Angular 8 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. In this blog, we will discuss the top 10 Angular 8 features & updates.
If you previously know the history of Angular versions & features, or if you only want to focus on Angular 8, please skip this part and move on to the next – Angular 8 features.
Angular is one of the most popular front-end JavaScript framework comparing React & Vue.js for web app development. Its first version was released in 2009 and It has been around for the past 10 years, and since then, it brought an impressive list of changes and improvements.
The first version of the framework was launched in 2009 known by AngularJS. Though it was completely not a perfect framework back then, majorly due to its large bundle size, complicated debugging issue, dependency injection stops to work after minification of code, performance issues, and other technical problems.
The competition was tough so Google’s engineering team make many changes to their framework have added really powerful libraries and new features like AOT, tree-shaking to make it better for every AngularJS Development Company. Angular 2 was completely rewritten it's not an upgrade of version 1. It was released with Typescript which is a superset of JavaScript introduced by Microsoft and chosen by the Angular team for development. Typescript is a great way to write javascript. Angular 2 introduced Hierarchical Dependency Injection system as everything is a class in Angular, so DI is achieved via a constructor. The compiler was updated and used to optimize the production of template-rendering, which help the code to execute at the maximum speed in JVMs.
The main reason behind skipping version 3 was to avoid confusion as the core Angular libraries was live on one single GitHub repository at @angular/angular with versioned the same way but distributed as different NPM packages causing misalignment of the router package’s version that was already distributed as version 3.3.0 so team decided to skip version 3 and move ahead with Angular v4 which aligned all the core packages and help avoid confusion in the future.
With view-engine enhancements and code generation reductions in Angular 4, applications consumed less memory and they run quicker than their previous versions. Angular Universal was introduced as the core Angular Module which makes it easy to import the functions from the library.
Angular team has introduced progressive web apps support to their Angular version 5 to get the features of native mobile applications with the mobile web apps along with improvements & enhancements in Material Design & added build optimizer that makes the application lighter and faster by removing the unnecessary run-time code.
The main updates in Angular 6 were ng update, Bazel Compiler, Service Worker Support, Angular elements, CLI Workspaces, Animations Performance Improvements, ng add, and Angular Material + CDK components.
The Angular 7 version is primarily focused on the Ivy project but they have not introduced ivy in their angular 7 and talking about other major changes like new CLI, ScrollingModule, DragDropModule, major performance tweak by removing reflect-metadata polyfill which automatically included in the production and by adding Budget Bundles by default which will notify you when your app is reaching size limits. Angular 7 updated to typescript 3.1, RxjS 6.3 and added Node 10 support.
Angular 8 has arrived and with it a bunch of workflow and a new set of powerful features that Angular developers will appreciate like the core framework, Angular Material library, and the Command Line Interface. They have enabled major launch partner as 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. let’s go over and summarize what are new features introduced in Angular 8 as well as how upgrading your Angular 7 apps to Angular 8.
If you have been following Angular then you probably encountered the word “Ivy”. Ivy is a major change in Angular history, it an angular renderer which is radically different from anything as it uses incremental DOM. It changes how the framework internally works, without changing our Angular applications. The Ivy project is basically rewriting the Angular compiler and runtime code in order to reach
The key 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(pipeBind1(1, 1, ctx.todos)));
}
},
encapsulation: 2
});
return TodosComponent;
}());The template function contains the instructions rendering and updating the DOM as they are rendering engine.
Two main concepts of IVY
Angular 8 apps will now be more performant, thanks to Differential Loading of Modern JavaScript. With differential loading, new apps generated by Angular CLI will now contain separate bundles for legacy JavaScript (ES5) and modern JavaScript (ES2015+).
The correct bundle will be loaded automatically by the browser & will be able to download smaller, more efficient app bundles that load and render faster.
Angular 8 feature added backward compatibility mode to Angular router that helps to upgrade the path for large projects and will make it easier to move to Angular by allowing lazy loading parts of Angular v1.x apps using $route APIs.In simple word, we will be able to upgrade our Angular 1.x apps to Angular 2+ right away.
Thanks to Angular CLI 8, web workers are included while building the production bundles which are essential for improving the parallelizability and helps increase the performance. Angular 8.0 is thus adding building support to CLI which provides one bundle for every web worker.
ng g webWorker <name>
One of the new features of Angular 8 is the possibility to build your CLI application with Bazel. The Angular framework itself is built with Bazel.
It is available as opt-in, it is expected to be included in @angular/cli in Version 9.
Bazel key advantages are:
Lazy loading is based on the concepts of Angular Routing as it helps bring down the size of large files by lazily loading the files that are required. In previous angular versions, the route configuration uses the property @loadChildren which accepts a string and if there was a 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.
Now Editor will understand what's this syntax and will recognize if there is some mistake and we won't have to wait till build time to realize about an error.
To keep their efforts in alignment with the community’s needs Angular CLI will be gaining another new feature i,e opt-in usage sharing. This feature will enable opt-in to sharing telemetry about your Angular CLI usage with the Angular team and now Angular 8 can collect data like commands used and the build speed if users allow them which will help developers improve in future.
The Angular CLI is continuously improving, and now the ng-build, ng-test and ng-run are equipped to be extended by 3rd-party libraries and tool.
For Example: AngularFire
The new version allows us to use Builders API. It uses builders for main operations like: serve, build, test, lint and e2e. Basically, the builder Builders are functions that implement the logic and behavior for a task that can replace 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 });
});
});
The Angular Team wants to provide support for all developers using AngularJS to upgrade them with latest Angular so some enhancements have been made to provide better integration with the AngularJS $location service in hybrid (AngularJS <=> Angular) apps. A new package angular/common/upgrade is added help you
Angular ships with a service worker implementation Starting with version 5. With the Angular Service Worker and the Angular CLI built-in PWA support angular developers can take advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs and can achieve native-like application download and Installation.
In the newest version of Angular 8, they have updated Angular’s dependencies which include tools like RxJS and TypeScript to v3.4 ( Angular 7 uses v3.2) and new apps generated via the Angular CLI will also use the newest version of TypeScript by default.
Angular have officially added support for firebase and now we can deploy our application using the Angular CLI.
ng run [PROJECT_NAME]:deploy
Angular aims to balance innovation and stability in their framework and to do that they have removed or replaced some features & API'S so that Angular can stay updated with latest practices, changing dependencies, or changes in the platform itself.
To make these transitions easy they deprecate APIs and features for a period of time before removing them which provides developers time to update your apps to the latest APIs and best practices.
@angular/platform-webworker and@angular/platform-webworker-dynamic both the packages are deprecated @angular/platform-browser
Angular 8 new features are nice, but the main reason for many of us to upgrade to new versions of Angular 8 is to get a performance boost. If you worked with previous angular versions then upgrading an app from Angular 7 over to Angular 8 is simple.
For most developers, one command should take care of this update :
ng update @angular/cli @angular/core <name>>
Summing up all the above features, The Angular team has certainly did a great with the framework making developers job much easier & simpler. Angular version 8 looks like a much more accessible solution 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 smoother and smoother making the Angular platform better.
Read More: Angular 11 has released check what's new for developers
This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.
