Declarations, imports, and exports in Angular - Step-by-Step Execution

Concept Flow - Declarations, imports, and exports

Create Component/Directive/Pipe

↓

Declare in @Component/@Directive/@Pipe

↓

Add to declarations array in @NgModule

↓

Import other modules in imports array

↓

Export components/modules in exports array

↓

Use exported components in other modules

↓

Application runs

This flow shows how Angular components or modules are declared, imported, and exported to be used across the app.

Execution Sample

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: '<p>Hello!</p>'
})
export class HelloComponent {}

Defines an Angular component that can be declared and used in modules.

Execution Table

Step	Action	Declarations Array	Imports Array	Exports Array	Result
1	Create HelloComponent	[]	[]	[]	Component class exists
2	Declare HelloComponent in declarations	[HelloComponent]	[]	[]	Component registered in module
3	Import CommonModule	[HelloComponent]	[CommonModule]	[]	Common directives available
4	Export HelloComponent	[HelloComponent]	[CommonModule]	[HelloComponent]	Component usable outside module
5	Import this module in AppModule	[]	[ThisModule]	[]	HelloComponent usable in AppModule
6	Use <app-hello> selector in AppComponent template	N/A	N/A	N/A	HelloComponent renders 'Hello!'
7	Exit	N/A	N/A	N/A	Application runs with HelloComponent visible

💡 Application runs after declarations, imports, and exports are set up correctly

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
declarations	[]	[HelloComponent]	[HelloComponent]	[HelloComponent]	[HelloComponent]	[HelloComponent]
imports	[]	[]	[CommonModule]	[CommonModule]	[CommonModule, ThisModule]	[CommonModule, ThisModule]
exports	[]	[]	[]	[HelloComponent]	[HelloComponent]	[HelloComponent]

Key Moments - 3 Insights

Why do we need to declare a component in the declarations array?

Declaring a component registers it with the Angular module so Angular knows about it and can compile it. See execution_table step 2 where HelloComponent is added to declarations.

What is the purpose of the imports array in a module?

The imports array brings in other modules so their exported components/directives/pipes can be used. In step 3, CommonModule is imported to use common Angular directives.

How does exporting a component affect its usage?

Exporting a component makes it available to other modules that import this module. Step 4 shows HelloComponent added to exports, allowing usage in AppModule (step 5).

Visual Quiz - 3 Questions

Look at the execution table, at which step is HelloComponent made usable outside its module?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Check the exports array column in the execution_table to see when HelloComponent is added.

According to the variable tracker, what is the state of the imports array after step 3?

A []

B [HelloComponent]

C [CommonModule]

D [ThisModule]

💡 Hint

Look at the imports row in variable_tracker after step 3.

If we forget to add HelloComponent to declarations, what will happen?

A Angular will throw an error about unknown component

B Component will render normally

C Component will be exported automatically

D Imports array will include the component

💡 Hint

Refer to key_moments about the importance of declarations and execution_table step 2.

Concept Snapshot

Declarations, imports, and exports in Angular:
- Declare components/directives/pipes in declarations array to register them.
- Import other modules in imports array to use their exported features.
- Export components/modules in exports array to share them with other modules.
- Standalone components can be imported directly without declarations.
- Proper setup enables component usage across the app.

Full Transcript

In Angular, components and other building blocks must be declared in a module's declarations array so Angular knows about them. Modules can import other modules to use their exported components and directives. To share components with other modules, they must be added to the exports array. This flow ensures components are registered, dependencies are included, and sharing is enabled. The example shows creating a HelloComponent, declaring it, importing CommonModule, exporting the component, and then using it in another module. Missing declarations causes Angular errors. Imports bring in needed features. Exports make components available outside. This setup is essential for Angular apps to run correctly.

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