I am sure you all are excited about the Angular 8 release, So your wait is over now. In this blog, we will discuss newly introduce features and also discuss the breaking features which is partially introducing a feature which is yet to be developed completely and will introduce in Angular 9.
Angular 8 is finally here and includes a preview of Ivy, service worker support, differential loading, and a few other finishing touches. So let’s dive in and see what all features are introduced in angular 8.
1: Experimental Support For Ivy: This is the first and probably the most important features i.e Ivy. Ivy is the new internal rendering engine(external API does not change) which should drastically shrink the bundle size. It makes incremental compiling easier and is also the basis for future innovations in the Angular sphere.
Also, the angular team has paid special attention to this feature as after switching to the ivy the existing application will work as it was working earlier. Many of the advantages of still in preview-mode which is to be introduced in Angular v9, like faster compilation, small bundle size.
2: Experimental support for Bazel: Bazel is a build tool developed and massively used by Google, as it can build pretty much any language. The Angular framework itself is built with Bazel. The key benefit of using Bazel is we can build our frontend and backend using the same tool.
But for now, Bazel is still in opt-in preview mode and yet some work is needed to be done. and it is expected to be included in @angular/cli and will be available shortly in Angular V9.
3: Differential Loading: With differential loading, two bundles are created when building for production: a bundle for modern browsers that support ES2015+ and a bundle for older browsers that only support the ES5 version of JavaScript. The correct bundle will be loaded automatically by the browser, thanks to the support of ES6 modules in newer browsers.
This new feature results in the largest single performance improvement for Angular v8. Newer browsers will be able to load less code and load a much smaller amount of polyfills.
You don’t have to do anything special to benefit from differential loading, the ng build command with the --prod flag will take care of bundling everything so that differential loading is working out of the box.
4: Dynamic imports for Lazy routes (Lazy Loading): Lazy loading is now started using dynamic imports instead of a custom string. Also, with the help of dynamic import typescripts throws an error if any of the routes is misspelled or any of the modules is missing.
Earlier it is represented as given below:
{
path: '/abc', loadChildren: './abc/abc.module#AbcModule'
}
After this inclusion of this feature it will look like this:
{path: `/abc`, loadChildren: () =>import(`./abc/abc.module`).then(a => a.AbcModule)}
5: Improved Web worker bundling: JavaScript is single threaded by definition. Because of this, it is common for larger tasks like data calls to take place asynchronously. Web workers are a great way to speed up your application if you do any sort of CPU-intensive processing. Web workers allow you to offload work to a background thread, such as an image or video manipulation.
You can now generate new web workers from the CLI. To add a worker to your project, you can run:
ng generate webWorker my-worker
6: Improved CLI workflow: The CLI is continuing to improve, and now the ng build, ng test and ng runare equipped to be extended by 3rd-party libraries and tool. For example, AngularFire already makes use of these new capabilities with a deploycommand.
You can run the below command to deploy the application using the CLI:
ng run [PROJECT_NAME]:deploy
Conclusion: Once again the Angular team has done a great job, with the inclusion of these Angular v8 features the tasks have become so easier and also it helps in making your application faster.
Thanks for reading!!!
