Angular CLI installation and setup - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to install Angular CLI globally using npm.

Angular

npm install -g [1]

Drag options to blanks, or click blank then click option'

Aangular

Bangular-cli

Cng-cli

D@angular/cli

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'angular-cli' instead of '@angular/cli'.

Trying to install 'ng-cli' which is not the official package.

The correct package name to install Angular CLI globally is @angular/cli.

2fill in blank

medium

Complete the command to create a new Angular project named 'my-app'.

Angular

ng [1] my-app

Drag options to blanks, or click blank then click option'

Astart

Bnew

Cinit

Dcreate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ng start', which is not a valid command ('ng serve' runs the development server).

Using 'ng create' which is not a valid Angular CLI command.

The Angular CLI command to create a new project is ng new.

3fill in blank

hard

Fix the error in the command to serve the Angular app on port 4201.

Angular

ng serve --port=[1]

Drag options to blanks, or click blank then click option'

A4201

B4200

C8080

D3000

Attempts:

3 left

💡 Hint

Common Mistakes

Using the default port 4200 instead of 4201.

Using a port number unrelated to Angular defaults.

The default port is 4200, but to serve on port 4201 you specify --port=4201.

4fill in blank

hard

Fill both blanks to install Angular CLI locally and check its version.

Angular

npm [1] @angular/cli && npx ng [2] --version

Drag options to blanks, or click blank then click option'

Ainstall

Bupdate

Cversion

Dv

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'npm update' instead of 'npm install' for initial install.

Using 'v' instead of 'version' for the version command.

Use npm install to install packages and npx ng version to check Angular CLI version.

5fill in blank

hard

Fill all three blanks to create a new Angular project with routing and SCSS style.

Angular

ng new my-app --[1] --style=[2] --skip-[3]

Drag options to blanks, or click blank then click option'

Arouting

Bcss

Ctests

Dscss

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'css' instead of 'scss' for styles.

Forgetting to add routing option.

Not skipping tests when desired.

Use --routing to add routing, --style=scss for SCSS styles, and --skip-tests to skip test files.

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