How to do X in Angular CLI v6?

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 <YOUR_HOME_DIR>/.angular-config.json.

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

The ng set command has been replaced with ng config. Also the structure of the configuration changed.

A few examples of what has been changed:

Set the default package manager

Before:

ng set --global packageManager=yarn

After:

ng config -g cli.packageManager yarn

Disable the TypeScript version mismatch warning

Before:

ng set typescriptMismatch = false

After

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.

Before:

ng set defaults.component.inlineTemplate true

After:

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 inangular.json in the project root. The beauty of this is that it allows new schematics to be configurable too!

   "schematics": {
     "@schematics/angular": {
       "component": {
         "inlineStyle": true,
         "inlineTemplate": true
       }
     }
   }

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 angular.json .

Before:

ng build --env staging

After:

ng build --configuration staging

ng build — disable output hashing

Before:

ng build --output-hashing false

After:

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 ng build.

If you have multiple projects you need to specify the project which you can find as the keys of the projects object in angular.json.

Updates:

• May, 11th 2018: add info about defaults withng config
• 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 help?

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.

https://www.codementor.io/beeman