Migrating from NgModules in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main reason Angular is moving away from NgModules?

Angular moves away from NgModules to simplify app structure, improve build speed, and enable standalone components that reduce boilerplate.

beginner

How do standalone components differ from components declared in NgModules?

Standalone components declare their own dependencies and don't need to be listed in NgModules, making them more independent and easier to reuse.

intermediate

What decorator replaces NgModule metadata when using standalone components?

The @Component decorator with the 'standalone: true' property replaces NgModule metadata for standalone components.

intermediate

How can you import other components or directives into a standalone component?

Use the 'imports' array inside the @Component decorator to include other standalone components, directives, or pipes.

intermediate

What is a key benefit of migrating to standalone components regarding lazy loading?

Standalone components simplify lazy loading by allowing direct import of components without needing separate NgModules.

What property do you add to a component to make it standalone?

A standalone: true

B module: true

C independent: true

D isolated: true

The 'standalone: true' property in the @Component decorator marks a component as standalone.

Which Angular feature becomes unnecessary when using standalone components?

A Pipes

B Services

C Directives

D NgModules

Standalone components reduce or remove the need for NgModules by managing their own dependencies.

Where do you specify other components or directives a standalone component uses?

A In the main.ts file

B In the NgModule's declarations

C In the 'imports' array of the @Component decorator

D In the package.json

Standalone components list dependencies in the 'imports' array inside their @Component decorator.

What is a benefit of standalone components for app startup time?

A No change in startup time

B Faster startup due to less boilerplate and simpler dependency graph

C Slower startup due to more files

D Requires manual optimization

Standalone components reduce boilerplate and simplify dependencies, improving startup speed.

How do you bootstrap an Angular app without NgModules?

A Pass the standalone root component directly to bootstrapApplication()

B Use platformBrowserDynamic().bootstrapModule()

C Use a main NgModule

D Bootstrap is not needed

With standalone components, you bootstrap the app by passing the root standalone component to bootstrapApplication().

Explain how to migrate an Angular component from NgModule-based to standalone.

Focus on decorator changes and dependency management.

Describe the benefits of using standalone components over NgModules in Angular.

Think about developer experience and app performance.