At Agira, Technology Simplified, Innovation Delivered, and Empowering Business is what we are passionate about. We always strive to build solutions that boost your productivity.

Build A Micro-Frontend Application Using Angular Elements

  • By Nagaraj Ravi
  • December 30, 2019

Working on the frontend application is one of the coolest but complex works that a developer can do. The changes in front end development are the most common thing in web development. Especially, when we are working on the large scale frontend application. There will be a constant need to face a lot of challenges. One of the major problems is deploying the whole application even when the simple quick fix has given.

The second thing is sharing the whole application to every developer makes it more vulnerable as there are chances of stealing the code for the entire application. So, the monolithic method will fail in large scale applications. But, these types of issues can be solved by micro-frontend. Actually, this methodology is derived from the microservice methodology. Here, I am going to show you how to develop the micro-frontend application in Angular. Before getting into that, let’s get to know the difference between monolithic frontend application and micro frontend application.

Monolithic frontend:

The monolithic frontend is the whole application developing in the single project itself. This is the most common method. 

Micro frontend: 

 The micro frontend is the project that is split into multiple modules and these modules are developed in different projects.  Then finally, integrate everything into one single application. Which is the important thing that if you are going to develop a large scale application?

Read More: 7 Most In-Demand Programming Languages To Learn In 2020

How to create Micro frontend application using Angular

Angular Micro-frontend web application is created by Angular’s custom elements. The Angular custom elements are the web components and each custom element visualizes some section on the web page.

For example, consider we are creating an E-Commerce application in micro frontend architecture using Angular. The header, filter, and product items section are made by Angular custom elements. Those elements are integrated into an Angular application or event any basic JS framework or HTML application. So we need to know how to create an Angular custom element for creating an Angular micro-frontend application. let us see the steps to create an Angular custom element(web component). 

Steps to Create an Angular Custom Element.

1. Create an Angular application without routing 

  ng new simple-angular-custom-element

2. Go to the project 

cd simple-angular-custom-element/

3. Add the angular elements

ng add @angular/elements

4. Add the component 

ng g component header

5. Change the TS target version into ES2015

 "target": "es2015",

6. Empty the Appcomponent of Bootstrap array in app module

 bootstrap: []

7. Create an Element by following

 ngDoBootstrap() {
        const headerElement = createCustomElement(HeaderComponent, {injector: this.injector});
        customElements.define('app-header', headerElement);

8. Take the build

    ng build --prod --output-hashing=none

9. Merge the ./dist/simple-angular-customer-element/runtime.js  

to  destination file

Read More : Top 10 Angular Best Practices You Must Know

Steps to Create a Micro-frontend Application  

The micro frontend application is creating by web components, and here it is created by Angular Custome elements. Now, we will discuss how to integrate the created web components into in single HTML file or to integrate it in any javascript frameworks such as Angular JS, React JS, or any others.

Also Read: Animate Dynamic Components In Angular

Run the `/custom-elments/app-header.js`  in any server and create an HTML file and include the js file as `localhost:8080/custome-elments/app-header.js`  in the script tag.

Then, call the element as follows in the HTML file.

<app-header title="ANGULAR CUSTOME HEADER ELEMENT"></app-header>

You can see the sample source code in the following GitHub repository

You can use the event binding and property binding of the angular application to send and receive the data from the custom elements. Thereby, data sharing will be easy between different custom elements. So, it helps to make a micro frontend application effortlessly.


<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Micro frontend</title>   
<script src="localhost:8080/custome-elments/app-header.js"></script>   
<script src="localhost:8081/custome-elments/app-filters.js"></script>   
<script src="localhost:8082/custome-elments/app-products.js"></script>   
<script src="localhost:8083/custome-elments/app-footer.js"></script> </head> <body>   <header>     
<app-header title="Micro frontend"></app-header>   </header>   <section>     
<app-filters></app-filters>   </section>   <main>     <app-products></app-products>   
</main>  <footer>     <app-footer></app-footer>   </footer> </body> </html>

Here, all custom components script files are running on different servers. This way is easier for deployments and maintaining the projects. I created the micro frontend application by using Angular custom elements, and integrated that in the simple HTML file. You can also integrate that in your own way.

Hope it is well-explained about creating the micro frontend application using Angular. If you have doubts, questions, or suggestions, please feel free to comment below.

Get in touch with us to build a world-class web application at affordable prices by hiring the most skilled developers in the tech industry. Contact now.

Looking for a Tech partner to dominate the digital world?

Nagaraj Ravi

A zealous full stack web developer with 3 years of professional experience. Hybrid application development and in developing Open-source projects are the best of my list. Out of passion ethical hacking is one of my hobbies. Yet, I am good at analyzing Web Security. And I teach machines with my expertise in Robotics and Machine learning.