So finally the much awaited version(due to IVY buzz) of Angular has been released. Angular 8 includes preview of Ivy and Bazel. The Angular team has been talking about Ivy Renderer for more than a year and now we have atleast an opt-in-preview for the same in the version 8. In order to test Ivy or Bazel you need to activate them manually.
Apart from this, the new version of framework has made a lot improvement in bundle size and runtime speed.
The most important change or feature in this version is Differential Loading - different bundle for legacy and modern browsers.
Other changes includes Dynamic imports in route configurations for lazy loading modules, Web Worker support, Support for Typescript 3.4.x.
Differential Loading
Differential Loading is a process by which a browser, based on its capabilities, chooses between a legacy(ES5) or modern(ES2015+) JavaScript. Thus Angular will create a legacy build and a modern build and when the application will be loaded, the appropriate bundle will be loaded.
The bundles created by Angular will be injected using nomodule attribute.
<script nomodule src="…"> // Legacy
<script type="module" src="…"> // Modern
The nomodule attribute is a boolean attribute that prevents a script from being executed in browsers that support module scripts thereby allowing selective execution of module scripts in modern browsers and old scripts in legacy ones.
Lazy Loading changes - Dynamic Imports
The new version of Angular is depricating the way we used to lazy load our feature module in router configurations. So earlier we used to do the following in router config:
{
path: '/user',
loadChildren: './user/user.module#UserModule'
}
New syntax:
{
path: '/user',
loadChildren: () => import(`./user/user.module`).then(mod => mod.UserModule)
}
Builder APIs
There are lot of CLI commands which run complex process. Each of these commands use an internal tool called Architect to run CLI builders (which eventually use another tool to get the task done). With Angular 8, CLI Builder API is available for the developers to customize the Angular CLI by adding or modifying commands.
Web Worker Support
Web Workers allow you to run CPU intensive computations in a background thread, freeing the main thread to update the user interface.
We can generate web worker using ng generate command in CLI
ng generate webWorker test-worker
Support for TypeScript
Angular 8 will include the updates to the latest versions of its dependencies like RxJs & TypeScript. Angular now uses TypeScript 3.4.
So these are some new additions to Angular. Although they are nice to have but they aren't very much critical. The important addition to this is definitely the opt-in-preview for Ivy. So with Angular version 8, you can choose to opt in to start using a preview version of Ivy. And with the additions of differential loading, you’ll get noticeable performance gains.
Keep Calm & Keep Coding!
Top comments (0)