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.