Create Your First Angular App with the CLI

Time to build something. In this lesson you will create a new Angular project, run it in your browser, and change the page to see how quickly Angular reflects your edits.

What you will learn

• How to create a project with ng new
• How to start the development server
• How to edit the page and see live updates

Create the project

Open a terminal in your course folder and run:

ng new my-first-app

The CLI asks a few questions. Prompts change between versions, so read each one, but these answers suit this course:

• Stylesheet format: choose CSS.
• Server-side rendering (SSR): choose No for now. It is an advanced topic.
• Routing: if you are asked, choose Yes. You will use it later.
• AI tool configuration: optional. Choose none unless you use one of the listed tools.

When it finishes, the CLI has created a folder named my-first-app with a working app and has installed its dependencies. If you want the answers filled in automatically, you can add flags, for example ng new my-first-app --style css --ssr false --routing.

Start the development server

cd my-first-app
ng serve

After a short build, the terminal shows a local address, normally http://localhost:4200. Open it in your browser. You should see the starter page.

Leave the server running. It watches your files, rebuilds when you save, and refreshes the browser for you. To stop it, press Ctrl + C in the terminal.

Change the page

Open the project in your editor and open src/app/app.html. It contains a long starter template. Select everything and replace it with this:

<!-- src/app/app.html -->
<main>
  <h1>My first Angular app</h1>
  <p>I am learning Angular, one lesson at a time.</p>
</main>

Save the file. Within a second the browser shows your new heading, without you reloading anything. This is the development loop you will use for the rest of the course: edit, save, look.

Build for production

ng serve is for development. When you want the optimized files that you can publish, run:

ng build

The result is placed in the dist folder. You will use this again in the deployment lesson.

Troubleshooting

• Port 4200 is already in use: stop the other server, or run ng serve --port 4300.
• The browser shows an old page: hard refresh with Ctrl + Shift + R (or Cmd + Shift + R on a Mac).
• Build errors after pasting code: the terminal prints the file and line. Read the first error carefully, because later errors are often a result of it.

Try it yourself

1. Change the heading and add a second paragraph about what you want to build.
2. Add a small list with three things you hope to learn.
3. Run ng build and look inside the dist folder.

Quick check

1. Which command creates a new project, and which one starts the dev server?
2. What does the dev server do when you save a file?
3. Where does ng build place its output?

Next, find out what all those generated files do in Angular project structure explained.