Setting Defaults for Angular CLI

Angular CLI works great out of the box and the default setup delivers a nice configuration to work with. But in addition to having some sane defaults, it is also very configurable.

In this book, we will take the opportunity to configure our Angular CLI defaults so it behaves a little bit differently.

The things we are going to change all have to do with how we generate (or scaffold) our code.

When scaffolding components, the default Angular CLI settings will create the HTML template and style sheet in a separate file.

In order to keep all component content in one file, we will configure Angular CLI to generate inline templates and styles.

The advantage of keeping all the component content in one file is that you can work on templates, styles, and the actual component code in a single place without having to switch files.

Configuring Global Defaults

In your terminal, run the following commands to globally configure the defaults:

ng set defaults.component.inlineStyle true
ng set defaults.component.inlineTemplate true

When we run the git diff command, we see that these settings are stored in the .angular-cli.json file in our application:

In this section, we have configured Angular CLI to generate inline styles and templates.