Creating Your First App

The fastest way to start an Angular project is to let the CLI generate one for you. The ng new command scaffolds a complete, ready-to-run standalone application — wiring up TypeScript, the build system, testing, and a development server — so you can focus on writing components instead of configuration. This page walks through generating an app, answering the setup prompts for routing and styling, and serving it locally with ng serve.

Generating a project with ng new

Once the Angular CLI is installed, run ng new followed by your project name. The name becomes the folder, the npm package name, and the default selector prefix, so use a lowercase, hyphenated name.

ng new my-app

The CLI creates a my-app/ directory, generates the project files, and installs dependencies automatically. Modern Angular (v17+) scaffolds a standalone application by default — there is no root NgModule, and the app boots from a single bootstrapApplication() call in main.ts.

Tip: Run ng new in the parent folder where you keep projects, not inside an existing repository. The CLI initializes its own Git repo and package.json for the new app.

Answering the setup prompts

Before generating files, the CLI asks a couple of interactive questions. Your answers are baked into the generated configuration.

Output:

? Which stylesheet format would you like to use?
❯ CSS
  Sass (SCSS)   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented)  [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less          [ http://lesscss.org                                             ]
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)

The first prompt sets the stylesheet format for every component the CLI later generates. The second decides whether the app is configured for server-side rendering. Choose the answers that fit your project:

Prompt	Options	What it controls
Stylesheet format	CSS, SCSS, Sass, Less	The extension and syntax of every `.css`/`.scss` component style file
Routing	enabled / disabled	Whether `app.routes.ts` and the `provideRouter()` setup are generated
SSR / SSG	yes / no	Adds `@angular/ssr`, a server entry point, and prerendering support

In Angular’s current CLI, the router is included by default for the standalone app layout, so you may not see a separate routing prompt. To skip the questions entirely and accept sensible defaults, pass flags instead.

ng new my-app --style=scss --ssr=false --routing

Flag	Effect
`--style=scss`	Use SCSS for component styles without prompting
`--ssr=false`	Generate a client-only app (no server bundle)
`--routing`	Force the router setup to be included
`--skip-tests`	Omit `.spec.ts` files for generated artifacts
`--package-manager=pnpm`	Install dependencies with pnpm instead of npm

Running the development server

Move into the new directory and start the dev server with ng serve. The --open (or -o) flag launches your browser automatically.

cd my-app
ng serve --open

The CLI compiles the app with esbuild, watches your files, and rebuilds on every save with live reload. By default it serves on port 4200.

Output:

Initial chunk files | Names         |  Raw size
main-XR4F2A.js      | main          | 215.34 kB
polyfills-LZBJRWM3  | polyfills     |  34.58 kB
styles-5INURTSO.css | styles        |   0 bytes

Application bundle generation complete. [1.842 seconds]

Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/

Open http://localhost:4200/ and you’ll see Angular’s starter page. To use a different port, pass --port:

ng serve --port 4300

Editing the root component

The generated app boots a single root component, conventionally AppComponent. Open src/app/app.component.ts and you’ll find a standalone component using signals and the modern template syntax.

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

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

Change the value passed to signal(), save the file, and the browser updates instantly thanks to live reload. The <router-outlet /> is where the router renders matched routes.

Note: If ng serve fails with an “unknown command” or version error, you are likely running an old global CLI. Run ng version to check, and reinstall with npm install -g @angular/cli@latest if needed.

Best Practices

Run ng new outside existing repositories so the CLI can initialize its own Git history cleanly.
Pick your stylesheet format deliberately at creation time — switching SCSS to CSS later means editing every component.
Use flags like --style and --ssr in scripts or CI to scaffold reproducibly without interactive prompts.
Keep the dev server running while you work; esbuild’s incremental rebuilds and live reload make the feedback loop fast.
Commit immediately after ng new to capture a clean baseline before adding features.
Prefer the default standalone layout for new apps — it is the supported path going forward and avoids NgModule boilerplate.