Angular Generators

🚀 Features

✨ Smart Project Detection

• Automatic Detection: Instantly detects Angular projects by checking for angular.json
• Conditional Activation: Only activates when you're in an Angular workspace
• User Feedback: Clear notifications about project detection status

🎯 Intuitive Sidebar Interface

• Activity Bar Integration: Single tools icon in VS Code's Activity Bar
• Attractive Design: Beautiful emoji icons and theme-based styling
• One-Click Generation: Generate schematics with minimal clicks

🛠️ Complete Angular Schematic Support

Generate all major Angular schematics:

🎨 User Experience

• Visual Feedback: Progress indicators and success/error notifications
• Terminal Integration: Seamlessly runs ng generate commands
• Folder Selection: Interactive folder picker for target location
• Name Validation: Smart naming prompts with validation

📋 Requirements

• VS Code: 1.74.0 or higher
• Angular CLI: Globally installed (npm install -g @angular/cli)
• Angular Project: Valid Angular workspace with angular.json

🛠️ Installation & Usage

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Angular Generators"
4. Click Install

Quick Start

1. Open Angular Project → Extension automatically detects Angular workspace
2. Click Tools Icon → Located in VS Code's Activity Bar (left sidebar)
3. Choose Generator → Select from 9 available schematic types
4. Pick Location → Use folder picker to select target directory
5. Enter Name → Provide schematic name
6. Auto-Generate → Extension runs ng generate command automatically

Example Workflow

1. Open Angular Project ✅
   └── Extension detects angular.json ✅

2. Click 🛠️ Tools Icon in Activity Bar ✅
   └── Sidebar opens with generator buttons ✅

3. Click "🧩 Generate Component" ✅
   └── Folder selection dialog appears ✅

4. Select "src/app/components/" ✅
   └── Name input prompt appears ✅

5. Enter "user-profile" ✅
   └── Terminal runs: ng generate component user-profile ✅

6. Success notification appears ✅
   └── Component files created successfully ✅

🎨 Screenshots

Activity Bar Integration

Sidebar Interface

Generation Workflow

🔧 Configuration

The extension works out-of-the-box with sensible defaults. No additional configuration required!

Supported Angular Versions

• ✅ Angular 12+
• ✅ Angular CLI 12+
• ✅ Standalone components support
• ✅ Module-based applications

🐛 Troubleshooting

Extension Not Activating

Problem: Extension shows "No Angular project detected" Solution:

• Ensure you're in an Angular workspace
• Check that angular.json exists in the project root
• Verify Angular CLI is installed globally

Generation Fails

Problem: ng generate command fails Solution:

• Check terminal for specific error messages
• Ensure Angular CLI is properly installed
• Verify you have write permissions in the target directory

Missing Generators

Problem: Some generator buttons don't appear Solution:

• Restart VS Code
• Check that the extension is properly installed and enabled
• Verify you're in a valid Angular project

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This extension is licensed under the MIT License. See LICENSE for details.

🙏 Acknowledgments

• Built with ❤️ for the Angular community
• Inspired by the Angular CLI's powerful schematic system
• Thanks to the VS Code Extension API for making this possible

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: support@example.com

Extension Settings

This extension doesn't add any VS Code settings.

Known Issues

• Terminal output monitoring for success/error detection could be improved
• Some Angular CLI versions may have different command formats

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - see LICENSE file for details