Bacancy Bacancy
  • Customers

      Fortune 500 Clients

      Verizon
      Verizon
      The Container Store
      The Container Store
      KPMG
      KPMG
      Academy Sports & Outdoors
      Academy Sports & Outdoors
      Bangkok Bank Ltd
      Bangkok Bank Ltd
      The Children's Place
      The Children's Place
      Edward Jones
      Edward Jones
      Franklin Templeton
      Franklin Templeton
      AdviceWorks
      AdviceWorks
      NatWest Markets
      NatWest Markets
      Bridgestone
      Bridgestone
      United Parcel Service
      United Parcel Service

      Technologies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang PHP AI & ML Java
      Python Salesforce DevOps Block Chain Mobile App Embedded & Hardware
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • what we do

      Experience

      Digital Workplace Services Product Enhancement

      Insights

      AI & Automation Data Analytics

      Innovate

      Blockchain Software Engineering Services Internet of Things (IoT) Data Science Artificial Intelligence Machine Learning

      Accelerate

      Agile & DevOps Cloud - Bacancy Combalt Digital Process Automation Open Source Microsoft Dynamics Salesforce

      Assure

      Quality Assurance IT Staff Augmentation

      Embedded & Hardware

      Product Engineering Analog Design Services FPGA Engineering Service Wireless Design Embedded Software Design

      not list

      Hardware Engineering Power Engineering IoT Hardware
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • who we work with

      Industries

      Banking Financial services & Insurance Startups Oil & Gas

      not list

      Healthcare Life Science Real Estate & Construction Logistics
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • about us

      Culture

      Agile Mindset Bacancy Values Bacancy Culture

      About Company

      About Us Leadership Team Awards & Recognition Infrastructure

      not list

      Customer Reviews Our Locations Partnership Media Coverage

      WE ARE

      GREAT PLACE TO WORK - CERTIFIEDTM

      Building and sustaining High-Trust, High-Performance CultureTM

      Bacancy Great Place to Work
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • technology

      Front End

      Angular Reactjs Vue.js UI/UX

      Platforms

      MS Dynamics Salesforce

      Back End

      Ruby on Rails Node.js Golang Laravel .NET Java Python

      Mobile

      React Native Flutter Android iOS

      Cloud

      AWS DevOps

      QA

      Automation Testing Software Testing

      Embedded & Hardware

      Embedded
      bacancy

      World-class expertise,Delivered

      get quote
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • PRODUCTS

      EV Products

      Battery Management System Motor Controller CCS2 Controller Explore All

      not list

      BMS Manufacturers and Suppliers DC Fast Charger
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
hire us

Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

800+

Agile enabled employees

06

World wide offices

10+

Years of Experience

05

Agile Coaches

14

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

  • Customers
      Technologies
      • React JS
      • Angular JS
      • Vue JS
      • Node JS
      • AI & ML
      • Explore All
      Fortune 500 Clients
      • Verizon
      • The Container Store
      • KPMG
      • Academy Sports & Outdoors
      • Bangkok Bank Ltd
      • The Children's Place
      • Edward Jones
      • Franklin Templeton
      • AdviceWorks
      • NatWest Markets
      • Bridgestone
      • United Parcel Service
  • What we do
      Experience
      • Digital Workplace Services
      • Product Enhancement
      Insights
      • AI & Automation
      • Data Analytics
      Innovate
      • Blockchain
      • Software Engineering Services
      • Internet of Things (IoT)
      Accelerate
      • Agile & DevOps
      • Cloud - Bacancy Combalt
      • Digital Process Automation
      • Open Source
      • Microsoft Dynamics
      • Salesforce
      • Service Experience Transformation
      Assure
      • Testing
      • Resource Augmentation
      Embedded & Hardware
      • Product Engineering
      • Analog Design Services
      • FPGA Engineering Service
      • Wireless Design
      • Embedded Software Design
      • Hardware Engineering
      • Power Engineering
      • IoT Hardware
      • AL/ML
  • who we work with
      Industries
      • Banking Financial services & Insurance
      • Startups
      • Oil & Gas
      • Healthcare Life Science
      • Real Estate & Construction
      • Logistics
  • About Us
      About Company
      • About Us
      • Leadership Team
      • Awards & Recognition
      • Infrastructure
      • Our Locations
      • Partnership
      Culture
      • Agile Mindset
      • Bacancy Values
      • Bacancy Culture
  • Technology
      Front End
      • Angular
      • Reactjs
      • Vue.js
      • UI/UX
      Platforms
      • MS Dynamics
      • Salesforce
      Back End
      • Ruby on Rails
      • Node.js
      • Golang
      • Laravel
      • .NET
      • Java
      • Python
      Mobile
      • React Native
      • Flutter
      • Android
      • iOS
      Cloud
      • AWS
      • DevOps
      QA
      • Automation Testing
      • Software Testing
      Embedded & Hardware
      • Embedded
      Explore All
  • Products
    • Battery Management System
    • Motor Controller
    • CCS2 Controller
    • BMS Manufacturers and Suppliers
    • DC Fast Charger
    • Explore All
  • Careers
  • Work @ Bacancy
  • Blogs
  • Resources
  • Customer Reviews
  • Contact
  • Get Quote
Angular Elements

Micro Frontend Angular Tutorial: Build Micro Frontends Using Angular Elements

Ankit Vadi
Ankit Vadi Software Engineer
Last Updated on September 24, 2021
August 12, 2019 6 min read

These days front-end development has become a new buzzword across the web development industry. It has progressed from pure HTML and CSS design to high interactive apps, better accessibility, testability, and security. Therefore, developers have divided the coding work into front-end and back-end development to meet the changing trend in the app development process. Moreover, the application functionality proliferates, and at some point, it becomes unfeasible when it comes to team up with multiple developers on a single code base. That’s the reason the term “Micro front ends” has become prominent, which allows you to break up the front-end code into easy-to-maintain parts.

In this Micro Frontend Angular Tutorial, we will learn about Micro frontend and how to implement it with the help of the Micro Frontend Angular example.

Table of Contents

1. What is Micro Frontend?

2. Advantages of Micro Frontends

3. How to Split Application into Micro Frontends?

4. Micro Frontend Angular Example: Steps to Build Micro Frontend

5. Conclusion

What is Micro Frontend?

Micro Frontend can be defined as a design approach of splitting the large application into multiple small frontend applications for making the development process simpler. Projects are of different types, sizes, and requirements. If the project consists of 4-5 pages then a single team can handle the project. But that’s not the case every time. Sometimes your app can be the part of another complex and large app consisting lots of features and functionalities to be implemented by the different developer teams. Thus
various teams can work simultaneously on a complex project with the help of a single frontend codebase. Micro Frontend provides accuracy in developing and deploying enterprise-level applications without much hustle.

Moving ahead in Micro Frontend Angular Tutorial.

Advantages of Micro Frontends

Let’s see what are the advantages of Micro Frontends:

  • Small and Independent applications
  • Easy to implement and understand the applications
  • Easy development and deployment of applications
  • Easier to test the apps.
  • Faster and smooth application development
  • Easy CI/CD
  • No codebase sharing
  • Can easily modify the structure, architecture, and code of the application

How to Split Application into Micro Frontends?

Moving further in the micro frontend Angular tutorial, we will now learn how to divide large Angular app into various Angular micro frontends. There are no particular rules or approaches of splitting the app. We can divide it according to the project’s needs. Let’s discuss the possible ways.

Based on Feature

Assume your app consists of three features – Dashboard, Profile, Admin.
So, you can separate the applications based on the features. This is the most straight-forward approach. You can make an individual app separating the app by these features and manage its mounting/unmounting with the help of parent application, say Main.js.

Based on Domain

Assume your app consists of three main domains – User, Admin, and Payment. You can split the application based on User domain, Admin domain, and Payment domain which consists independent features and functionalities of respective domain. And then again you can mount/unmount with the help of parent application.

Based on Page

Assume your app consists of three pages – Page 1, Page 2, and Page 3. You can divide the application based on pages. The app would have individual pages having their respective functionalities. And just like the above approaches, you can mount/unmount these separate small apps with the help of parent application.

So, enough of the theory. It’s time to build a demo for Micro Frontend Angular.

Micro Frontend Angular Example: Steps to Build Micro Frontend

Now let’s proceed with the steps that one should use to build micro front-end for angular app development and how are micro frontends implemented. We’ll give you a brief explanation of the development process by developing two apps using micro front-ends, which are travel booking and bus booking:

Step 1– Whenever you build an app, you will require a few dependencies to develop and run the Angular custom elements. You can then install the following dependencies within bus booking by using below-mentioned commands:

Step 1

These dependencies can be installed through npm. @angular/elements. This provides external support for Angular element that is the significant extension of Angular CLI.

Note: You should update the version for the document-register-element module to 1.8.1 in bus booking/ package.json.

Step 2– Now, you should also install the HTTP-server module within the bus booking example:

step2

Step 3– All the angular app developers should now create a component, which is booking in bus booking/ src/app. Further, you can modify these components as you want, and we’ve done some changes, which are mentioned below:

step 3

As per the above-mention image, your command should be bus/src/booking/booking.component.html

booking component

Here the code used is: bus-booking/ src/app/booking/booking-components.ts

Step 4– Next move is all about defining a booking component as a custom element in bus-booking/src/app/.modules.ts

step 4

If you want to develop the app in a single JS file, you should inform the angular and ask them to use the ngx-build-plus module. Modify the code bus-booking/angular.json in three places, which are as follows:

angular json

Step 5– Running the project:

For building the app in one JS file, you need to follow the below-mentioned commands:

step 5

  • With output hashing, you find no more hashes in the files name.
  • On the other hand, a single bundle true will combine all the files into a single JS file.

For starting the server, below mentioned command:

bus booking

In the same way, you should create another custom element, which is a train booking and then run the server with port 8082.

port 8082

Step 6– Covering up a custom element

Let’s add custom elements of train booking and bus booking in the travel-booking app. You should modify this /travel-booking/index.html accordingly:

travel-booking

In this, Angular need zones, and custom-elements-es5-adapter.js offer support to a custom element within the browser. We also used main.js for custom elements. To dominate the default server port, modify travel-booking/angular.json, which showed in the image:

travel booking code

Now run the application using ng.serve, and your app is all set to launch!

Conclusion

As the micro frontends provide the advantage of maintainability, technology liberty, and easy deployment, here are some crucial factors that should be considered for successful implementation:

  • Perform more in-depth analysis to break the application modules logically.
  • The interface should be interactive, and messages contract to communication between micro applications
  • All the micro applications have self-contained features
  • Prepare a test strategy for each micro integration point
  • Remember, communication is the key that enables teams to communicate properly on one project.

Looking To Partner With Trusted Angular App Development Company?

If you’re in search of a trusted angular app development company, then get in touch with us today. We at, Bacancy Technologies have been offering AngularJS development services, since its initial release. Hire AngularJS Developer from Bacancy Technology to get cost-effective and efficient offshore web and mobile application development services. For more, put forward your quote here or mail us your requirement at www.bacancytechnology.com.


Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !

Related Articles

Whats new in Angular 14
Aayush Gairola

June 13, 2022

AngularJS

What’s New in Angular 14?

By : Aayush Gairola

Quick Summary: The Google-developed framework - Angular has released its latest v14 update with stand-alone components, optional NGmodules, typed reactive forms, and better template diagnostics....

6 Minute Read
Read More
Angular Performance Optimization
Mrinal Saraswat

May 31, 2022

AngularJS

Ultimate Guide to Angular Performance Optimization in 2022

By : Mrinal Saraswat

Quick Summary: Angular is the fourth highly used framework for application development. It brings scalability, reliability, and security to your web and mobile application. To...

6 Minute Read
Read More
Cypress Automation Testing Tutorial
Archita Nayak
Parth Sardhara

May 9, 2022

AngularJS

Cypress Automation Testing Tutorial (Part 1)

By : Archita Nayak & Parth Sardhara

Introduction We build a good website using different technologies such as React, Angular, and other modern technologies. In terms of testing, the client wants to...

5 Minute Read
Read More

How Can We Help You?

india India (HQ)

1207-1210, Time Square, Thaltej-Shilaj Road, Ahmedabad

USA USA

4995 NW 72nd Ave, Suite 307 Miami, FL 33166

canada Canada

71 Dawes Road, Brampton, On L6X 5N9, Toronto

australia-flag Australia

351A Hampstead Rd, Northfield SA 5085

UAE UAE

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

sweden Sweden

Junkergatan 4, 126 53 Hagersten


Great Place to Work

Get in Touch

call-yellow-icon

Contact Number

+1 347 441 4161

gmail-icon

Email Us

[email protected]


  • Brochure
  • Quality Assurance
  • Resources
  • FAQs
  • Customer Reviews
  • Tutorials
  • Privacy Policy
  • Sitemap
  • Contact Us
  • Employee
  • bacancy google review 4.6
    bacancy google review
    bacancy glassdoor review 4.5
    bacancy glassdoor review
    bacancy clutch review 4.8
    bacancy clutch review
    bacancy goodfirms review 4.5
    bacancy goodfirms review
    X

    Get Our Newsletter

    Be The First To Get The Latest Updates And Tutorials.

    Request A Free Consultation