Table of Contents
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
./dist/simple-angular-custome-element/polyfills.js& ./dist/simple-angular-custome-element/scripts.js ./dist/simple-angular-custome-element/main.js to destination file ./custome-elements/app-header.js
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 https://github.com/shadowhijackers/simple-angular-custom-element.
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.
Example:
Main.html <!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.
