Feature modules for organization in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a feature module in Angular?

A feature module is a way to organize related code in Angular. It groups components, services, and other code that belong to a specific feature or area of the app. This helps keep the app clean and easier to manage.

beginner

Why use feature modules instead of putting everything in the root module?

Using feature modules helps keep the app organized and faster to load. It allows loading parts of the app only when needed (lazy loading), and makes the code easier to understand and maintain.

intermediate

How do you create a feature module in Angular?

You create a feature module by making a new Angular module file with the @NgModule decorator. You declare components and import needed modules inside it. Then you import this feature module into the root or other modules.

intermediate

What is lazy loading in the context of feature modules?

Lazy loading means loading a feature module only when the user needs it, not when the app starts. This makes the app start faster and saves resources.

intermediate

Can feature modules have their own routing in Angular?

Yes, feature modules can have their own routing configuration. This lets each feature manage its own navigation paths, making the app modular and easier to update.

What is the main purpose of a feature module in Angular?

A To organize related code for a specific feature

B To replace the root module

C To style components

D To handle HTTP requests

Feature modules group related code for a specific feature to keep the app organized.

Which decorator is used to define a feature module in Angular?

A @Component

B @NgModule

C @Directive

D @Injectable

The @NgModule decorator defines an Angular module, including feature modules.

What does lazy loading a feature module do?

A Loads the module only when needed

B Prevents the module from loading

C Loads the module immediately at app start

D Loads all modules at once

Lazy loading delays loading a feature module until the user navigates to it.

Can feature modules have their own routing configuration?

A Routing is not related to modules

B No, only the root module can have routing

C Only services can have routing

D Yes, feature modules can have their own routing

Feature modules can define their own routes to manage navigation within that feature.

Which of these is NOT a benefit of using feature modules?

A Better app organization

B Faster app startup with lazy loading

C Automatically styles components

D Easier code maintenance

Feature modules help organize code and improve loading, but they do not style components automatically.

Explain what a feature module is and why it is useful in Angular applications.

Think about how breaking an app into parts helps manage complexity.

Describe how lazy loading works with feature modules and its benefits.

Imagine only opening a room in a house when you enter it.

Practice

1. What is the main purpose of a feature module in Angular?

easy

A. To store global styles for the app

B. To replace the root AppModule entirely

C. To group related components, directives, and services for better organization

D. To handle routing only

Solution

1. Step 1: Understand feature module role

   Feature modules group related parts like components and services to keep code organized.

2. Step 2: Compare other options

   Feature modules do not replace AppModule, are not only for routing, and do not store styles.

3. Final Answer:

   To group related components, directives, and services for better organization -> Option C

4. Quick Check:

   Feature modules organize related code = D [OK]

Hint: Feature modules group related code parts [OK]

Common Mistakes:

• Thinking feature modules replace AppModule
• Believing feature modules only handle routing
• Confusing feature modules with style storage

2. Which of the following is the correct way to import a feature module named ProductsModule into the root module?

easy

A. declarations: [ProductsModule]

B. imports: [ProductsModule]

C. providers: [ProductsModule]

D. bootstrap: [ProductsModule]

Solution

1. Step 1: Recall Angular module metadata

   Feature modules are imported using the imports array in @NgModule.

2. Step 2: Understand other arrays

   declarations is for components/directives, providers for services, bootstrap for root component.

3. Final Answer:

   imports: [ProductsModule] -> Option B

4. Quick Check:

   Feature modules go in imports = B [OK]

Hint: Import feature modules inside imports array [OK]

Common Mistakes:

• Putting modules in declarations array
• Adding modules to providers array
• Using bootstrap array for modules

3. Given this code snippet in app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ProductsModule } from './products/products.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ProductsModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

What will happen if ProductsModule declares and exports a component ProductListComponent and you use <app-product-list> in AppComponent template?

medium

A. The ProductListComponent will render correctly inside AppComponent

B. Angular will throw a template parse error because ProductListComponent is not declared in AppModule

C. The app will compile but ProductListComponent will not display anything

D. The app will crash at runtime with a component not found error

Solution

1. Step 1: Understand module imports and declarations

   Since ProductsModule is imported in AppModule, its declared components are available in AppModule's templates.

2. Step 2: Check component usage in template

   Using <app-product-list> in AppComponent works because ProductListComponent is exported by ProductsModule.

3. Final Answer:

   The ProductListComponent will render correctly inside AppComponent -> Option A

4. Quick Check:

   Imported module components usable in templates = A [OK]

Hint: Imported module components can be used in root templates [OK]

Common Mistakes:

• Thinking components must be declared in AppModule to use
• Assuming runtime crash instead of compile error
• Believing imported components won't render

4. You have a feature module OrdersModule but when you try to use its component OrderListComponent in AppComponent, Angular shows an error: 'app-order-list' is not a known element. What is the most likely cause?

medium

A. OrdersModule was not imported into AppModule

B. OrderListComponent was not declared in OrdersModule

C. OrdersModule was added to declarations instead of imports

D. OrderListComponent selector is misspelled in the template

Solution

1. Step 1: Check module import

   If OrdersModule is not imported in AppModule, its components are unknown in root templates.

2. Step 2: Review other options

   While declaration or selector errors cause issues, the common cause for 'not a known element' is missing module import.

3. Final Answer:

   OrdersModule was not imported into AppModule -> Option A

4. Quick Check:

   Missing module import causes unknown element error = C [OK]

Hint: Always import feature modules in AppModule to use their components [OK]

Common Mistakes:

• Forgetting to import the feature module
• Adding module to declarations array
• Ignoring selector typos

5. You want to organize your Angular app by creating two feature modules: UsersModule and AdminModule. AdminModule needs to use components from UsersModule. How should you set up the modules to allow this?

hard

A. Use providers array to share components between modules

B. Import AdminModule into UsersModule and export needed components from AdminModule

C. Declare all components in both modules to share them

D. Import UsersModule into AdminModule and export needed components from UsersModule

Solution

1. Step 1: Understand module dependency direction

   If AdminModule needs UsersModule components, UsersModule must be imported into AdminModule.

2. Step 2: Export components from UsersModule

   Only exported components from UsersModule are visible to AdminModule.

3. Final Answer:

   Import UsersModule into AdminModule and export needed components from UsersModule -> Option D

4. Quick Check:

   Import dependency module and export components = A [OK]

Hint: Import and export modules to share components [OK]

Common Mistakes:

• Importing modules in wrong direction
• Declaring components in multiple modules
• Using providers to share components