New configuration (external templates, style extension,...)

[cyrilletuzi]

Short version

The extension now uses its own configuration, and no longer honors angular.json settings. But you can copy settings from a valid and official angular.json via the configuration helper, accessible from the Angular logo in the left sidebar.

Explained version

Since version 6 of the extension, it uses its own configuration, and no longer honors angular.json settings.

Why? angular.json was becoming too complex, with no stable and simple official API to extract settings. It was becoming a burden for the extension to move forward with some new features. So now the extension uses its own configuration.

Also, the extension no longer always follow what the Angular CLI does by default. This extension aims to be a tool for Angular professionals, and so the defaults are now the ones my 8 years of teaching and coding with Angular have proven to be the best. The main differences you will notice are:

• inline HTML template by default
• change detection optimization (OnPush) by default
• :host { display: block; } by default in pure components
• no spec file by default

But I put a lot of effort in a configuration helper to configure everything as you like in just a click, for example:

• enable SCSS, Sass or Less styles
• disable styles
• enable external HTML templates
• enable single file components (SFC)
• enable or disable ngOnInit
• disable change detection optimization
• disable lazy loading
• disable block CSS display
• enable shadow DOM
• set the selector prefix

The configuration helper has been made very visible from the Angular logo in the left sidebar. It is also accessible from the Command palette, and is proposed on your first generation in a new project with the new extension version.

You can even tell the configuration helper to copy settings from a valid and official angular.json.

If you need assistance, Discussions is the place where to ask, not Issues.