angular.json: The Angular Workspace – part 3

Today I’ll explain two more properties of the new Angular Workspace file: schematics and cli.

schematics

Schematics is the underlying technology that powers the Angular CLI. Because schematics is an open technology you can easily tweak any setting defined in any schematic definition. You do this with the schematics property.

Let’s look at an example: say you want to add a global style sheet to your project. To make this work you need to switch off view encapsulation in your component definition. Like this:

Unfortunately, every time you create a new component (ng add component foo) you will need to remember to add; encapsulation: ViewEncapsulation.None. Wouldn’t it be great if Angular did this automatically? Step forward schematics.

Adding “@schematics/angular:component”: { “viewEncapsulation”: “None” } to the angular.json file tells Angular to automatically add the ViewEncapsulation property every time you use ng add component. Nice!

This is one more example of how Angular helps you boost your productivity and avoid silly mistakes in your code.

cli

packageManager

Are you bored with npm? Do you yearn for yarn? Now you can. Just switch the packageManager property to “yarn” and away you go.

defaultCollection

This one’s a bit of an edge case but if you aren’t happy with the default set of schematics (which ship with Angular) you can tell the CLI to use a different set. In this example, I’ve switched to the enterprise orientated @nrwl/schematicsset.

warnings

Turn off those pesky CLI warnings with this setting. In the example above, I’ve switched off the versionMismatch warning.

next time…

Just one more property to go: projects. I’ll explain this one next time.

<< part 2 part 4 >>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.