Module 10: Creating the Angular Host Application (Micro Frontend Architecture)

Creating the Angular Host Application (Micro Frontend Architecture)

Lesson Overview

In this lesson, we will start building the foundation of our Micro Frontend architecture.

We will:

• Create the Host application
• Configure the development environment properly
• Follow professional Angular setup practices used in real-world projects

The Host application is the main shell of our system.

It will be responsible for loading and managing all other micro frontends.

Step 1: Checking the Node.js Version

Before creating any Angular project, we must confirm the Node.js version.

In this course, we are using:

Node.js v23

Check your Node version using:

node --version

If you are using NVM (Node Version Manager) and don't have Node 23 installed, install it with:

nvm install 23

Then activate it:

nvm use 23

This ensures:

• consistent builds
• compatibility with Angular 20
• fewer environment-related issues

Step 2: Cleaning the Terminal

Clear the terminal to keep things clean and readable:

clear

This is not required, but it helps maintain focus during development.

Step 3: Creating the Project Workspace

Next, we create a folder that will contain all micro frontend projects.

This is important because:

• we will have multiple Angular applications
• each app must live side-by-side
• the structure should reflect the architecture

Create the folder:

mkdir micro-frontend
cd micro-frontend

This folder will contain:

• the Host application
• all Remote (micro frontend) applications

Step 4: Why We Don't Install Angular CLI Globally

In professional environments, you often work with:

• different Angular versions (14, 17, 19, 20)
• multiple projects at the same time

Installing Angular CLI globally causes:

• version conflicts
• unexpected build issues

Instead, we use npx, which:

• runs Angular CLI locally
• installs the correct version per project
• avoids compatibility problems

This is the recommended industry practice.

Step 5: Creating the Angular Host Application

We will now create the Host application using Angular 20.

Run the following command:

npx @angular/cli@20 new vendas

Explanation:

• npx → runs Angular CLI without global installation
• @angular/cli@20 → ensures Angular version 20
• new vendas → project name (vendas will be our Host app)

Step 6: Angular Project Setup Options

During project creation, Angular CLI will ask a few questions.

Use the following options:

• Stylesheet format → CSS
• Server-Side Rendering (SSR) → No
• Zone.js → No

These settings:

• keep the project simple
• avoid unnecessary complexity
• are ideal for Micro Frontend setups

Angular will now generate the project structure.

Step 7: Opening the Project in VS Code

Once the project is created, open it in VS Code:

code .

Important:

• Open the parent folder (micro-frontend)
• Do not open only the vendas folder

This allows you to:

• view all micro frontend projects together
• manage architecture more clearly
• avoid confusion as more apps are added

Step 8: Verifying the Project Structure

Inside the vendas folder, check:

• package.json
• Angular version (should be Angular 20)
• default project files

This confirms the Host application was created successfully.

Step 9: Running the Host Application

Navigate into the Host project:

cd vendas
npm start

What happens here:

• npm start runs the script defined in package.json
• Angular executes ng serve
• The development server starts

The application will be available at:

http://localhost:4200

Step 10: Verifying the Application

Open your browser and visit:

http://localhost:4200

You should see the default Angular welcome screen:

"Hello Vendas"

This confirms:

• Angular is running correctly
• the Host application is ready
• the development environment is set up properly

What We Achieved in This Lesson

At this point, we have:

• Installed and configured Node.js correctly
• Created a professional project workspace
• Built the Angular Host application
• Verified everything runs successfully

This Host application is the core shell of our Micro Frontend architecture.

What's Next

In the next lesson, we will:

• Create the Remote Angular applications
• Configure them as Micro Frontends
• Prepare them for integration using Module Federation

This is where the architecture truly comes to life.

Schoolabe Insight

The Host application should stay lightweight.

Its job is not business logic.

Its job is orchestration.

Clean architecture always starts with a clean foundation.