Angular in Visual Studio Code

To build Angular 22 apps in Visual Studio Code, install Node.js LTS and the Angular CLI (npm install -g @angular/cli), scaffold a project with ng new my-app, open it in VS Code, add the Angular Language Service, Prettier, and ESLint extensions, then run ng serve. That is the whole loop, and this guide walks each step so you end up with a fast, productive setup that has editor autocomplete, format-on-save, and one-click debugging.

VS Code is the most popular editor for Angular because it is free, cross-platform, and the Angular team ships first-party tooling for it. Angular 22 apps are standalone by default, use signals, and can run zoneless, so the workflow below reflects how modern projects are actually structured in 2026. Everything here works the same on Windows, macOS, and Linux, and none of it requires a paid plugin or license. By the end you will have created an app, wired up an editor that understands Angular templates, and set up breakpoint debugging and automatic formatting.

Install Node.js and the Angular CLI

Angular 22 requires an active or maintenance Node.js LTS release. Install the latest LTS from nodejs.org, then confirm the versions:

node --version
npm --version

Install the Angular CLI globally so the ng command is available everywhere:

npm install -g @angular/cli
ng version

ng version prints the CLI and Angular versions. If you already had an older CLI, the same npm install -g @angular/cli command upgrades it in place. Installing the CLI globally is convenient, but the version pinned inside each project's package.json and node_modules is what actually builds your app, so a global and a local CLI can differ without causing problems. Running ng inside a project always uses the local copy.

If you prefer not to install anything globally, you can scaffold with npx @angular/cli new my-app and let npm fetch the CLI on demand. Either approach produces an identical project.

Create a new app with ng new

Generate a project with a single command. The CLI asks a few questions the first time:

ng new my-app

The prompts you will see in Angular 22:

Stylesheet format — CSS, SCSS, Sass, or Less.
Server-Side Rendering (SSR) — say yes if you want prerendering and SSG for SEO; say no for a pure single-page app.
Zoneless — Angular 22 offers a zoneless application that drops zone.js and relies on signals for change detection. It is the recommended path for new apps and produces smaller, faster bundles.

Standalone components are the default, so there is no NgModule prompt anymore. The CLI installs dependencies, sets up a Git repository, and generates a ready-to-run app with routing and testing already configured. If you want to skip a prompt, you can pass flags directly, for example ng new my-app --style=scss --ssr=false --zoneless, which is handy for scripting or CI. When scaffolding finishes, open the folder:

cd my-app
code .

Install the essential VS Code extensions

Open the Extensions view with Ctrl+Shift+X (Cmd+Shift+X on macOS) and install three extensions that cover almost everything you need:

Angular Language Service (Angular.ng-template) — autocomplete, type checking, and go-to-definition inside HTML templates, including the new control-flow syntax.
Prettier (esbenp.prettier-vscode) — consistent formatting for TypeScript, HTML, and styles.
ESLint (dbaeumer.vscode-eslint) — inline lint warnings. Add it to the project with ng add @angular-eslint/schematics.

Commit these as workspace recommendations in .vscode/extensions.json so every teammate is prompted to install them:

{
  "recommendations": [
    "angular.ng-template",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ]
}

Run the dev server with ng serve

Start the development server and open the app in your browser:

ng serve --open

The CLI compiles the app, serves it at http://localhost:4200, and reloads the browser whenever you save a file. Angular 22 uses the esbuild-based application builder, so cold starts and incremental rebuilds are noticeably fast. You can change the port with ng serve --port 4300 if 4200 is taken, and pass --configuration production to preview a production build locally. Keep this terminal running in the VS Code integrated terminal (Ctrl+`) while you work; the process watches your files and rebuilds on every save.

VS Code terminal showing npm install of the Angular CLI followed by ng new and ng serve output

Understand the standalone project structure

A modern Angular 22 app has no AppModule, which makes the project noticeably easier to navigate than the module-based layouts of older versions. The pieces that bootstrap the application live in a handful of small files under src/, and once you know these four you understand the whole startup sequence:

main.ts — the entry point; it calls bootstrapApplication.
app/app.config.ts — application-wide providers (router, HTTP client, zoneless change detection).
app/app.routes.ts — the route table.
app/app.component.ts — the root standalone component.

main.ts wires the root component to its configuration:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app.component';

bootstrapApplication(App, appConfig)
  .catch((err) => console.error(err));

app.config.ts registers providers. For a zoneless app it enables signal-based change detection and the router:

import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideRouter(routes),
  ],
};

The root component is standalone: it declares its own imports and needs no module:

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: `
    <h1>{{ title() }}</h1>
    <router-outlet />
  `,
})
export class App {
  protected readonly title = signal('my-app');
}

Generate components and services

Use ng generate (shorthand ng g) to scaffold building blocks. Everything is standalone by default:

ng generate component features/dashboard
ng generate service core/user

The component command creates the .ts, .html, and .css files plus a spec, and the service is generated with providedIn: 'root' so it is tree-shakeable and injectable anywhere via the inject() function. Because generated components are standalone, you add them to a feature by importing the class in another component's imports array or by referencing it from a route, rather than declaring it in a module. The schematics also respect your project style choices, so a component you generate matches the CSS or SCSS you picked during ng new. Run ng generate --help to see the full list of blueprints, including guards, interceptors, pipes, and directives.

Debug Angular in VS Code

VS Code ships with the built-in JavaScript Debugger, so you can set breakpoints in TypeScript and step through them in the editor while the app runs in Chrome or Edge. Add a .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug Angular",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Run ng serve first, then press F5. VS Code launches a fresh browser instance attached to the debugger, breakpoints in your components and services are hit directly, and source maps map execution back to your original TypeScript rather than the compiled output. You can inspect variables, watch expressions, and step through asynchronous code without leaving the editor, which is far more productive than sprinkling console.log calls through a component.

Recommended settings: format on save

Turn on format-on-save so Prettier keeps every file consistent. Add a .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Now saving formats the file and applies safe ESLint fixes automatically. Commit the .vscode folder so the whole team shares the same behavior, which keeps diffs small and eliminates arguments about spacing in code review. With these settings, the extensions, and the debugger in place, you have a complete Angular 22 workflow in VS Code that scales from a quick experiment to a production application.

Key takeaways

Install Node.js LTS and run npm install -g @angular/cli to get the ng command.
ng new my-app scaffolds a standalone Angular 22 app and prompts for SSR and zoneless mode.
The Angular Language Service, Prettier, and ESLint extensions cover editing, formatting, and linting.
Modern apps bootstrap through main.ts, app.config.ts, and app.routes.ts with no NgModule.
ng serve gives fast esbuild rebuilds; F5 with a launch.json enables breakpoint debugging.
Enable editor.formatOnSave and commit .vscode so the whole team stays consistent.

Frequently asked questions

Do I need NgModules in Angular 22?

No. Standalone components are the default and NgModules are optional. New apps bootstrap with bootstrapApplication and declare imports directly on each component.

What is the zoneless option in ng new?

Zoneless removes zone.js and uses Angular's signal-based reactivity to detect changes. It reduces bundle size and improves performance, and it is the recommended choice for new Angular 22 projects.

Which VS Code extensions are essential for Angular?

The Angular Language Service for template intelligence, Prettier for formatting, and ESLint for linting. Add ESLint to a project with ng add @angular-eslint/schematics.

How do I debug an Angular app in VS Code?

Run ng serve, add a Chrome launch configuration to .vscode/launch.json, then press F5. VS Code's built-in JavaScript Debugger hits breakpoints in your TypeScript through source maps.