With the release of Angular v6 the CLI also had a major upgrade.
In this document I try to list the things that have changed in the CLI specifically. The idea is to make this a ‘living document’, so if you have any additions, please leave a comment or ping me on twitter!
Angular CLI config file locations
Before v6 the Angular CLI project configuration was stored in
<PATH_TO_PROJECT>/.angular-cli.json. As of v6 the location of the file changed to
angular.json . Note: as there is no longer a leading dot, the file is no longer hidden by default.
The global configuration that was previously stored in
<YOUR_HOME_DIR>/.angular-cli.json is now stored in
Angular CLI config structure
The structure of the file has been overhauled quite a bit. The Angular CLI team did a great job reimagining what the CLI config should look like with the requirements that there are today.
- Support for multiple applications
- Support for libraries
- Enhanced support for schematics
Angular CLI preferences
ng set command has been replaced with
ng config. Also the structure of the configuration changed.
A few examples of what has been changed:
ng set --global packageManager=yarn
ng config -g cli.packageManager yarn
Disable the TypeScript version mismatch warning
ng set typescriptMismatch = false
ng config cli.warnings.typescriptMismatch false
Set the defaults for generating a Component
I generally prefer my components to have their styles and templates inline. Instead of specifying it each time I run
ng generate component (or:
ng g c) you can make it the default for the project you’re in.
ng set defaults.component.inlineTemplate true
ng config schematics.@schematics/angular.component.inlineTemplate true
The command is a bit longer as you are in fact changing the defaults of one specific schematic. This gets clear when we take a look at how the defaults are stored in
angular.json in the project root. The beauty of this is that it allows new schematics to be configurable too!
Parameters of the ng command
ng build— env <my-env>
In Angular CLI v6 the working of ‘environments’ has changed to ‘configurations’. A configuration is more than what was previously known as an ‘environment’, they are configured in
ng build --env staging
ng build --configuration staging
ng build — disable output hashing
ng build --output-hashing false
ng build --output-hashing none
ng build — app <app-name>
The concept of
apps in the previous versions of Angular CLI have been replaced with
projects, which can be either apps or libs. This is why
ng build --app has been replaced with
ng build <project-name> which is a shortcut for
ng build --project <project-name>.
In a default Angular 6 CLI workspace created with
ng new you don’t have to pass in the
<project-name> property as there is only 1 project, instead you can just run
If you have multiple projects you need to specify the project which you can find as the keys of the
projects object in
- May, 11th 2018: add info about defaults with
- May, 4th 2018: add info about
ng build --app
More to come…
As you can probably guess this list is far from complete. Please let me know in the comments or on Twitter if I made any mistakes or if I need to include some other changes you ran in to!
Need support for your Angular, Ionic, Firebase, NodeJS or TypeScript project? Looking for long-term mentorship? Feel free to book a 1-on-1 session with me on CodeMentor.