Creating a new Angular project - Practice Exercises

Challenge - 5 Problems

📝 Syntax

intermediate

What is the correct command to create a new Angular project named 'shopApp' with routing enabled?

Choose the exact Angular CLI command that creates a new project called shopApp and sets up routing.

A ng init shopApp --routing

B ng generate project shopApp --routing

C ng new shopApp --routing

D ng create shopApp --routing

💡 Hint

The Angular CLI uses 'ng new' to create projects.

The correct command to create a new Angular project with routing is 'ng new shopApp --routing'. Other commands are invalid or do not create projects.

❓ component_behavior

intermediate

After creating a new Angular project, what is the default component rendered when you run 'ng serve'?

Identify which component Angular shows by default in the browser after running 'ng serve' on a fresh project.

A MainComponent

B AppComponent

C RootComponent

D HomeComponent

💡 Hint

The main component is named after the app prefix 'app'.

Angular generates an AppComponent by default, which is the root component rendered in the browser.

❓ lifecycle

advanced

Which lifecycle hook runs first in the root component after creating a new Angular project and starting the app?

Select the lifecycle hook that Angular calls first in the root component when the app loads.

A constructor

B ngAfterViewInit

C ngOnInit

D ngOnChanges

💡 Hint

The constructor runs before Angular lifecycle hooks.

The constructor of the component class runs first, before Angular calls lifecycle hooks like ngOnInit.

🔧 Debug

advanced

You created a new Angular project but running 'ng serve' shows 'Cannot find module @angular/core'. What is the most likely cause?

Identify the main reason for this error after creating a new Angular project and trying to serve it.

A You did not enable routing during project creation

B You used 'ng new' without specifying a project name

C You ran 'ng serve' outside the project folder

D You forgot to run 'npm install' to install dependencies

💡 Hint

Missing node modules usually cause this error.

The error means Angular packages are missing. Running 'npm install' installs them. Other options do not cause this error.

🧠 Conceptual

expert

What is the purpose of the 'angular.json' file created in a new Angular project?

Choose the best description of what the 'angular.json' file controls in an Angular project.

A It configures project build and development settings like file paths and build options

B It lists all installed npm packages and their versions

C It contains the main HTML template for the app

D It stores environment variables for production and development

💡 Hint

Think about what controls how Angular builds and serves your app.

The 'angular.json' file defines how Angular builds, serves, and tests the project, including file locations and build options.

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