Angular New Release

Mar 2, 2023 | Consultant

Key Angular CLI updates8.3.0

Using the latest Deploy command directly from CLI to a cloud platform

Starting with Angular CLI8.3.0, you will have a new deploy command to execute the CLI deploy associated with your project. To run MY PROJECT:deploy ng is essentially a simple alias.

With ng add [package name], there are many third-party builders that implement deployment capabilities to different platforms that you can add to your project. After adding the deploy functionality to this kit, the angular.json file of your project is automatically modified with a deploy version. Then simply execute the ng deploy command and deploy your project.

The Deploy command currently supports Firebase, Azure, Zeit, Netlify, and GitHub deployments. In case you are deploying to a self-managed server or there is no builder for the cloud platform you are using, you can also construct a builder yourself to use the ng deploy command.

Improved charging differential

Angular CLI 8.0 introduced the idea of the differential loading to optimize the web application’s browser compatibility. Most modern browsers today support ES2015, but there may be instances where users of your app have a browser that doesn’t. You can use polyfill scripts for the browsers to target a wide array of browsers.

You can ship a single package containing all of your compiled code and any necessary polyfills. This increased package size shouldn’t affect users with modern browsers though. This is where differential loading comes in, where the CLI constructs two separate bundles as part of the application you deployed. The first bundle will target modern browsers, while the second will target all necessary polyfills to the legacy browser.

Although this increases the browser usability of your application, output building ultimately takes twice as long. Angular CLI 8.3.0 addresses this by changing the way the command is running. Instead of rebuilding the app from scratch, the build targeting ES2015 is built first and then straight down leveled to ES5. If you experience some issues, you can use NG BUILD DIFFERENTIAL FULL= true ng build–prod to fall back to the previous behaviour.

Free Consultation