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

Need a 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

Need a 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

Need a 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

Need a hint?

Add an exports array inside @NgModule with MessageComponent.