Google just released the new version of Angular 8.0 a few days back with a bunch of performance improvements. Let’s dive into the latest version to find out what’s new, why you need to upgrade, and what you should watch out for.
A month back, we have published a video informing how the release of Angular 8 will make Angular developer’s life more easier and what we to expect in Angular 8.
Angular
Angular is a JavaScript-based open-source front-end web framework with almost 48,000 stars on the Github, developed and maintained by Google and the community of individuals. Angular encompasses dependency injection, declarative templates, integrated practices, and an end to end tooling to resolve development challenges. Angular sanction developers to build web, mobile, and desktop-based applications and Angular has the command line interface tool to help beginners to get started.
I am writing this blog to introduce a few new features that every Angular developer should have acknowledged.
Here are the main key points:
- Builders and Deploy
Earlier, if you have ever had a looked at angular.json, then you might have noticed that it could be used by ngx-build-plus in v8 and gives 3rd party tooling to build process. Considering this change, Angular team collaborated with the cloud providers to integrate automated deployment into their infrastructure.
Web Workers
Angular 8 provides offload heavy work into a diverse web worker. This allows to improve the speed and execute the things in a similar browser.
- Differential loading –
Service Worker Improvements helps to reduce the polyfills by 2 to 10%. - Code-splitting via import
- AngularJS $location support
- Better IDE completion
So, are you wondering, where’s IVY?
Angular v8 ships with Ivy, but it does not enable by default yet. Let’s dive in.
Angular Ivy
Angular Ivy is a major part of this release, and the team put up so much efforts to get it released correctly. Go through this article to have a look and understand what Angular Ivy is.
Ivy is a very cool feature with the new compiler, and it will let you enable new cool features in the future as well. However, it has not been introduced to break the existing application. Angular 8.0 officially let you opt-in into Ivy. There are no real gains, but giving it a try won’t affect your application. The angular team is hoping that the community anticipates the switch and provide honest feedback to resolve the issue before v9.
At Bacancy Technology, our team gave it a hand and identified a few lapses if you wish to give it a try, then “enableIvy” in your angularCompilerOptions and restart your application.
Forms
markAllAsTouched form.markAllAsTouched(); FormArray.clear // `users` is initialized with 2 users const users = fb.array([user1, user2]); users.clear(); // users is now empty
Router
New syntax has been announced to declare lazy loading routes along with the import () syntax.
You can change your loadChildren declarations from:
For more, check out the blog (https://blog.ninja-squad.com/2019/05/29/angular-cli-8.0/) to know more about it.
PNPM Support
Angular CLI supports for PNPM – new package manager including NPM and Yarn. It offers a new flag called registry from any private NPM registry. It is already available for ng update command
Location
To help people migrating from AngularJS, a bunch of things has been added to the location services in Angular.
To assist developers for migration, a bunch of new things has been added to the location services.
PlatformLocation provides access to the hostname, port, and protocol, and a new getState() method lets you access to the history.state. These things are handy in ngUpgrade.
Service worker
Registration strategy
It’s a new option that allows to understand that at what time registration should take place. Earlier the service worker was waiting for the application to register to avoid the start slow of the application. However, with the new registrationStrategy option, you can let the Angular deal with this.
providers: [
ServiceWorkerModule.register('/ngsw-worker.js', {
enabled: environment.production,
registrationStrategy: 'registerDelay:2000'
}),
// ...
]
Bypass a Service Worker
`this.http.get('api/users', { headers: { 'ngsw-bypass': true } });
Multiple apps on sub-domains
Earlier, it was not possible to have numerous apps using @angular/service-worker on different sub-paths, because each service worker overwrites the caches, anyways this is now fixed.
Notable and breaking changes
Run ng update @angular/core and the schematics will itself update your code.
Web Worker Support
To speed up your application if you are sorting with CPU-intensive processing, then the web browser is a great way to go for. Web workers let you offload a background thread such as video or image. You may generate new web workers from the CLI to add a worker to your project: ng generates webWorker my-worker.
TypeScript upgrade
Upgrading to Angular 8 you will be able to upgrade to TypeScript 3.4. Here’s in-detail documentation.
Bye Bye @angular/HTTP
Angular has stopped the support for @angular/HTTP. Its use was already depreciated in Angular 4. However, in Angular 7, they allowed using @angular/HTTP in the application. But, from version 8, the support won’t be available further. So, make an adjustment to use @angular/common/HTTP instead of @angular/HTTP.
Support Codelyzer 5.0
Angular 8 TSLint configuration supports the Codelyzer 5.0 version. However, some of the rules have been renamed. Upgrading the Angular CLI will also update the TSLint configuration file. The CLI update will eliminate the es6 imports command from the polyfills.ts file.
Conclusion
As mentioned before, this is just a sampling of what is included in the Angular 8 release. This blog and points mentioned above are just samples of what is included in the Angular 8.0 release. Our Angular experts are excited to dive deeper into the new features as well as functionality in the coming weeks. Angular has always been transparent about the fact in their release and evolution. You can also check the new features that come along with Angular Ivy version 9. And as you get interested, you can seek our Angular Upgrade Service.
I believe this version was delivered as per the promise in a big way, and it will indeed make the Angular developer’s life easier with the new updates and functionality. However, if you want to leverage our developer’s expertise and want to find out what else can be done using this framework, then Hire AngularJS Developer from us to build something exceptional.
