Angular once again hit back us with strong features!
As the title says everything, we are here today to discuss one of the promising languages that hold most of the developer community!
Angular 8 is released, and our angular developers got super excited to share its awspiring features and updates with you all.
Let’s have a quick run through on what’s important, what’s not, and what we can look after and what to ignore!
Along with these, we have also included a small wrap up about Angular 9 release in this blog, so let’s see everything it in detail.
Hold on! if any of you here ever wandering to know the major features and updates about Angular 7 then here is the quick guide for you to explore: Angular 7 Released! Track The Major Changes In Angular
New Features In Angular 8
Experimental Support for Ivy:
Ivy is one of the big & most promising features of this release, which is also a most expected feature by Angular developers.
Ivy is a new internal rendering engine which is designed in such a way not to affect anything in external API changes, which means that we don’t need to do any changes in our code. The internal rendering engine is a part of the Angular application that is responsible for taking care of our external code and for rendering these changes into the screen (like components, templates, service, etc..)
Also, Internal rendering engine is frequently being updated by the Angular team. Now, it’s completely overwritten with new Ivy render engine, since it’s just a backend change it won’t affect the development process. Currently, this feature in Angular is not recommended for production but we can try it in our application if we want to test.
Let’s see how Ivy will improve your application.
- Faster re-build time.
- Improved payload sizes.
- Unlocks new potential features like meta programming or higher order components, supports lazy loading for component instead of modules, a new change detection system not based on zone.js.
How To Enable Ivy In Angular 8
Enabling Ivy is much easier than you think because we have an ng comment option to enable ivy (–enable-ivy).
ng new sample-ivy-app --enable-ivy
To enable Ivy in an existing application,
To use Ivy in an existing project, set the enableIvy option in the angularCompilerOptions in your project’s tsconfig.app.json.
{
"compilerOptions": { ... },
"angularCompilerOptions": {
"enableIvy": true
}
}
Now, restart your application and see the difference.
Introducing Bazel In Angular 8
Like Ivy, Angular 8 is also coming with the test version for Bazel.
Bazel is an open-source software development tool that allows us to automate the building and testing of any software. Google internally using this Blaze as a build tool but later they released this Blaze as an open-source tool as bazel.
Pretty much, It supports any language, but the current Angular 8 doesn’t get Bazel support. Like Ivy, this is also a testing version which you can play around with testing but not suited for production.
Let’s see some advantages of Bazel.
- It’s extensible – will support both backends and frontends. So you don’t want to search for different tools.
- It’s fast and reliable – It caches all previously done work and tracks changes on both file content and builds commands.
- It’s multi-platform – It will run in all major platforms (Linux, macOS, and Windows).
How To Enable Bazel:
Bazel is an npm package “@angular/bazel”
Enabling bazel is so much easier. For a new application, first, install @angular/bazel globally.
npm install -g @angular/bazel
Then create a new application using below command,
ng new --collection=@angular/bazel
for an existing application, run
ng add @angular/bazel
Now just run ng serve or ng build then the bazel will run the backend. You could also check the below links for more information.
https://angular.io/guide/bazel
https://bazel.angular.io/
Differential Loading – New Feature of Angular 8
Differential loading is a technique used by a browser to choose between modern or legacy JavaScript based on browser capabilities. With this technique, now Angular 8 can handle the browser capabilities by its own & It automatically uses CLI to create different bundles for modern(es2015) and legacy(es5) build for application. Also, it will automatically detect and serves a support version of a bundle to a browser.
Modern build mostly has less size compared to legacy because it will use modern JavaScript syntax and functions. Also, the surprise here is, we no need to do any changes in code or configuration because it will automatically enable once you upgrade it to Angular 8.
TypeScript 3.4:
TypeScript 3.4 is out with the usual array of new features, where a new –incremental flag helps to make a faster project builds right after the first build. Now Angular 8.0 supports TypeScript 3.4 as you can check out what TypeScript 3.4 comes within Microsoft Blog.
Some Tweaks Forms:
markastouched
Now Angular 8 has introduced a new method called “markAllAsTouched” in AbstractControl class along with existing markAsDirty, markAsTouched, markAsPending, etc. So this method marks the control as touched and also this will mark its descendants with a following line of code.
form.markAllAsTouched();
clear in FormArray
Another impressive feature is introduced in Angular 8, which is known as clear in FormArray that used to quickly clear all value in form control. Before that, we need to loop the controls to clear all values.
Now you can do it with a line of code as follows,
// `heros` is initialized with 2 users const heros = fb.array([hero1, hero2]); heros.clear(); // heros is now empty
Best To Read: Top 10 Angular Best Practices You Must Know
Changes In Feature:
Route Configurations Use Dynamic Imports
Lazy-loading with import() syntax
Hope you guys have noted that we always recommend in our blogs to use lazy-loading in application,
{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}
Now Angular 8 introduced a new syntax to declare our lazy-loading routes with import.
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
And these changes will be taken care by Angular CLI so if you run ng update @angular/cli it will automatically change it so we don’t need to work on these changes.
Bye Bye To HTTP package:
Generally, Angular frequently updates its features to increase its performance. Before they change or remove any feature, first it will be deprecated, then it will be changed or completely removed after a cable of version. In that case, @angular/http replaced by @angular/common/http in Angular 4.3 and deprecated from 5.0. Now it’s completely removed from Angular, so @angular/http package will no longer support in Angular 8.
Webworker Package Deprecated:
@angular/platform-webworker package it’s used to enable our application to run a web worker but have not worked as expected so Angular team is planning to remove this feature therefore soon it will be deprecated from Angular 8.
Change In ViewChild and ContentChild decorators:
In Angular 8, It is required to pass a ‘static’ flag in all @ViewChild and @ContentChild queries to specify whether the query is ‘static’ or ‘dynamic.’ The compiler will automatically sort the queries, but the Ivy needs to specify these changes like the same way as mentioned below.
@ViewChild('static', { static: false }) static: ElementRef<HTMLDivElement>;
Mostly, the flag will be false for existing applications. You can also specify true if you want to use that reference in ngOnInit(). You can read more about this in the official article of static query migration there you can see everything like when & what you have used when you want to set true and false.
Angular 9: A wrap!
While we are discussing about Angular 8 new features and updates, let’s also have a quick view of what we can expect in Angular 9.
Interesting? Isn’t it? Well, here it is!
- The stable version of Bazel – Angular 8 has released a test version of Bazel so we can expect Stable version in 9.
- The stable version of Ivy – Like Bazel, we can expect the Stable version of Ivy and probably it will be a default view in Engine.
- Compatible changes with Ivy – We may get some changes on the code to support Ivy, and it might result in decreasing the bundle size too.
Above quick list on Angular 9 is my prediction based on my knowledge so let’s not conclude until we get the Angular 9 release. Apart from this, if you think any quite interesting features or predictions can be added here, then please post us in the comment section and help us to curate the strong list of features. We would like to spread your right words to the world.
Are you looking for Angular developers to build your application? Here is the comprehensive guide on how to hire Angular developers. Also, it guides you with the following topics.
- Angular developer skills.
- How an ideal Angular developer resume should look.
- Top Angular developer tools.
- Commonly asked Angular developer interview questions.
- Present Angular developer job opportunities.
