Your First Angular App

With the CLI installed, generating and running an Angular app takes two commands. Let’s do that now before looking at what was created.

Generate a new app

ng new my-first-app

The CLI will ask a few questions:

? Which stylesheet format would you like to use? CSS
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No

Choose CSS for stylesheets and No for SSR. The CLI then:

1. Creates the project directory
2. Generates the project files
3. Runs npm install to install dependencies

This takes a minute or two on the first run.

Start the dev server

cd my-first-app
ng serve

Output:

✔ Browser application bundle generation complete.

Initial chunk files | Names         |  Raw size
main.js             | main          | 213.36 kB
polyfills.js        | polyfills     |  34.01 kB
styles.css          | styles        | 111 bytes

Build at: 2026-01-01T00:00:00.000Z - Hash: abc123def456

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✔ Compiled successfully.

Open http://localhost:4200 in your browser. You should see the Angular welcome page — a dark themed page with the Angular logo and some links.

That page is a running Angular application. Every time you save a file, the browser will automatically refresh.

What ng new created

The project directory contains:

my-first-app/
├── src/
│   ├── app/
│   │   ├── app.component.html    ← the root template
│   │   ├── app.component.ts      ← the root component class
│   │   ├── app.component.css     ← component styles
│   │   ├── app.component.spec.ts ← unit test
│   │   ├── app.config.ts         ← app-level configuration
│   │   └── app.routes.ts         ← route definitions
│   ├── index.html                ← the HTML shell
│   └── main.ts                   ← the entry point
├── angular.json                  ← CLI configuration
├── package.json
└── tsconfig.json

The next lesson covers each of these files in detail. For now, try this: open src/app/app.component.html, delete everything, and replace it with:

<h1>Hello, Angular!</h1>

Save the file. Your browser should immediately show “Hello, Angular!” — that is Angular’s live reload in action.

Exercise

1. Run ng new my-first-app and choose CSS stylesheets, no SSR.
2. Run ng serve and open http://localhost:4200.
3. Open src/app/app.component.html. Replace the contents with a heading that displays your name.
4. Confirm the browser updates automatically when you save.
5. Open src/app/app.component.ts. Find the title property and change its value. Observe that the page still works.

Recap

• ng new <name> scaffolds a complete Angular project and installs dependencies.
• ng serve starts the dev server with live reload at localhost:4200.
• The generated project includes a root component, route configuration, and app-level setup.
• Changes to template files cause the browser to reload automatically.