Configure Defaults for Generating Code with Angular CLI

Bram Borggreve
InstructorBram Borggreve

Share this video with your friends

Send Tweet

The default Angular CLI configuration generates components that consist of 4 files. The component class, an HTML template, a stylesheet and a spec file that contains the unit test.

In order to keep our components concise we update our AppComponent and move the template and style from an external file to inline. This allows us to delete the 2 external files.

We can configure our project to generate the template and the style 'inline' by default.

To do this we run the commands:

ng config schematics.@schematics/angular.component.inlineStyle true
ng config schematics.@schematics/angular.component.inlineTemplate true

The changes are made to angular.json in the project root.

Brent Mitchell
Brent Mitchell
~ 3 years ago

There is a little typo in the transcript. The "style" declaration should be "styles".

Kevin Clark
Kevin Clark
~ 2 years ago

For demo purposes, I understand why you might not want template files, but sometimes there are better and easier to manage outside the component. Is this just your preference?

Bram Borggreve
Bram Borggreveinstructor
~ 2 years ago

Hey Kevin, it's indeed my preference.

I try to keep my templates short so they can live inside the component.

Also, in WebStorm the 'intellisense' works the same when the template is inline or external, in VS Code that works better when they are outside. :-)