Angular Schematics

Why this extension?

Productivity!

Angular is a powerful framework for building applications—it requires significantly more effort than simple jQuery scripts. You'll need to create hundreds of components and services throughout your project. There are four approaches to accomplish this, ranked from slowest to fastest:

• Manual creation: Writing all boilerplate code from scratch every time
• Code snippets: While helpful, they're static and still require substantial manual work
• Angular CLI: More powerful, but tedious—you must type long, error-prone command lines
• This extension: Simply right-click the destination folder and start coding (no command line required!)

Team collaboration and best practices

When working in a team, you face a choice:

• Allow everyone to work their own way, which leads to inconsistency and technical debt over time
• Establish and share best practices across the entire team

This extension helps enforce consistent patterns and architectural decisions throughout your project.

Documentation

The documentation is built directly into the extension using VS Code's walkthrough feature. The walkthrough appears automatically when you first install the extension and covers essential topics:

• Getting started with your first generation
• Troubleshooting common issues
• Configuration options

Please take a few minutes to review it. You can access the documentation at any time by:

1. Clicking the Angular logo in the left sidebar, or
2. Opening the VS Code menu:
   • View → Command Palette
   • Search for "Documentation"
   • Select "Angular Schematics: Documentation and tutorial"

Requirements

The extension:

• Is tested with the latest 2 versions of Visual Studio Code
• Should work with compatible versions of VS Code-based editors like VSCodium
• Should work with the latest version of Cursor

Compatibility with previous versions is not guaranteed.

Note: Alternative editors may not support all VS Code features. For example, Cursor does not support walkthroughs, which serve as the primary documentation method for this extension.

💎 Pro Edition

While this extension is extremely popular with over 1 million installations, it is not an official tool developed by the Angular team or affiliated with Google in any way.

This represents months of unpaid work by a single contributor.

Some features are marked with a diamond 💎, indicating they are exclusively available in the Pro edition.

Enjoy advanced features while supporting an independent contributor! 💖

Pro edition includes:

• Additional schematics (pages, routes, reactive services, Material components, unit tests, and more)
• Advanced configuration options (imports for standalone components, entry file exports, and more)
• Legacy schematics support (components with NgModules, class guards, and more)
• Custom schematics support in a much simpler way than with the Angular CLI
• Predefined paths to enforce consistent architecture

You can find detailed information about all these features in the extension documentation.

💎 Try the Pro edition for free 💎

⚡️ To celebrate 1 million installations, the Pro edition is currently 50% off for a limited time.

Release Notes

View the changelog here.