Angular 8
visrey.me

Angular 8

Differential Loading by Default

A process where multiple productions builds were created and provided based on the client’s browser on the fly. Since modern browsers take advantage of advanced javascript features which can save around 20% of the total bundle size by avoiding polyfills.

Dynamic Imports for Route Configurations

While lazy loading components Angular uses a custom syntax for importing modules which build into angular toolchain looked like this

{path: '/orders', loadChildren: './orders/order.module#OrderModule'}

This has been migrated to industry standard dynamic imports which looks like this

{path: `/orders`, loadChildren: () => import(`./orders/order.module`).then(m => m.OrderModule)}

Builder API in CLI

In addition to existing schematics ng new, ng generate, ng add, ng update three new schematics were added. ng build, ng test, ng run were introduced to perform the process like build and deployment.

Workspace API’s

API to read and modify the angular.json file which in turn used for workspace configurations.

Web worker Support

Web workers provide a great way to offload CPU Intensive tasks to a background thread. From now we will be able to generate worker using generate command like below:

ng generate webWorker v-worker

Once created worker can be used all over the application and code split will be handled automatically.

const vworker = new Worker(`./v-worker.worker`, { type: `module` });

Ivy

Ivy is the new internal rendering engine which will drastically decrease the bundle size.
Experimental Support was provided for Ivy and not meant for a production environment as of now. Needs to be enabled manually to play around.

Reference: https://angular.io/guide/ivy

Bazel

Orchestrates build process (i.e Webpack, Typescript, ..) to improve overall build flow and speed.
Experimental support was provided not yet finished/tested, so not ready for production. Needs to be enabled manually to play around.

Reference: https://angular.io/guide/bazel