DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Delivering Your Code to the Cloud With JFrog Artifactory and GitHub Actions
  • Monolithic Decomposition and Implementing Microservices Architecture
  • Migrating Spring Java Applications to Azure App Service (Part 1: DataSources and Credentials)
  • Testing Serverless Functions

Trending

  • Building Enterprise-Ready Landing Zones: Beyond the Initial Setup
  • It’s Not About Control — It’s About Collaboration Between Architecture and Security
  • How Large Tech Companies Architect Resilient Systems for Millions of Users
  • Performing and Managing Incremental Backups Using pg_basebackup in PostgreSQL 17
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Deployment
  4. Achieving Micro-frontend Architecture Using Angular Elements

Achieving Micro-frontend Architecture Using Angular Elements

Scaling micro-frontends using Angular elements: Hosting on Azure cloud. The micro-frontends architecture creates a buzz in the web app development world.

By 
Bharat Ghode user avatar
Bharat Ghode
·
Updated Mar. 01, 21 · Tutorial
Likes (4)
Comment
Save
Tweet
Share
36.1K Views

Join the DZone community and get the full member experience.

Join For Free

There are several open-source and third-party libraries that have become de-facto standards to reduce development effort and keep complexity out. But as applications tend to become complicated over time, demanding on-the-fly scalability and high responsiveness, a micro-frontend architecture using Angular elements serves as the need of the hour in fulfilling these criteria. In this blog post, we discuss the importance of building a micro frontend using Angular elements and hosting it on Microsoft Azure, along with a technical demonstration of how we can create a micro-frontend using Angular.

What Is Micro-frontend Architecture?

Micro-frontend is a design approach in which app developers split the coding task into multiple frontend apps to ease the app development process. This helps many teams to work simultaneously on a large and complex app using a single frontend code. A micro-frontend architecture offers a more manageable, independent, and maintainable code. Using micro-frontend architecture, development teams can easily integrate, innovate, and iterate apps. Importantly, it encourages making changes to apps like write, rewrites, updates, and improvements in an incremental manner. In a nutshell, it allows enterprises to develop and deploy enterprise-level apps with greater accuracy.

If you’re still over the fence about the need to adopt the micro-frontend architecture, let’s take a closer look at what micro-frontend development can mean for your web apps: 

Smoother Transition CI/CD

Each app integrates and deploys separately, making the CI/CD process a lot easier. For instance, when you introduce a new feature, you do not have to worry about the entire application since all functionalities are independent. 

Stacks and Versions

You can choose to have your stack for each app and have different versions of the same stack. For example, your team can have the flexibility and time to test newer versions of the same stack. 

No Code Sharing

When building large apps, most enterprises tend to share code across features but may lead to scaling issues later when bugs and interdependency over the app grow bigger. The good thing is, this does not apply with the micro-frontends as code sharing is not required for every component.

Easily Change Architecture

Extending the old architecture becomes crucial at times, and you may not have the developer’s availability for better implementation. But with a micro-frontend application, you can develop new features with the latest stack and deploy them independently.

There are two sides to each coin; likewise, there are some constraints of micro front-end:

  • It is challenging to work with various versions at the same time.
  • Testing is difficult to compare due to different environments.
  • Embedding HTML (iFrames) can cause huge accessibility challenges.
  • Each team is autonomous with separate frameworks and codebases, which lead to ambiguous browsers.

It is advisable to thoroughly check all the pre-requisites and the maturity of your enterprise before jumping on to the micro-frontend trend.

Build Micro-frontends With Azure: A Cloud Platform 

Microsoft Azure is a popular service for cloud computing. There are over 600 services that come under the umbrella of Azure which enables creating, testing, management, and deployment of applications and services. A wide variety of platform services are hosted on Azure including Microsoft Software as a Service (SaaS), Platform as a Service (PaaS), and Infrastructure as a Service (IaaS).

Source: Mindtree, 2019

We have depicted a sample of Azure deployment architecture to build micro-frontends for better understanding. The core solutions components are as follows: 

Azure CDN

Azure CDN (Content Delivery Network) allows the effective delivery of content for consumers from different geographies. This helps the content reach faster and closer to consumer regions. 

Web-App Services

The angular frontend is deployed on Azure Web App services, front-ended by the application gateway with WAF security layer. 

API — App Services

Custom backend microservices are deployed on API app services. App Services are fully managed Azure-native PaaS offerings. 

Integration

Third-party services are integrated through the API Gateway. On-premises applications are integrated into the Azure cloud through the express route, while the communication goes through the API gateway. 

Here are the primary considerations before you opt for micro-frontend architecture:  

  • Infrastructure scaling — Being a solely PaaS offering from Azure, it can scale based on your business needs.
  • Reduced maintenance costs — Cloud-native solutions do not require any maintenance, i.e. App Services, API Gateway, etc.
  • IaaC — The ideal environment is regularly maintained by the Infrastructure-as-a-Code template.

Technical Demonstration of How We Can Create a Micro-frontend in Angular

In this section, we will show how you can create a micro-frontend using Angular. We will present a micro-frontend tutorial focusing on concrete implementation, highlighting the important steps you should consider building in micro-frontend architecture.

Step 1

Let’s assume that you have the main container and the index.html file that includes the app-root route. 

HTML
 




xxxxxxxxxx
1
15


 
1
// main container app
2
<!doctype html>
3
<html lang="en">
4
<head>
5
<meta charset="utf-8">
6
<title>Main Container</title>
7
<base href="/">
8
<meta name="viewport" content="width=device-width, initial-scale=1">
9
<link rel="icon" type="image/x-icon" href="favicon.ico">
10
</head>
11
<body>
12
<app-root></app-root>
13
<div id="app-one"><app-one></app-one></div>
14
</body>
15
</html>



Step 2

In the second step, you need to go to the project and install the two packages using npm as shown below: 

  1. npm install @angular/element --save
  2. npm install ngx-build-plus --save

The Angular element will allow you to create a custom element and ngx-build-plus will allow you to create a single .js file.

JavaScript
 




xxxxxxxxxx
1


 
1
//To create micro app, we need custome element and need to change build
2

          
3
npm install @angular/elements --save
4
npm install ngx-build-plus --save



Step 3

You need to presume that you are developing HomeComponent as a micro-app in the third stage of designing a micro web app for app.module.ts. You need to insert the component into the app.module.ts and adjust some code under the ngDoBootstrap function in the AppModule, where you need to create an element where we have built 'app-one' as myCustomElements for example. 

JavaScript
 




xxxxxxxxxx
1
14


 
1
//app.module.ts
2

          
3
import { HomeComponent } from './Home/home.component';
4

          
5
export class AppModule {
6
  constructor(private injector: Injector) {
7
  }
8

          
9
  ngDoBootstrap() {
10
    const myCustomElement = createCustomElement(HomeComponent, { injector: this.injector });
11
    customElements.define('app-one', myCustomElement);
12
  }
13
}



Step 4 

Then, in the fourth step, in your Angular.js file, you need to change some of the building structure into the architecture. Here we need to use the ngx-build-plus, instead of the Angular build default commands.

JSON
 




xxxxxxxxxx
1


 
1
In angular.json
2

          
3
"architect": {  "build": {    "builder": "ngx-build-plus:build",
4
"serve": {    "builder": "ngx-build-plus:dev-server",
5
"test": {    "builder": "ngx-build-plus:karma",



Step 5

In the fifth step, more parameters need to be applied to the standard commands. Run the following script to convert the project into a single .js file. Firstly, output-hashing=none would stop hashing the file names. And secondly, single-bundle true will bundle all the compiled files into a single .js file.

JavaScript
 




xxxxxxxxxx
1


 
1
ng build --prod --output-hashing none --single-bundle true
2

          
3
#1 --output-hashing none : avoid hashing the file names.
4

          
5
#2 --single-bundle true : bundle all the compiled files into a single JS file.



Step 6

In the last step, it is the same main container in .html which we saw in the first step. So here you need to modify a few of the lines and add the custom tag (App-one) that we already created. Now you need to add that JS file here when you create the build with this command:
(Step 5: ng build --prod--output-hashing none --single-bundle true).

Using this simple flow into the Angular micro-content, you can create a micro front-end in Angular easily. 

HTML
 




xxxxxxxxxx
1
20


 
1
//main container app
2
<!doctype html>
3
<html lang="en">
4
<head>
5
<meta charset="utf-8">
6
<title>Main Container</title>
7
<base href="/">
8
<meta name="viewport" content="width=device-width, initial-scale=1">
9
<link rel="icon" type="image/x-icon" href="favicon.ico">
10
</head>
11
<body>
12
<app-root></app-root>
13
<div id="app-one"><app-one></app-one></div>
14
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.1/zone.min.js"></script>
15
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/custom-elements-es5-adapter.js"></script>
16
<script type="text/javascript" src="http://localhost/appone/dist/appone/main.js"></script>
17
</body>
18
</html>



Wrapping Up

Through isolated code and supporting independent development, micro-frontends offer a lucrative solution to split the workload among different teams. This solution serves as the backbone of a revolutionary approach to front-end development. If you’re just starting off with web components, the micro-frontends architecture with Angular helps to examine your enterprise UI/UX needs on a large scale to deliver quality, consistency, and greater user experience. 

Architecture AngularJS azure app Element Web Service microservice application Continuous Integration/Deployment

Opinions expressed by DZone contributors are their own.

Related

  • Delivering Your Code to the Cloud With JFrog Artifactory and GitHub Actions
  • Monolithic Decomposition and Implementing Microservices Architecture
  • Migrating Spring Java Applications to Azure App Service (Part 1: DataSources and Credentials)
  • Testing Serverless Functions

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!