Creating a new Angular project - Visual Walkthrough

Concept Flow - Creating a new Angular project

Open Terminal

↓

Run: npm install -g @angular/cli

↓

Run: ng new project-name

↓

Answer prompts: routing? style?

↓

Angular CLI creates project files

↓

Navigate into project folder

↓

Run: ng serve

↓

Open browser at localhost:4200

↓

See default Angular app running

↓

Project ready for development

This flow shows the steps from opening the terminal to seeing the Angular app running in the browser after creating a new project.

Execution Sample

Angular

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

These commands install Angular CLI globally, create a new project named 'my-app', enter its folder, and start the development server.

Execution Table

Step	Command	Action	Output/Result
1	npm install -g @angular/cli	Install Angular CLI globally	Angular CLI installed
2	ng new my-app	Create new Angular project	Prompts for routing and style; project files created
3	cd my-app	Change directory to project folder	Terminal now inside 'my-app' folder
4	ng serve	Start development server	Compiles project and serves at localhost:4200
5	Open browser at localhost:4200	View running app	Default Angular welcome page displayed
6	-	Project ready for development	You can now edit files and see live updates

💡 After step 5, the Angular app runs in the browser, so the project creation and setup is complete.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5
Angular CLI	Not installed	Installed globally	Available to create projects	Available inside project folder	Running development server	Serving app at localhost:4200
Project folder	Does not exist	Does not exist	'my-app' folder created	Inside 'my-app' folder	Inside 'my-app' folder	Inside 'my-app' folder
Development server	Not running	Not running	Not running	Not running	Running	Running

Key Moments - 3 Insights

Why do I need to install Angular CLI globally before creating a project?

Angular CLI is the tool that creates and manages Angular projects. Installing it globally (step 1) makes the 'ng' command available anywhere in your terminal, so you can run 'ng new' to create projects (step 2).

What happens when I run 'ng new my-app'?

The CLI asks if you want routing and which style format to use, then creates all necessary files and folders for your Angular project (step 2 in execution_table).

How do I see my Angular app running after creation?

After navigating into the project folder (step 3), running 'ng serve' (step 4) starts a local server. Opening localhost:4200 in a browser (step 5) shows the default Angular app.

Visual Quiz - 3 Questions

Look at the execution table, what command installs Angular CLI globally?

A ng new my-app

B npm install -g @angular/cli

C ng serve

D cd my-app

💡 Hint

Check Step 1 in the execution_table for the command that installs Angular CLI.

At which step does the Angular project folder get created?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Action' and 'Output/Result' columns in the execution_table for when the project files are created.

If you skip 'cd my-app' and run 'ng serve' from outside the project folder, what happens?

A An error occurs because no Angular project is found

B A new project is created automatically

C The server starts normally

D The browser opens automatically

💡 Hint

Refer to the variable_tracker showing where the development server runs and the importance of being inside the project folder.

Concept Snapshot

Creating a new Angular project:
1. Install Angular CLI globally: npm install -g @angular/cli
2. Create project: ng new project-name
3. Enter folder: cd project-name
4. Start server: ng serve
5. Open browser at localhost:4200
This sets up a ready-to-use Angular app for development.

Full Transcript

To create a new Angular project, first open your terminal. Install Angular CLI globally using 'npm install -g @angular/cli'. This makes the 'ng' command available. Next, run 'ng new my-app' to create a new project named 'my-app'. The CLI will ask if you want routing and which style format to use. After the project files are created, change directory into the project folder with 'cd my-app'. Then start the development server by running 'ng serve'. Open your browser and go to 'localhost:4200' to see the default Angular app running. Now your project is ready for development.

Practice

1. What command do you use to create a new Angular project named my-app with default settings?

easy

A. ng generate project my-app

B. ng create my-app

C. angular new my-app

D. ng new my-app

Solution

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

   The Angular CLI uses ng new followed by the project name to create a new project.

2. Step 2: Identify the correct syntax

   The correct command is ng new my-app. Other options are invalid CLI commands.

3. Final Answer:

   ng new my-app -> Option D

4. Quick Check:

   Angular CLI new project = ng new [OK]

Hint: Use 'ng new' plus project name to create Angular app [OK]

Common Mistakes:

• Using 'ng create' instead of 'ng new'
• Typing 'angular new' which is not a CLI command
• Using 'ng generate project' which is invalid

2. Which of the following commands correctly creates a new Angular project with routing enabled and SCSS as the style format?

easy

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

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

C. ng new my-app --routing scss

D. ng new my-app --route --style=scss

Solution

1. Step 1: Recall Angular CLI options for routing and style

   The correct flags are --routing to enable routing and --style=scss to set SCSS styles.

2. Step 2: Check syntax correctness

   ng new my-app --routing --style=scss uses correct double dashes and equals sign. Other options have wrong flags or missing dashes.

3. Final Answer:

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

4. Quick Check:

   Enable routing and SCSS with --routing and --style=scss [OK]

Hint: Use double dashes and equals for options in ng new [OK]

Common Mistakes:

• Using single dash for long options
• Writing '--route' instead of '--routing'
• Omitting equals sign for style option

3. After running ng new test-app --routing --style=css and then cd test-app followed by ng serve, what will happen?

medium

A. The app will fail to compile due to missing routing module

B. The Angular app will compile and be available at http://localhost:4200

C. The app will compile but show a blank page because CSS is not supported

D. The command will throw an error because 'ng serve' must be run before 'cd test-app'

Solution

1. Step 1: Understand Angular CLI workflow

   Creating a project with routing and CSS style is valid. Changing directory into the project folder is required before serving.

2. Step 2: What ng serve does

   ng serve compiles and launches a local server at port 4200 by default, showing the app in the browser.

3. Final Answer:

   The Angular app will compile and be available at http://localhost:4200 -> Option B

4. Quick Check:

   ng serve runs app at localhost:4200 [OK]

Hint: Run ng serve inside project folder to view app in browser [OK]

Common Mistakes:

• Running ng serve outside project folder
• Assuming CSS is unsupported
• Expecting errors from valid routing option

4. You run ng new my-app --routing --style=less but get an error saying the style option is invalid. What is the likely cause?

medium

A. LESS is not supported by Angular CLI by default without extra setup

B. The --routing flag must come after --style option

C. You must use --styles instead of --style

D. The project name 'my-app' is invalid

Solution

1. Step 1: Check Angular CLI supported style formats

   Angular CLI supports CSS, SCSS, Sass, and Stylus by default. LESS requires extra setup or dependencies.

2. Step 2: Analyze error cause

   The error about invalid style option likely means LESS is not recognized without additional configuration.

3. Final Answer:

   LESS is not supported by Angular CLI by default without extra setup -> Option A

4. Quick Check:

   LESS needs extra setup, not default [OK]

Hint: Check if style format is supported by default before using [OK]

Common Mistakes:

• Thinking option order matters
• Using --styles instead of --style
• Assuming project name causes style errors

5. You want to create a new Angular project named shop-app with routing enabled, SCSS styles, and skip installing npm packages initially. Which command should you use?

hard

A. ng new shop-app --routing --style=scss --skipNpm

B. ng new shop-app --routing --style=scss --no-install

C. ng new shop-app --routing --style=scss --skip-install

D. ng new shop-app --routing --style=scss --skip-npm

Solution

1. Step 1: Identify correct flags for skipping npm install

   The Angular CLI uses --skip-install to skip installing npm packages after project creation.

2. Step 2: Confirm routing and style flags

   --routing enables routing, and --style=scss sets SCSS styles correctly.

3. Final Answer:

   ng new shop-app --routing --style=scss --skip-install -> Option C

4. Quick Check:

   Use --skip-install to skip npm install [OK]

Hint: Use --skip-install to avoid automatic npm install [OK]

Common Mistakes:

• Using incorrect flag names like --no-install
• Trying camelCase flags like --skipNpm
• Using hyphenated flags not recognized by CLI