The Angular CLI and project structure

The CLI is how every Angular project is created, run, generated, tested and built.

Angular is used through its CLI. Install it with npm install -g @angular/cli, then:

ng new my-app scaffolds a project (it asks about styles and server-side rendering).
ng serve runs a dev server with hot reload at http://localhost:4200.
ng generate component user-card (short: ng g c user-card) creates a component; also service, directive, pipe, guard, interceptor.
ng test runs unit tests (Vitest by default in new projects), ng build produces an optimised production bundle in dist/.

A new project contains:

src/main.ts — calls bootstrapApplication(App, appConfig) to start the app with the root component.
src/app/app.config.ts — application-wide providers: the router, error listeners, HTTP features and so on.
src/app/app.ts, app.html, app.css — the root component. Current style drops the .component suffix from file names.
src/app/app.routes.ts — the route table.
angular.json — build and serve configuration; tsconfig.json — TypeScript settings, with strict mode on.

Modern Angular (v17 onwards, and the default in v22) uses standalone components: each component lists what it uses in its own imports array, so NgModules are optional and mostly legacy. New apps are also zoneless (no zone.js) and components use the OnPush change detection strategy by default; both rely on signals, which you will learn shortly.

Example

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

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

// src/app/app.config.ts
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

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

// Terminal:
// ng new shop && cd shop
// ng serve                 -> http://localhost:4200
// ng g c product-card      -> src/app/product-card/product-card.ts (+ .html, .css, .spec.ts)

Remember

ng new, ng serve, ng generate, ng test, ng build cover the daily workflow
main.ts bootstraps the root component with providers from app.config.ts
New apps are standalone, zoneless and OnPush by default

Watch out for

Following old tutorials that create NgModules and app.component.ts files; modern Angular doesn't need them.

Check yourself

Where do you register application-wide providers such as the router in a new Angular app?

Official docs: angular.dev/tools/cli/setup-local

Example

Remember

Watch out for

Check yourself

Builds on

Unlocks