Creating components with CLI in Angular - Practice Exercises

Challenge - 5 Problems

📝 Syntax

intermediate

Angular CLI command to create a standalone component

Which Angular CLI command correctly creates a new standalone component named profile?

A ng generate component profile --standalone

B ng generate component profile --module=app.module.ts

C ng generate component profile --skip-import

D ng generate component profile --inline-style

💡 Hint

Standalone components require the --standalone flag to be created via CLI.

The --standalone flag tells Angular CLI to create a component that does not belong to any NgModule. Options like --module or --skip-import do not create standalone components.

❓ component_behavior

intermediate

Effect of skipping style file when creating a component

What will happen if you run ng generate component dashboard --skip-style?

A The component is created without a CSS/SCSS style file.

B The component will have inline styles instead of a separate file.

C The CLI will throw an error and stop the creation.

D The component will have an empty style file generated.

💡 Hint

The --skip-style flag controls whether a separate style file is created.

Using --skip-style prevents the CLI from generating a separate style file for the component. No inline styles are added automatically.

🔧 Debug

advanced

Why does this CLI command fail?

You run ng generate component user/profile but get an error. What is the most likely cause?

A The CLI cannot create components inside subfolders without the <code>--module</code> flag.

B The <code>user</code> folder does not exist and CLI cannot create nested folders.

C The CLI requires the <code>--flat</code> flag to create nested components.

D The CLI expects folder names without slashes; use dashes instead.

💡 Hint

Check if the folder path exists or if CLI can create it automatically.

Angular CLI can create nested folders automatically, but if the path is invalid or permissions prevent folder creation, it fails. Usually, the error is due to missing parent folders or invalid path.

❓ state_output

advanced

Result of creating a component with inline template and style

What files and content will be generated by ng generate component header --inline-template --inline-style?

A Only the TypeScript and CSS files are created; HTML is inline.

B Separate HTML and CSS files are created, but empty because of inline flags.

C A TypeScript file with template and styles inside, no separate HTML or CSS files.

D Only the TypeScript and HTML files are created; CSS is inline.

💡 Hint

Inline flags embed template and styles inside the component TS file.

Using --inline-template and --inline-style creates a component with the template and styles written inside the TypeScript file. No separate HTML or CSS files are generated.

🧠 Conceptual

expert

Understanding Angular CLI component creation flags

Which Angular CLI flag ensures a component is created without being declared in any NgModule?

A --module=none

B --skip-import

C --flat

D --standalone

💡 Hint

Standalone components do not require NgModule declarations.

The --standalone flag creates a component that is not declared in any NgModule, making it independent and usable without module declarations.

Practice

1. What command do you use to create a new Angular component using the CLI?

easy

A. ng build component component-name

B. ng create component component-name

C. ng new component component-name

D. ng generate component component-name

Solution

1. Step 1: Understand Angular CLI commands

   The Angular CLI uses ng generate to create new files and features.

2. Step 2: Identify the correct syntax for creating components

   To create a component, the command is ng generate component followed by the component name.

3. Final Answer:

   ng generate component component-name -> Option D

4. Quick Check:

   Use ng generate component to create components [OK]

Hint: Remember: 'generate' creates, 'create' is incorrect here [OK]

Common Mistakes:

• Using 'ng create' instead of 'ng generate'
• Confusing 'ng new' which creates a new project
• Using 'ng build' which compiles the app

2. Which of the following is the correct syntax to generate a component named header using Angular CLI?

easy

A. ng generate component header

B. ng generate component-header

C. ng generate component:header

D. ng generate component/header

Solution

1. Step 1: Check the correct command format

   The Angular CLI expects the component name as a simple argument after the command.

2. Step 2: Identify the valid component name format

   Component names should be simple words or camelCase without special characters like ':' or '/'.

3. Final Answer:

   ng generate component header -> Option A

4. Quick Check:

   Use space, not symbols, between command and name [OK]

Hint: Use space after 'component' for name, no symbols [OK]

Common Mistakes:

• Using symbols like ':' or '/' in component name
• Hyphenating the command instead of the name
• Confusing command syntax with file paths

3. What files are created when you run ng generate component footer in an Angular project?

medium

A. footer.component.js, footer.component.html, footer.component.css

B. footer.ts, footer.html, footer.css, footer.spec.ts

C. footer.component.ts, footer.component.html, footer.component.css, footer.component.spec.ts

D. footer.component.ts, footer.html, footer.css, footer.spec.js

Solution

1. Step 1: Recall Angular component file structure

   Angular components generate four files: TypeScript, HTML, CSS, and a test spec file, all with the component name prefix.

2. Step 2: Match the correct file extensions and naming

   The files have extensions .ts, .html, .css, and .spec.ts with the component name and '.component' in the filename.

3. Final Answer:

   footer.component.ts, footer.component.html, footer.component.css, footer.component.spec.ts -> Option C

4. Quick Check:

   Angular components create 4 files with .component and correct extensions [OK]

Hint: Remember 4 files: .ts, .html, .css, .spec.ts [OK]

Common Mistakes:

• Missing the .spec.ts test file
• Using .js instead of .ts
• Omitting '.component' in filenames

4. You ran ng generate component nav-bar but got an error. What is the likely cause?

medium

A. You must run the command inside an Angular project folder

B. Component names cannot contain hyphens

C. The CLI command should be ng create component nav-bar

D. Component names must be uppercase

Solution

1. Step 1: Check the environment for running CLI commands

   Angular CLI commands must be run inside an Angular project folder where configuration files exist.

2. Step 2: Verify the command syntax and naming rules

   Hyphens are allowed in component names, and the command is ng generate component, not ng create. Component names can be lowercase.

3. Final Answer:

   You must run the command inside an Angular project folder -> Option A

4. Quick Check:

   Run CLI commands inside Angular project folder [OK]

Hint: Always run CLI commands inside your Angular project folder [OK]

Common Mistakes:

• Trying to run commands outside the project folder
• Using 'ng create' instead of 'ng generate'
• Thinking hyphens are invalid in names

5. You want to create a component named userProfile inside a folder features using Angular CLI. Which command correctly does this?

hard

A. ng generate component features userProfile

B. ng generate component features/userProfile

C. ng generate component features-userProfile

D. ng generate component userProfile/features

Solution

1. Step 1: Understand folder structure in CLI commands

   To create a component inside a folder, specify the folder path before the component name separated by a slash.

2. Step 2: Identify the correct command syntax

   The correct syntax is ng generate component features/userProfile to place the component inside the 'features' folder.

3. Final Answer:

   ng generate component features/userProfile -> Option B

4. Quick Check:

   Use slash to specify folder path before component name [OK]

Hint: Use folder/componentName with slash to create nested components [OK]

Common Mistakes:

• Swapping folder and component name order
• Using space instead of slash for folder path
• Hyphenating folder and component name incorrectly