Standalone vs module-based decision in Angular - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

When to prefer standalone components in Angular?

Which scenario best justifies using standalone components instead of module-based components in Angular?

A When you want to group many components and services together for lazy loading.

B When building a small feature that does not need to be reused across multiple modules.

C When you need to share components across multiple modules with complex dependencies.

D When you want to organize your app into feature modules for better scalability.

💡 Hint

Think about simplicity and avoiding extra setup for small, isolated components.

Standalone components are ideal for small, self-contained features that don't require the overhead of modules. They simplify the code and reduce boilerplate.

❓ component_behavior

intermediate

Effect of standalone flag on component imports

Given two Angular components, one standalone and one module-based, how does the standalone: true flag affect importing other components or directives?

A Standalone components import dependencies directly in their <code>imports</code> array, while module-based components rely on NgModules to provide dependencies.

B Standalone components cannot import other components or directives, only modules can.

C Module-based components import dependencies directly in their <code>imports</code> array, standalone components rely on NgModules.

D Both standalone and module-based components import dependencies the same way using NgModules.

💡 Hint

Consider where dependencies are declared for standalone components versus module-based components.

Standalone components declare their dependencies directly in their imports array, removing the need for NgModules to manage dependencies.

📝 Syntax

advanced

Correct syntax for declaring a standalone component

Which of the following Angular component declarations correctly defines a standalone component?

A @Component({ selector: 'app-test', template: '<p>Test</p>', standalone: true }) export class TestComponent {}

B @Component({ selector: 'app-test', template: '<p>Test</p>' }) export class TestComponent {}

C @Component({ selector: 'app-test', template: '<p>Test</p>', standalone: false }) export class TestComponent {}

D @Component({ selector: 'app-test', template: '<p>Test</p>', standalone: 'true' }) export class TestComponent {}

💡 Hint

Check the type and presence of the standalone property.

The standalone property must be a boolean true (not string) to declare a standalone component.

❓ lifecycle

advanced

Lifecycle differences between standalone and module-based components

Which statement about Angular component lifecycle hooks is true when comparing standalone and module-based components?

A Module-based components have additional lifecycle hooks not available in standalone components.

B Standalone components do not support lifecycle hooks like <code>ngOnInit</code>.

C Standalone components have the same lifecycle hooks and behavior as module-based components.

D Standalone components require manual invocation of lifecycle hooks.

💡 Hint

Think about whether Angular changes lifecycle behavior based on component type.

Standalone components behave the same as module-based components regarding lifecycle hooks; Angular treats them identically in this regard.

🔧 Debug

expert

Why does this standalone component fail to render?

Consider this standalone Angular component code snippet:

@Component({
  selector: 'app-sample',
  template: '
Hello
',
  standalone: true
})
export class SampleComponent {}

When used in an Angular app, it does not render and shows an error about missing imports. What is the most likely cause?

A The selector name must start with 'app-' to work correctly.

B Standalone components cannot be used without being declared in an NgModule.

C The <code>standalone</code> property must be set to false for the component to render.

D The component is missing the <code>imports</code> array to include CommonModule for common directives like <code>ngIf</code> or <code>ngFor</code>.

💡 Hint

Think about what Angular modules provide by default and what standalone components need to import explicitly.

Standalone components must explicitly import CommonModule to use common Angular directives. Without it, Angular throws errors about missing directives.