Installing the Angular CLI and Creating an App

Installing the Angular CLI and Creating an App

The Angular CLI is the official command-line tool for creating and managing Angular projects. It scaffolds apps, generates components, and runs builds.

Install the CLI

You need Node.js installed first. Then install the CLI globally:

npm install -g @angular/cli

Check the version with ng version. The ng command is your entry point to everything.

Create a new app

Generate a project and start the dev server:

ng new my-app
cd my-app
ng serve

ng new asks a couple of questions about routing and styling. Answering yes to routing adds the Router module for free. The default style option is a stylesheet language you can change later.

Project layout

The generated app follows a clear structure:

src/app
  app.component.ts
  app.component.html
  app.component.css
src/main.ts
angular.json

app.component.ts is the root component, and its HTML template is what you see in the browser. angular.json holds build settings, and main.ts bootstraps the application.

Generating pieces

The CLI generates boilerplate for you. Try creating a component:

ng generate component greeting

This creates a folder with TypeScript, HTML, CSS, and a test file for the greeting component and registers it automatically. Using the generator keeps your project consistent.

Stop and check

Run ng serve, open the printed localhost URL, and edit app.component.html. Save and the browser reloads. Everything you see comes from one template file, which you will replace as you build components in the next lessons.

Key Points

• Install the CLI with npm install -g @angular/cli.
• ng new scaffolds, ng serve runs the dev server.
• The src/app folder contains your components.
• ng generate creates consistent boilerplate.
• Hot reload shows edits instantly in the browser.