Angular 8: Upgrading & Summary of New Features - Angular 8 has arrived and with it a bunch of workflow and performance improvements. Like we did for the previous few releases, let’s go over what’s new with Angular 8 as well as how to go about upgrading your Angular 7 apps over to …Angular 8.
Angular 8 Release Highlight
I’d say that the number of apparent new features in Angular 8 are limited, but there are still a few goodies indeed:
Your Angular 8 apps will now be automagically more performant, thanks to 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:
$ ng build --prod
Lazy-loaded routes now use the standard dynamic import syntax instead of a custom string. This means that TypeScript and linters will be better able to complain when modules are missing or misspelled.
So a lazy-loaded import that looked like this:
{ path: '/cart', loadChildren: './cart/cart.module#CartModule' }
Will now look like this:
{ path: `/cart`, loadChildren: () => import(`./cart/cart.module`).then(m => m.CartModule) }
The change in syntax will be taken care of for you if you’re using the ng upgrade
command to upgrade your app.
The CLI is continuing to improve, and now the ng build
, ng test
and ng run
are equipped to be extended by 3rd-party libraries and tool. For example, AngularFire already makes use of these new capabilities with a deploy
command.
We’ll have to wait a little bit more for Ivy, the new rendering engine, and Bazel, the new build system, to be ready for official use with Angular. An opt-in preview of the two should be available shortly.
As it has been the case for the previous few releases, upgrading an app from Angular 7 over to Angular 8 is a breeze. That’s especially true if you’ve already migrated over to using the new HttpClient and to RxJS 6.
In the simplest of cases, you only have one command to run to upgrade over to Angular 8:
$ ng update @angular/cli @angular/core
With that command, your lazy loaded route imports will be migrated to the new import syntax automatically.
A few things to keep in mind about the upgrade process:
$ node -v
. And if you need to get the newest version, just head over to the official download page for Node.If your app makes use of Angular Material, you’ll want to follow with this command:
$ ng update @angular/material
This command will also take care of changing your Angular Material component imports to each specific component rather than importing from the global @angular/material
.
If you’re trying to upgrade from a different version than Angular 7 you can use the official Angular upgrade guide for instructions on how to proceed.
#angular