Repository files navigation

The fastest way to generate Angular files, right from your editor.

Stop memorizing CLI commands and switching contexts. This extension integrates the Angular CLI into the VSCode UI, letting you scaffold components, services, and modules with a simple right-click.

• Accelerate Development: Quickly scaffold components, services, and other schematics directly from the editor.
• Enforce Project Standards: Ensure consistency with standardized file structures and support for custom templates.
• Reduce Command-Line Errors: Guided UI minimizes mistakes and forgotten flags inng generate commands.
• Maintain Focus: Scaffold, code, and test without leaving your development environment.
• Stay Up-to-Date: Full compatibility with the latest Angular features, including standalone components and signals.

Here's how much simpler it is to create a new component:

ng generate component path/to/my-feature

1. Right-click a folder in the Explorer.
2. SelectAngular File Generator: Generate Component With CLI.
3. Enter thepath/to/my-feature and press Enter.

The extension then creates all necessary files with the correct boilerplate and updates the relevant module automatically.

• Angular File Generator
  • Key Features
  • Workflow Comparison: UI vs. CLI
    • The Old Way (CLI)
    • The Fast Way (This Extension)
  • Table of Contents
  • Description
  • Features
    • File Generation
    • Commands
    • Snippets
  • Main Features
    • Flat, Descriptive Context Menu
    • Sidebar "Angular File Generator" Panel
    • Configurable Naming Conventions
      • A. Legacy Mode (Angular 9-19)
      • B. Angular 20+ Mode
    • Built-in Snippets for Modern Development (Angular 20+)
  • Configuration
    • Essential Project Configuration
    • Settings Options
    • Placeholders in customCommands and templates
    • File Naming Without Suffixes
  • Usage
  • Installation
  • Resources
  • Contributing
  • Code of Conduct
  • Changelog
  • Authors
  • Follow Me
  • Other Extensions
  • Recommended Browser Extension
  • License

Angular File Generator seamlessly integrates the Angular CLI into any VSCode-based editor (including VSCode, VSCodium, WindSurf, Cursor, and others), enabling you to generate files and navigate your Angular project efficiently, without nested menus or manual command-line input.

Key capabilities:

• Generate all major Angular artifacts (components,services,modules,pipes,guards,interceptors,resolvers,directives,classes,enums,interfaces,tests, andtemplates) with a single click.
• Run Angular CLI commands (ng generate) directly from the editor.
• Use custom templates to match your team's standards.
• Instantly convert JSON blocks to TypeScript interfaces.
• Explore files, routes, and modules from a dedicated sidebar.
• Access built-in snippets for Angular 20+ reactivity APIs (signal,computed,effect, etc.).

Compatibility: Supports Angular 9-20+, fully aligned with Angular 20 conventions: suffix omission, dash-case file naming, and standalone components.

Angular File Generator adds a single entry to the Explorer's context menu in any VSCode-based editor, no nested submenus. From there you can:

• Generate Component / Service / Module / Pipe / Guard / Interceptor / Resolver / Directive / Class / Enum / Interface / Spec / Template

  • Opens a dialog to enter the name and default flags (e.g.,--style=scss,--standalone if enabled).
  • Internally invokesng generate <artifact> <name> --flags... or uses a built-in boilerplate engine.

• Generate with CLI → [same list of artifacts]

  • Shows the exact same list but delegates directly tong generate.
  • If your settings haveangular.fileGenerator.omitSuffix: true andtypeSeparator: "-", it generates files using Angular 20 conventions (e.g.,user-profile.ts instead ofuser-profile.component.ts).

• Generate Custom (Templates)

  • If you defineangular.submenu.templates in your settings, each custom template appears here.
  • Selecting a template prompts you for values like{{ComponentName}},{{entityName}}, or{{style}}, then generates the corresponding files with those placeholders replaced.

• Transform JSON to TS

  • Select a JSON block in the editor, right-click → "Angular File Generator → Transform JSON to TS." Angular File Generator usesjson-to-ts to generate a TypeScript interface with detected fields and types.

Angular File Generator adds a new icon to VSCode's Activity Bar. Clicking it opens a panel with four lists:

1. List Files

   • Settings:
     • angular.files.include: which extensions to show (e.g.,["ts"]).
     • angular.files.exclude: glob patterns to hide folders/files (e.g.,"**/node_modules/**").
     • angular.files.watch: which folders or name patterns to group files (e.g., "modules," "components").
     • angular.files.showPath: iftrue, appends the folder path in parentheses (e.g.,layout.module.ts (src/app/...)).
   • Behavior:
     • A TreeView: expand a group (e.g., "Modules: 64") to see its files.
     • Click a file to open it at the correct line.
     • No right-click actions, just click to open.

2. List Routes

   • Behavior:
     • Shows each routing module (e.g.,app-routing.module.ts) with its routes (path: 'auth',path: '', etc.).
     • Click a route to open that file and jump to its definition.
     • "Refresh" button reloads the list after changes.
     • No right-click, just click.

3. List Modules

   • Behavior:
     • Lists each*.module.ts file (e.g.,layout.module.ts) with child entries fordeclarations,imports, andexports.
     • Click any entry to open the file and scroll to that section.
     • "Refresh" button updates the list.
     • No right-click, just click.

4. Feedback

   • Behavior:
     • A simple list: About Us, Report Issues, Rate Us, Support Us.
     • Click an item to open its link in your browser.
     • No right-click, just click.

Angular File Generator offers two naming modes for files and classes:

"angular.fileGenerator.omitSuffix":false,"angular.fileGenerator.typeSeparator":"."

• Generates traditional names likemy-component.component.ts,my-service.service.ts, etc.
• This mode is suitable for projects that maintain legacy naming conventions.

"angular.fileGenerator.omitSuffix":true,"angular.fileGenerator.typeSeparator":"-"

• Creates dash-separated filenames without redundant suffixes. Examples:

  • user-profile.ts (instead ofuser-profile.component.ts)
  • auth-service.ts (instead ofauth-service.service.ts)

• If you also set"angular.components.standalone": true, Angular File Generator generates standalone components that includestandalone: true and importCommonModule.

This flexibility lets you migrate gradually between conventions without reconfiguring every template manually.

Although Angular File Generatordoes not include full templates that automatically injectsignal,computed, etc., it provides severalsnippets to accelerate the adoption of Angular's reactivity APIs. Type a prefix and press Tab to expand the snippet:

1. Signal (ng_signal)

   import{signal}from'@angular/core';constmySignal=signal(initialValue);

2. Computed (ng_computed)

   import{computed}from'@angular/core';constmyComputed=computed(()=>expression);

3. Effect (ng_effect)

   import{effect}from'@angular/core';effect(()=>{// reactive logic});

4. LinkedSignal (ng_linked_signal)

   import{linkedSignal}from'@angular/core';constmyLinkedSignal=linkedSignal(sourceSignal,(v)=>transformation);

5. ToSignal (ng_to_signal)

   import{toSignal}from'@angular/core/rxjs-interop';constsignalFromObs=toSignal(myObservable,{initialValue:defaultValue});

6. Resource (ng_resource)

   import{resource}from'@angular/core';constmyResource=resource(()=>fetch('/api/data').then(r=>r.json()));

Note on Custom Templates:To generate files that include specific imports likesignal orcomputed by default, it is recommended to create a custom template under theangular.submenu.templates setting. This allows for full control over the generated boilerplate.

For optimal performance and to align with project conventions, consider adding the following options to your.vscode/settings.json file.

{// 1. Enable/Disable the extension"angular.enable":true,// 2. Standalone components by default"angular.components.standalone":true,"angular.components.style":"scss",// 'css', 'less', 'sass', 'styl'// 3. Naming mode (Legacy vs. Angular 20+)"angular.fileGenerator.omitSuffix":true,// true for Angular 20+ (omit .component.ts, .service.ts, etc.)"angular.fileGenerator.typeSeparator":"-",// '-' for dash-separated; '.' for legacy"angular.fileGenerator.skipFolderConfirmation":false,// true to skip folder-confirmation dialogs// 4. Filters for "List Files""angular.files.include": ["ts"],"angular.files.exclude": ["**/node_modules/**","**/dist/**","**/.*/**"  ],"angular.files.watch": ["modules","components","services"],// folders to scan"angular.files.showPath":true,// show full path in list// 5. Working directory for CLI commands (monorepo)"angular.terminal.cwd":"packages/my-angular-app",// adjust to your structure"angular.fileGenerator.useRootWorkspace":false,// Use the root workspace folder as the current working directory to resolve relative paths// 6. Custom CLI commands"angular.submenu.customCommands": [    {"name":"Feature Module (OnPush + Routing)","command":"ng g m","args":"--routing --flat --change-detection OnPush"    }  ],// 7. Custom templates"angular.submenu.templates": [    {"name":"Corporate Component","description":"Component with header + basic logging","type":"component","template": ["/* Company XYZ - Confidential */","import { Component } from '@angular/core';","import { LoggingService } from 'src/app/shared/logging.service';","@Component({","  selector: 'app-{{entityName}}',","  standalone: true,","  imports: [CommonModule],","  templateUrl: './{{entityName}}.component.html',","  styleUrls: ['./{{entityName}}.component.{{style}}'],","})","export class {{ComponentName}}Component {","  constructor(private logger: LoggingService) {","    this.logger.log('{{ComponentName}} initialized');","  }","}"      ]    }  ]}

You can now use dynamic placeholders{{ComponentName}},{{entityName}}, and{{style}} in yourcustomCommands andcustomTemplates. After selecting a template or custom command:

1. VS Code will prompt you for each placeholder:

   • ComponentName: must be PascalCase (e.g.UserProfile)
   • entityName: camelCase or kebab-case (e.g.userProfile oruser-profile)
   • style: style extension (e.g.scss,css), default taken from your config

2. The extension will substitute each{{Key}} with your input before running the command or writing the file.

Example in.vscode/settings.json:

"angular.submenu.customCommands": [  {"name":"Custom Component","command":"ng g c","args":"{{entityName}} --style {{style}} --standalone true --change-detection OnPush"  }],"angular.submenu.templates": [  {"name":"Corporate Component","description":"Component with header + basic logging","type":"component","template": ["import { Component } from '@angular/core';","@Component({","  selector: 'app-{{entityName}}',","  templateUrl: './{{entityName}}.component.html',","  styleUrls: ['./{{entityName}}.component.{{style}}'],","})","export class {{ComponentName}}Component {","  constructor() { }","}"    ]  }]

Angular 19 and earlier generated filenames with explicit suffixes:

• Before (Angular ≤19)

  • ng g c user →user.component.ts (exportsclass UserComponent)
  • ng g s user →user.service.ts (exportsclass UserService)

Angular 20 conventions encourage simpler filenames:

• Now (Angular 20)

  • ng g c user →user.ts (exportsclass User)
  • ng g s user →user.ts (exportsclass User)

This extension follows this convention by default, generating files without the.component.ts or.service.ts suffixes. To enable this behavior, setangular.fileGenerator.omitSuffix totrue in your.vscode/settings.json.

{"angular.fileGenerator.omitSuffix":true}

This aligns with Angular 20's approach to file naming and simplifies your project structure.

Tip: To restore the old.component.ts /.service.ts suffixes, add the following to yourangular.json:

{"projects": {"your-app": {"schematics": {"@schematics/angular:component": {"type":"component" },"@schematics/angular:directive": {"type":"directive" },"@schematics/angular:service": {"type":"service" },"@schematics/angular:guard": {"typeSeparator":"." },"@schematics/angular:interceptor": {"typeSeparator":"." },"@schematics/angular:module": {"typeSeparator":"." },"@schematics/angular:pipe": {"typeSeparator":"." },"@schematics/angular:resolver": {"typeSeparator":"." }      }    }  }}

1. Open an Angular project in your VSCode-based editor (Angular 9 → Angular 20+).

2. Ensure that yoursettings.json has"angular.enable": true.

3. In theExplorer, right-click on a folder or file, select"Angular File Generator", and choose an action:

   • Generate a component, service, module, pipe, guard, etc.
   • Transform JSON to TS.
   • Run an Angular CLI command.
   • Use a custom template.

4. To use theCommand Palette, pressCtrl+Shift+P on Windows/Linux or⌘+Shift+P on macOS, type "Angular File Generator," and pick the desired command.

5. Tobrowse your code with side panels:

   • Click the Angular File Generator icon in the Activity Bar.
   • Navigate under "List Files," "List Routes," or "List Modules."
   • Use the "Refresh" button after adding or removing files, routes, or modules.

6. Tocreate custom templates that include imports for signals, computed, etc., editangular.submenu.templates in yoursettings.json following the structure shown above.

1. Open your VSCode-based editor (e.g., VSCode, VSCodium, WindSurf, Cursor).
2. Go to theExtensions view (Ctrl+Shift+X on Windows/Linux or⌘+Shift+X on macOS).
3. Search for"Angular File Generator" (author: Manuel Gil).
4. ClickInstall.
5. (Optional) Clone or download the repository and open the folder in VSCode to test the latest development version.

• VSCode Marketplace:https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-generator
• Open VSX:https://open-vsx.org/extension/imgildev/vscode-angular-generator
• GitHub Repository:https://github.com/ManuelGil/vscode-angular-generator
• Angular CLI Documentation:https://angular.io/cli
• Angular 20 Signals Guide:https://angular.io/guide/signals

Angular File Generator is open-source and welcomes community contributions:

1. Fork theGitHub repository.

2. Create a new branch:

   git checkout -b feature/your-feature

3. Make your changes, commit them, and push to your fork.

4. Submit a Pull Request against themain branch.

Before contributing, please review theContribution Guidelines for coding standards, testing, and commit message conventions. Open an Issue if you find a bug or want to request a new feature.

We are committed to providing a friendly, safe, and welcoming environment for all, regardless of gender, sexual orientation, disability, ethnicity, religion, or other personal characteristic. Please review ourCode of Conduct before participating in our community.

For a complete list of changes, see theCHANGELOG.md.

• Manuel Gil -Owner -@ManuelGil

See also the list ofcontributors who participated in this project.

• GitHub:
• X (formerly Twitter):

• Auto BarrelAutomatically generates and maintains barrel (index.ts) files for your TypeScript projects.

• Angular File GeneratorGenerates boilerplate and navigates your Angular (9→20+) project from within the editor, with commands for components, services, directives, modules, pipes, guards, reactive snippets, and JSON2TS transformations.

• NestJS File GeneratorSimplifies creation of controllers, services, modules, and more for NestJS projects, with custom commands and Swagger snippets.

• NestJS SnippetsReady-to-use code patterns for creating controllers, services, modules, DTOs, filters, interceptors, and more in NestJS.

• T3 Stack / NextJS / ReactJS File GeneratorAutomates file creation (components, pages, hooks, API routes, etc.) in T3 Stack (Next.js, React) projects and can start your dev server from VSCode.

• Drizzle ORM SnippetsCollection of code snippets to speed up Drizzle ORM usage, defines schemas, migrations, and common database operations in TypeScript/JavaScript.

• CodeIgniter 4 SparkScaffolds controllers, models, migrations, libraries, and CLI commands in CodeIgniter 4 projects using Spark, directly from the editor.

• CodeIgniter 4 SnippetsSnippets for accelerating development with CodeIgniter 4, including controllers, models, validations, and more.

• CodeIgniter 4 Shield SnippetsSnippets tailored to CodeIgniter 4 Shield for faster authentication and security-related code.

• Mustache Template Engine - Snippets & AutocompleteSnippets and autocomplete support for Mustache templates, making HTML templating faster and more reliable.

For developers who work with.vsix files for offline installations or distribution, the complementaryOne-Click VSIX extension is recommended, available for both Chrome and Firefox.

One-Click VSIX integrates a direct "Download Extension" button into each VSCode Marketplace page, ensuring the file is saved with the.vsix extension, even if the server provides a.zip archive. This simplifies the process of installing or sharing extensions offline by eliminating the need for manual file renaming.

• Get One-Click VSIX for Chrome →
• Get One-Click VSIX for Firefox →

This project is licensed under theMIT License. See theLICENSE file for details.