Declarations, imports, and exports in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of declarations in an Angular module?

Declarations list the components, directives, and pipes that belong to that module. They tell Angular what this module owns and can use internally.

beginner

Why do we use imports in an Angular module?

Imports bring in other Angular modules so you can use their exported components, directives, or pipes inside your module. It's like borrowing tools from a friend’s toolbox.

beginner

What does exports do in an Angular module?

Exports make components, directives, or pipes available to other modules that import this module. It’s like sharing your toys so others can play with them.

intermediate

Can a component be declared in more than one Angular module?

No, a component can only be declared in one module. Declaring it in multiple modules causes errors because Angular wouldn’t know which one owns it.

intermediate

How do imports and exports work together in Angular modules?

A module imports another module to use what it exports. The exporting module shares its components/directives/pipes, and the importing module can then use them inside its templates.

What should you put inside the declarations array of an Angular module?

A Components, directives, and pipes that belong to this module

B Other Angular modules to use

C Services to inject

D CSS stylesheets

Declarations are for components, directives, and pipes that the module owns.

If you want to use a component from another module, what must you do?

A Declare the component again in your module

B Import the module that exports that component

C Add the component to your exports array

D Nothing, Angular finds it automatically

You import the module that exports the component to use it.

What happens if you declare the same component in two different Angular modules?

A The component is ignored in the second module

B The component works in both modules

C Angular throws an error

D Angular merges the declarations

Angular does not allow a component to be declared in more than one module.

Which array in an Angular module controls what is shared with other modules?

A providers

B imports

C declarations

D exports

The exports array lists what this module shares with others.

To use Angular's built-in directives like *ngIf, what must you do?

A Import CommonModule in your module

B Declare NgIf in your declarations

C Export NgIf from your module

D Nothing, they are always available

CommonModule exports built-in directives like NgIf, so you must import it.

Explain how declarations, imports, and exports work together in Angular modules.

Think of declarations as what you own, imports as what you borrow, and exports as what you share.

Describe what happens if you forget to export a component you want to use in another module.

Sharing requires explicit export.

Practice

1. In Angular, what is the main purpose of the declarations array inside an NgModule?

easy

A. To list components, directives, and pipes that belong to this module

B. To import other modules into this module

C. To export components to be used in other modules

D. To configure services for dependency injection

Solution

1. Step 1: Understand the role of declarations in NgModule

   The declarations array is used to tell Angular which components, directives, and pipes belong to this module.

2. Step 2: Differentiate declarations from imports and exports

   Imports bring in other modules, exports share parts with other modules, and declarations define what is inside this module.

3. Final Answer:

   To list components, directives, and pipes that belong to this module -> Option A

4. Quick Check:

   Declarations = Own components/directives/pipes [OK]

Hint: Declarations list what belongs inside the module [OK]

Common Mistakes:

• Confusing declarations with imports
• Thinking declarations export components
• Mixing declarations with service providers

2. Which of the following is the correct way to import the CommonModule into an Angular module?

easy

A. declarations: [CommonModule]

B. imports: [CommonModule]

C. exports: [CommonModule]

D. providers: [CommonModule]

Solution

1. Step 1: Identify where modules are added

   Other modules like CommonModule are added inside the imports array to bring their features in.

2. Step 2: Confirm correct syntax

   Using imports: [CommonModule] is the correct syntax to import a module.

3. Final Answer:

   imports: [CommonModule] -> Option B

4. Quick Check:

   Modules go in imports [OK]

Hint: Modules go inside imports array [OK]

Common Mistakes:

• Putting modules in declarations instead of imports
• Using exports to import modules
• Adding modules to providers

3. Given this Angular module snippet:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my.component';

@NgModule({
  declarations: [MyComponent],
  imports: [CommonModule],
  exports: []
})
export class MyModule {}

Which of the following is true about MyComponent?

medium

A. It can be used in templates of components declared in other modules without importing MyModule

B. It is automatically exported to all modules because it is declared

C. It can only be used inside templates of components declared in MyModule

D. It must be added to imports to be used

Solution

1. Step 1: Check declarations and exports

   MyComponent is declared but not exported in MyModule.

2. Step 2: Understand component visibility

   Declared components are only usable inside the module unless exported. Since MyComponent is not exported, other modules cannot use it.

3. Final Answer:

   It can only be used inside templates of components declared in MyModule -> Option C

4. Quick Check:

   Declared but not exported = local use only [OK]

Hint: Only exported components are usable outside the module [OK]

Common Mistakes:

• Assuming declarations export components automatically
• Thinking imports export components
• Confusing imports with declarations

4. What is wrong with this Angular module code?

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyComponent } from './my.component';

@NgModule({
  declarations: [],
  imports: [BrowserModule, MyComponent],
  exports: [MyComponent]
})
export class AppModule {}

medium

A. exports cannot include components

B. BrowserModule cannot be imported

C. MyComponent should be in providers

D. MyComponent should be in declarations, not imports

Solution

1. Step 1: Identify where components belong

   Components like MyComponent must be listed in declarations, not imports.

2. Step 2: Check imports and exports usage

   Modules go in imports, components go in declarations. Exporting components is allowed.

3. Final Answer:

   MyComponent should be in declarations, not imports -> Option D

4. Quick Check:

   Components belong in declarations [OK]

Hint: Components go in declarations, modules in imports [OK]

Common Mistakes:

• Putting components inside imports
• Thinking exports can't include components
• Confusing providers with declarations

5. You have two Angular modules: SharedModule declares and exports a component ButtonComponent. You want to use ButtonComponent inside FeatureModule. Which is the correct way to set this up?

hard

A. Import SharedModule in FeatureModule without declaring ButtonComponent again

B. Import SharedModule in FeatureModule and add ButtonComponent to declarations in FeatureModule

C. Add ButtonComponent to declarations in FeatureModule only

D. Export FeatureModule from SharedModule

Solution

1. Step 1: Understand exports and imports

   SharedModule exports ButtonComponent, so importing SharedModule in FeatureModule makes ButtonComponent available.

2. Step 2: Avoid redeclaring exported components

   Do not redeclare ButtonComponent in FeatureModule; just import SharedModule.

3. Final Answer:

   Import SharedModule in FeatureModule without declaring ButtonComponent again -> Option A

4. Quick Check:

   Import module exporting component, no redeclaration needed [OK]

Hint: Import module exporting component, no redeclare [OK]

Common Mistakes:

• Redeclaring exported components in importing module
• Not importing the module that exports the component
• Trying to export the importing module instead