Declarations, imports, and exports in Angular - Mini Project: Build & Apply

Angular Declarations, Imports, and Exports

📖 Scenario: You are building a simple Angular app with two components: a MessageComponent and a AppComponent. You want to organize your app by declaring components in a module, importing necessary Angular features, and exporting the MessageComponent so it can be used in other modules.

🎯 Goal: Create an Angular standalone module that declares MessageComponent and AppComponent, imports CommonModule, and exports MessageComponent.

📋 What You'll Learn

Create a standalone Angular module named AppModule

Declare two components: MessageComponent and AppComponent

Import CommonModule from @angular/common

Export MessageComponent from the module

💡 Why This Matters

🌍 Real World

Organizing Angular apps into modules with declarations, imports, and exports helps keep code clean and reusable.

💼 Career

Understanding Angular module structure is essential for building scalable enterprise applications and collaborating in teams.

1

Create the Angular components

Create two Angular standalone components named MessageComponent and AppComponent with basic templates. Use the @Component decorator with standalone: true. The MessageComponent template should display the text 'Hello from MessageComponent'. The AppComponent template should display 'Welcome to AppComponent'.

Angular

# Create MessageComponent and AppComponent with standalone: true and simple templates

Hint

Use @Component with standalone: true and simple templates for each component.

2

Create the Angular module and import CommonModule

Create a standalone Angular module named AppModule using the @NgModule decorator. Import CommonModule from @angular/common and include it in the imports array of AppModule. Do not declare or export anything yet.

Angular

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// Create AppModule with @NgModule and import CommonModule

Hint

Use @NgModule with an imports array containing CommonModule.

3

Declare components in the module

Add the declarations array to AppModule and declare both MessageComponent and AppComponent inside it.

Angular

import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// Add declarations array with MessageComponent and AppComponent

Hint

Add declarations with both components inside the @NgModule decorator.

4

Export MessageComponent from the module

Add the exports array to AppModule and export only the MessageComponent so it can be used in other modules.

Angular

import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// Add exports array with MessageComponent

Hint

Add an exports array inside @NgModule with MessageComponent.

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