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.