What's new in Angular CLI 8.3?

Angular CLI 8.3.0 is out!✨

If you want to upgrade to 8.3.0 without pain (or to any other version, by the way), I have created a Github project to help: angular-cli-diff. Choose the version you’re currently using (7.2.1 for example), and the target version (8.3.0 for example), and it gives you a diff of all files created by the CLI: angular-cli-diff/compare/7.2.1…8.3.0. It can be a great help along the official ng update @angular/core @angular/cli command. You have no excuse for staying behind anymore!

Let’s see what we’ve got in this release.

Deploy command

Th CLI has gained a new deploy command! In fact it’s a simple alias to ng run MY_PROJECT:deploy, and does really nothing out of the box. If you try it in your project, you’ll see the following message:

Cannot find "deploy" target for the specified project.
You should add a package that implements deployment capabilities for your
favorite platform.
For example:
  ng add @angular/fire
  ng add @azure/ng-deploy
  ng add @zeit/ng-deploy
Find more packages on npm https://www.npmjs.com/search?q=ng%20deploy

As you can see, you need to add a builder to your project, depending on the platform you are targeting. For example if you want to deploy to https://zeit.co/now, you can run ng add @zeit/ng-deploy which will automatically configure your project by adding the necessary configuration to your angular.json file and also create a now.json file. You can then simply run ng deploy when you want to build and deploy your application 🚀.

npm lists a lot of different builders, for example to deploy on Github. The builder builds your application and then pushes the result on the gh-pages branch of your repository.

Faster production builds

You have probably noticed that since the differential loading feature was introduced in Angular CLI 8.0 the production build now runs twice (once for the modern browsers, targeting ES2015, and once for the legacy browser, targeting ES5). The feature itself is really cool, but ng build --prod was effectively taking twice the time. Angular CLI 8.3 changes how the command runs:

• the ES2015 version is built first
• than the resulting bundles are directly downleved to ES5, instead of rebuilt from scratch

The larger your application is, the biggest gain you’ll see. I tried it in one of our projects:

• with CLI 8.2: ng build --prod ran in 31,7s for ES2015 and 28,8s for ES5, for a total of 138s.
• with CLI 8.3: ng build --prod ran in 32,0s for ES2015 and 🔥~10s🔥 to downlevel to ES5, for a total of 🔥98s🔥.

As this is brand new, if you experience an issue, you can still fall back to the previous behavior with NG_BUILD_DIFFERENTIAL_FULL=true ng build --prod for the moment.

Home page redesign

The home page of a newly generated project has completely changed, and it looks much nicer. It also includes helpful links to begin, and features some common commands.

Look at that 😍:

As you can see, this 8.3 release has some interesting new features!

All our materials (ebook, online training and training) are up-to-date with these changes if you want to learn more!