Angular 8 has come up with lot of new features such as ivy rendering engine,bezel support,web workers,supports Typescript 3.4,improvement in ngUpgrade.
Top new features of Angular 8:
The differential loading is a boon to modern javascript.Here new apps generated by Angular CLI will now contain seperate bundles for legacy javascript(ES5) and modern javascript (ES2015+). This will boost the loading speed of modern browser.The Differential loading is enabled by default for new apps created with version 8 of CLI. You can enable the differential loading feature ,by setting 'target' option in tsconfig.json file to 'es2015'.
The new version of Angular 8 now requires lot of angular dependencies and one of them is Typescript 3.4.It is mandatory to update the latest version of Typescript in order to work with Angular 8.It comes with cleaner and readable javascript codes.
IVy is the new rendering engine produces small bundle size.You can notice faster rebuild times.The payload time is decreased and eventually download the browser fast.
It is also forecast as next generation rendering pipeline for Angular 8.In Angular 8, it has been included as Opt-in preview for testing.
It uses incremental DOM in which every component is compiled with set of instructions.Once completed, will be released to the world with more simple,faster angular applications.The above all will takes place without changing the angular application.
Quick overview of IVy:-
Bazel in Angular 8 is Opt-in option, but soon will be provides as inbuilt in version 9. Following are the main advantage of Bazel:-
Web workers are very useful during CPU intensive tasks and which speeds up your application.This is otherwise called
as introduction of multi threading in Angular applications.Web workers helps to run CPU computation to run in the background thread, which
frees the main thread to update the user interface.
Web workers are very helpful when you are processing so much of data.
To generate a new web worker from CLI and add it to your project, you can run
ng generate webWorker myfirstwebworker
The lazy loading in angular comes up with dynamic import statement instead of our old way of declaring with string.
Old Way of lazy loading:-
New Way of lazy loading:-
{ path: '/employee', loadChildren: './employee/employee.module#EmployeeModule' }
{ path: '/employee', loadChildren: () => import('./employee/employee.module').then(e => e.EmployeeModule) }