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.