Angular V6 CLI Config

A new version of Angular has been released, with it a new CLI that brings changes on how we set configs.

1. The issue? 😲

Its documentation isn’t very verbose, so you’re left with doubts about what to do. For example, in the previous version you could set yarn as the default package manager like this:

ng set packageManager=yarn
// Or if you want to set it globally
ng set --global packageManager=yarn

However the new way to go with CLI V6 is this one:

ng config cli.packageManager yarn
// Or if you want to set it globally
ng config -g cli.packageManager yarn

The difference is clear, but there’s no documentation about the paths for the variables you can configure, or even the accepted values. Essentially we’re in the dark here 😥.

Now let me show you the ways of the config command, and how to know what can be configured in Angular V6 CLI 😉.

2. How to use it

The config command usage can be found in the documentation, though it doesn’t shows you which properties you can configure.

In basic terms you need a path and a value for the property you want to configure. Without the value it would only print the current value. If the path is something like cli.packageManager and you want to configure it with Yarn , then this is how the command would look like:

ng config cli.packageManager yarn

You can make this the default configuration for all your new projects by adding -g or --global flag:

ng config -g cli.packageManager yarn

Now, let’s explore how we get to know which properties are configurable.

3. Reading the Schema

To find out what parameters are configurable in the config command we need to know where to get the schema from(basically what paths & values can be used). This file is available at:

node_modules/@angular/cli/lib/config/schema.json

It looks like this:

node_modules/@angular/cli/lib/config/schema.json

The important part here are the properties. Do you remember the path previously used to set yarn as package manager? We used cli.packageManager, right? Well, the schema for the cli properties are shown in line  :13. You’ll notice it’s a reference for an object called cliOptions under definitions property. That’s our target in this case:

The cli property can have multiple properties like defaultCollection, packageManager and a few others…

Do you see where we’re going with this? To set the desired package manager we have to use the cli.packageManager path because that’s what the schema accepts.

The good thing about knowing how to read the schema is that you can find the description and the type of data accepted as a value. Additionally, some of them specify the options you can choose.

The packageManager for instance can receive a string, but not any string, it has an enum property, which tells you which strings you can pass to this property. In this case the Angular CLI accepts “ npm ”, “ yarn ” & “ cnpm ” (I didn’t even know cnpm existed).

4. What Now?

Now you know how to use the command, how to check the schema & build the paths for the properties to configure.

The schema is huge (1605 lines at Angular V6 release), but if you know what config you’re searching for, just search by a keyword, with a bit of luck it will available in the property key or in the description.

Now feel 😎(awesome) for knowing how to configure your Angular project.