Angular CLI installation and setup - Step-by-Step Execution

Concept Flow - Angular CLI installation and setup

Open Terminal

↓

Check Node.js Installed?

No→Install Node.js

Yes↓

Run: npm install -g @angular/cli

↓

Verify Angular CLI: ng version

↓

Create Angular Project: ng new my-app

↓

Navigate to Project Folder

↓

Run Development Server: ng serve

↓

Open Browser at localhost:4200

↓

See Angular App Running

This flow shows the steps from opening the terminal to seeing the Angular app running in the browser after installing Angular CLI.

Execution Sample

Angular

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve

Installs Angular CLI globally, creates a new Angular project, moves into the project folder, and starts the development server.

Execution Table

Step	Command	Action	Result	Notes
1	npm install -g @angular/cli	Install Angular CLI globally	Angular CLI installed	Requires Node.js installed
2	ng version	Check Angular CLI version	Shows Angular CLI and environment versions	Confirms successful install
3	ng new my-app	Create new Angular project	Project folder 'my-app' created with files	Prompts for routing and style options
4	cd my-app	Change directory to project	Terminal inside 'my-app' folder	Ready for commands inside project
5	ng serve	Start development server	Server running at http://localhost:4200	Auto reloads on code changes
6	Open browser at localhost:4200	View running app	Default Angular welcome page displayed	Confirms app is running
7	Exit	Stop server or close terminal	Development session ends	Stop when done working

💡 Execution stops after server is stopped or terminal is closed.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5	Final
Angular CLI	Not installed	Installed globally	Available to create projects	Used to run dev server	Installed and running
Project Folder	None	None	'my-app' created	'my-app' active directory	'my-app' exists
Dev Server	Not running	Not running	Not running	Running at localhost:4200	Running or stopped

Key Moments - 3 Insights

Why do we need Node.js before installing Angular CLI?

Angular CLI uses Node.js and npm to install and run. Without Node.js, the 'npm install' command will fail (see Step 1 in execution_table).

What happens if you run 'ng serve' outside the project folder?

The command will fail because Angular CLI needs to find the project files in the current directory (see Step 4 and 5 in execution_table).

Why does 'ng new' ask questions during project creation?

It customizes your project setup, like adding routing or choosing CSS style. This happens in Step 3 in execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what command is used to start the Angular development server?

A ng new my-app

B npm install -g @angular/cli

C ng serve

D cd my-app

💡 Hint

Check Step 5 in the execution_table where the server starts.

At which step does the Angular project folder get created?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Look at the 'Action' column in execution_table for project creation.

If Node.js is not installed, what will happen at Step 1?

A Angular CLI installs successfully

B The 'npm install' command fails

C Project folder is created anyway

D Development server starts

💡 Hint

Refer to key_moments about Node.js requirement and Step 1 notes.

Concept Snapshot

Angular CLI Installation & Setup:
1. Ensure Node.js is installed.
2. Run 'npm install -g @angular/cli' to install CLI globally.
3. Use 'ng new project-name' to create a new app.
4. Navigate into project folder with 'cd'.
5. Start dev server with 'ng serve' and open browser at localhost:4200.
6. Stop server when done.

Full Transcript

To set up Angular CLI, first open your terminal. Check if Node.js is installed because Angular CLI depends on it. If not, install Node.js. Then run 'npm install -g @angular/cli' to install Angular CLI globally. After installation, verify by running 'ng version'. Next, create a new Angular project using 'ng new my-app'. This command creates a project folder with all necessary files. Change directory into the new project folder using 'cd my-app'. Start the development server with 'ng serve'. This runs the app locally at http://localhost:4200. Open this URL in your browser to see the default Angular welcome page. When finished, stop the server or close the terminal. This process sets up Angular CLI and runs your first Angular app.

Practice

1. What is the main purpose of the Angular CLI tool?

easy

A. To create and manage Angular projects easily

B. To write Angular component code manually

C. To deploy Angular apps to the server automatically

D. To replace the need for Node.js in Angular development

Solution

1. Step 1: Understand Angular CLI role

   Angular CLI is a command-line tool that helps create and manage Angular projects quickly.

2. Step 2: Compare options

   Only To create and manage Angular projects easily correctly describes this purpose. Writing code manually or deployment are not CLI's main roles.

3. Final Answer:

   To create and manage Angular projects easily -> Option A

4. Quick Check:

   Angular CLI = project creation and management [OK]

Hint: Angular CLI helps start projects fast [OK]

Common Mistakes:

• Thinking CLI writes code for you
• Confusing CLI with deployment tools
• Assuming CLI replaces Node.js

2. Which command correctly installs Angular CLI globally using npm?

easy

A. npm install @angular/cli

B. npm install -g @angular/cli

C. ng install -g @angular/cli

D. npm global install angular-cli

Solution

1. Step 1: Recall npm global install syntax

   The correct syntax to install a package globally is npm install -g package-name.

2. Step 2: Match Angular CLI package name

   The official package name is @angular/cli, so the full command is npm install -g @angular/cli.

3. Final Answer:

   npm install -g @angular/cli -> Option B

4. Quick Check:

   Global install = npm install -g [OK]

Hint: Use npm install -g for global packages [OK]

Common Mistakes:

• Omitting the -g flag for global install
• Using ng install instead of npm install
• Wrong package name or missing @angular prefix

3. After installing Angular CLI globally, what command creates a new Angular project named my-app?

medium

A. ng create my-app

B. npm new my-app

C. ng generate project my-app

D. ng new my-app

Solution

1. Step 1: Identify Angular CLI command for new projects

   The Angular CLI uses ng new to create new projects.

2. Step 2: Check command syntax

   The correct syntax is ng new project-name, so ng new my-app is correct.

3. Final Answer:

   ng new my-app -> Option D

4. Quick Check:

   New project = ng new [OK]

Hint: Use ng new to create projects [OK]

Common Mistakes:

• Using ng create instead of ng new
• Trying npm new which doesn't exist
• Using ng generate project incorrectly

4. You run ng serve but get an error saying command not found. What is the most likely cause?

medium

A. Angular CLI is not installed globally

B. You forgot to create a new project first

C. You need to run npm start instead

D. Your Node.js version is too new

Solution

1. Step 1: Understand ng serve command

   ng serve runs the Angular development server and requires Angular CLI installed globally or locally.

2. Step 2: Analyze error cause

   If the command is not found, it usually means Angular CLI is not installed globally or not in PATH.

3. Final Answer:

   Angular CLI is not installed globally -> Option A

4. Quick Check:

   ng serve error = missing global CLI [OK]

Hint: Check if Angular CLI is installed globally [OK]

Common Mistakes:

• Assuming npm start replaces ng serve
• Ignoring CLI installation errors
• Blaming Node.js version without checking CLI

5. You want to create a new Angular project with routing enabled and SCSS styling using Angular CLI. Which command should you run?

hard

A. ng create my-app --routing --style=scss

B. ng new my-app -routing -style=scss

C. ng new my-app --routing --style=scss

D. ng generate project my-app --routing --style=scss

Solution

1. Step 1: Recall correct command for new project with options

   The Angular CLI uses ng new with flags like --routing and --style=scss to enable routing and SCSS styling.

2. Step 2: Verify option syntax

   Options must use double dashes and equal sign for style. So ng new my-app --routing --style=scss is correct.

3. Final Answer:

   ng new my-app --routing --style=scss -> Option C

4. Quick Check:

   New project with routing and SCSS = ng new with flags [OK]

Hint: Use ng new with --routing and --style flags [OK]

Common Mistakes:

• Using ng create instead of ng new
• Using single dash for options
• Wrong option syntax like -routing