Angular Basics›Core· 30 min read

Setting Up Angular (ng new & ng serve)

Use the Angular CLI to create a project and start it in the browser — two commands and you are running.

What you will learn

Install the Angular CLI with npm
Create a new app with ng new
Run it locally with ng serve

Install the Angular CLI

The Angular CLI runs on Node.js and installs with npm (Node’s package manager). Install it once, globally, then check the version.

Terminal: install the Angular CLI and confirm it

npm install -g @angular/cli
ng version

Note: Output: Angular CLI: 17.0.0 Node: 20.x Package Manager: npm 10.x The ng command is now available everywhere on your computer. The exact version numbers will vary — that is fine.

Create a new app

Use ng new and give your app a name. The CLI asks a couple of questions (it is fine to accept the defaults), then builds the whole project for you.

Create a fresh Angular project

ng new my-app
# choose: routing? Yes    stylesheet? CSS
cd my-app

Note: Output: CREATE my-app/src/app/app.component.ts CREATE my-app/src/main.ts ... (dozens more files) ✔ Packages installed successfully. The CLI builds the whole project and installs everything for you. The cd my-app at the end moves your terminal into the new folder so the next commands run in the right place.

Run it in the browser

Start the development server with ng serve. The --open flag opens your browser automatically.

Start the dev server and open the app

ng serve --open

Note: Output: Angular Live Development Server is listening on localhost:4200 ✔ Compiled successfully. Your app is now live at http://localhost:4200. Save a file and the page refreshes by itself — this is called live reload.

Tip: Keep ng serve running in its own terminal tab while you work. Every time you save, Angular rebuilds and the browser updates on its own.

Watch out: If ng is “not found”, your Node.js install may be missing or too old. Install the latest LTS Node from nodejs.org, then run the install command again.

Q. Which command starts your Angular app in the browser during development?

Answer: ng serve compiles the app and runs a live development server (default http://localhost:4200) that reloads when you save.

✍️ Practice

Install the Angular CLI and run ng version to confirm it works.
Create a project with ng new and open it with ng serve --open.

🏠 Homework

Create a new Angular app, change the page title text in the starter template, and watch it live-reload.