Angular schematics extension for Visual Studio Code
Visual Studio Code extension allowing you to launch Angular schematics (CLI commands) with a Graphical User Interface, directly inside VS Code!
This extension will save you time:
Differences with Angular Console
If you've heard about Angular Console, you may ask what's the difference with this extension (which was released first).
While this extension is specific to VS Code, Angular Console was first designed as a desktop app, and then ported to VS Code. As a consequence, some useful features like inferred options and auto-opening generated files are not possible in Angular Console (at least for now).
So it's up to you: test both and see which one saves you more time.
By the same author
Follow instructions on Visual Studio Code marketplace, or just search for "Angular schematics" by "Cyrille Tuzi" directly inside VS Code extensions panel.
Then, you can launch Angular CLI commands from 4 places:
The quickest way to launch your Angular CLI commands is the first, with a right-click inside the files Explorer context menu.
Why? Because the destination path and
Last version (v2) of this extension officially requires Visual Studio Code version >= 1.39. But it may work on some older VS Code versions too.
If you use on an older version of VS Code and run into issues, you can still install v1 of the extension (official instructions here).
This extension is only enabled inside an Angular >=5 CLI project
(ie. with an
The project opened must be the root directory of the Angular project. It won't work from a parent directory, as the CLI itself requires to be in the Angular directory.
If your Angular project is inside your backend project, and you want both opened in VS Code:
On macOS or Linux, if you use a custom shell (like
Component good practices
This extension helps you to follow good practices, by suggesting different component types and behaviors.
Special component behaviors
Components have a local scope by default, meaning they are only usable inside the module where they are declared. So if you want to use a component in another module (for example if you are doing a reusable UI component), you have to export it.
Pure component (also known as a presentation component)
A pure component is a component which relies only on its
Component without selector
Components associated to a route (ie. pages) or instantiated at runtime (like dialogs/modals) relies on specific features
This behavior is not required anymore with Ivy (ie. Angular >= 9 with default config or Angular 8 with Ivy explicitly enable). It's only required in non-Ivy mode (ie. Angular <= 7, Angular 8 with default config or Angular 9 with Ivy explicitly disabled).
Most of the time, Angular automatically manages the internal code to instantiate components, because they are either associated to a route (ie. pages) or used somewhere in a template (ie. presentation components).
But dialogs (like in Angular Material), modals (like in Ionic)
and Angular Elements
are invoked at runtime, so it was required to register them in
Component with Shadow DOM encapsulation
When creating an Angular Element, i.e. a reusable native Web Component,
the native encapsulation called
Note it's only available in Angular >= 7, and it won't work in Internet Explorer / Edge (pre-Chromium).
Having different component types is particullary helpful for projects following a good architecture, ie. distinguishing components behaviors (explained above), or for tools with special components (like pages and modals in Ionic).
Default component types
By default, the extension will propose you these component types:
Customize component suffixes (Angular >= 9)
Angular CLI >= 9 introduces a new
To customize component types, your root
Now the extension will ask which component type you want based on this suffixes list,
and set the
Link a custom suffix to a component type
Some common suffixes will automatically pre-select the recommended behaviors:
The list above includes common suffixes in Angular, Material and Ionic. If you think some other common suffixes are missing, please open a Pull Request with new defaults.
For uncommon suffixes, you can add a custom configuration in VS Code preferences:
If you want to use the default
This is a good practice but not the default configuration, as
For example, if you want all your generated components templates to be inline, in all your projects,
just add in
Or only in a specific project:
If you want different values from the official defaults, the following options should be configured like above to ease the generation process:
By default, this extension supports (if they are installed):
Scanning all packages to find all potential schematics would be too slow.
If you want to use other schematics, just add their package name in
If you are a library author, feel free to open a Pull Request to add your schematics in the default list.
If you created your own Angular schematics but didn't published them yet,
this extension can load them too. By default, the extension will look into
If your schematics collection path is different,
you can add a relative path in the VS Code preferences.
You can add keyboard shortcuts to the following actions:
But again, it's not the easiest way to use this extension:
a right-click in the files Explorer menu is better as the extension will infer the destination path and
The icons in the Angular Schematics view will be nicer if you use the Material Icon Theme extension.