Build Micro Front-Ends Using Angular

Step-by-Step Guide To Build Micro Front-Ends Using Angular

By Mohit Surati Angular Js 2 months ago 6 min read 145 Views

Micro -apps are nothing but fully coded applications that act or function as mobile or web apps. It doesn’t even require downloading and is easily accessible. Also, there is no customizing of coding required.

Any framework can construct it, but building micro-apps using AngularJS Frameworks would be a perfect solution to deliver quality apps. Micro apps are trending and contain multiple features such as:

  • No Dependency on Internet
  • Features like Advanced Security & Compliance
  • Extensible
  • Comply with granular data demands

As the name says, they are small in size and can bypass the play store to share and send to others. Moreover, micro-apps offer limited, accurate, and precise functionality. The app is constructed to cater to a specific function.

The developers have divided the front-end and backend coding in two parts, and micro-apps make it easy for the app professionals to maintain the client-side development coding easily.

Step 1: Installing Dependencies

Whenever you start to build micro front-end apps using angular, then you would require a few dependencies. These dependencies should be installed into the below-mentioned commands:

ng add @angular/elements

ng add ngx-build-plus

You can install the dependencies with the help of npm. @angular/elements. Angular elements are the extensions of Angular CLI which bolsters it.

Step 2: Installing HTTP-server Module

Let us take the bus booking application as an example; you have to install the HTTP-server module:

npm i -g http-server --save

Step 3: Creating “Booking” Component

Now is time to create a component named “booking” in the bus booking/src/app. After that, you can modify the components as per your wish. Also, there are few minor changes that we have done which are stated in below coding:

<!--The content below is only a placeholder and can be replaced.-->

<div style="text-align:center">

<a href="javascript:alert('Welcome to Flight Booking App!!');" style="font-size:25px;">{{ title }}</a>

</div>

Here, we have planned to build a bus booking application, and for that, your command should be as per the above-mentioned image: 

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-flight-booking',

templateUrl: './booking.component.html',

styleUrls: ['./booking.component.scss']

})

export class BookingComponent implements OnInit {

title = 'Flight Booking App';

constructor() { }

ngOnInit() {

}

In the above image, we have used the code: bus-booking/src/app/booking/booking-components.ts 

Step 4: Describing Booking Component

After the above steps, it is time to describe the booking component as a tailor-made element in bus-booking/src/app/.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule, Injector } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { createCustomElement } from '@angular/elements';

import { BookingComponent } from './booking/booking.component';

@NgModule({

declarations: [

AppComponent,

BookingComponent

],

imports: [

BrowserModule,

AppRoutingModule

],

providers: [],

bootstrap: [],

entryComponents: [

BookingComponent

]

})

export class AppModule {

constructor(private injector: Injector) {

}

ngDoBootstrap() {

const myCustomElement = createCustomElement(BookingComponent, { injector: this.injector });

customElements.define('app-flight-booking', myCustomElement);

}

}

Informing Angular and asking them to use the ngx-build-plus module would enable the development micro front end app using angular’s single Javascript file. You can alter the code bus-booking/angular.json in various places which are as follows:

"architect": {

"build": {
    "builder": "ngx-build-plus:build",
  ....

"serve": {

"builder": "ngx-build-plus:dev-server",
    ...

"test": {

"builder": "ngx-build-plus:karma"

Step 5: Run The Project

The below mentioned command will allow you to run the project:

ng build --prod --output-hashing none --single-bundle true
  • Output hashing will restrict the hashes in the file name.
  • Besides, a single bundle true will help in combining all the files into a single Javascript file.

Also, the below-mentioned command will help you in starting the server:

http-server ./dist/flight-booking -p 8081

Moreover, you can create another tailor-made element- train booking, and then, with the port 8082, you can run the server:

http-server ./dist/train-booking -p 8082

Read also: Top AngularJS Development Tools For The Year 2020

Step 6: Covering Up Custom Element

Now, let’s cover up a custom element by adding elements of train and bus booking in the travel-booking applications. Modify it by /travel-booking/index.html as follows:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>TravelBooking</title>

<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" type="image/x-icon" href="favicon.ico">

</head>

<body>

<app-root></app-root>

<div style="margin-bottom: 10px;" id="flight-booking-container"><app-flight-booking></app-flight-booking></div>

<div id="train-booking-container"><app-train-booking></app-train-booking></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.1/zone.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/custom-elements-es5-adapter.js"></script>

<script type="text/javascript" src="https://localhost:8081/main.js"></script>

<script type="text/javascript" src="https://localhost:8082/main.js"></script>

</body>

</html>

Here, angular requires zones and custom-elements-es5-adaptor.js that bolster tailor-made elements within the browser. The main.js custom elements are also used in coding. Also, you can dominate the default server port. You can travel-booking /angular.json that is shown below:

"serve": {
         "builder": "@angular-devkit/build-angular:dev-server",
         "options": {
           "browserTarget": "travel-booking:build",
          "port": 8080
         }
…

Ng.serve will help you run the application.

Wrap Up

Micro front-end comes with numerous advantages, out of which few are easy deployment, technology liberty, and maintainability. Below are the crucial factors of Micro front-end:

  • Break the modules logically by performing in-depth analysis
  • Highly-intuitive user interface
  • Self-contained features
  • Preparation of testing for each single micro integration
  • Communication should be compulsorily mandated

If you are looking for a trustworthy Angular Development Company, then connect with us and share your ideas. The company has abundant resources and manpower who are well-acquainted with the projects and have hands-on experience in delivering quality projects.

Build Micro Front-Ends Using Angular

Disclaimer: We at eSparkBiz Technologies have created this blog with all the consideration and utmost care. We always strive for excellence in each of our blog posts and for that purpose, we ensure that all the information written in the blog is complete, correct, comprehensible, accurate and up-to-date. However, we can’t always guarantee that the information written in the blog correct, accurate or up-to-date. Therefore, we always advise our valuable readers not to take any kind of decisions based on the information as well as the views shared by our authors. The readers should always conduct an in-depth research before making the final decision. In addition to these, all the logos, 3rd part trademarks and screenshots of websites & mobile apps are the property of the individual owners. We’re not associated with any of them.

Mohit Surati

Mohit Surati

A post-graduate in Computer Engineering. Passionate about innovative writing & Content Marketing. A rich vein of experience in writing articles related to WordPress right from plugins, themes, customization, security, WooCommerce & Gutenberg. Pens down his thoughts for eSparkBiz @Custom WordPress Development Company where you can Hire WordPress Developer as per your requirements.

Search

Follow us

Subscribe Newsletter

Call us Today

telephone

Got any Questions?
call us Today!

+1 408 850 1488 [email protected]

Our Guides

Related Post

Why Choose AngularJS For Web Development Project?

Why Choose AngularJS For Web Development Project?

AngularJS is a JavaScript framework. Quite sought-after and in-demand, it is an open-source development framework. It is sturdy and helps in solving the Mistakes Committed…

0 Shares
Top AngularJS Development Tools For The Year 2020

Top AngularJS Development Tools For The Year 2020

AngularJS turns out to be an effective solution for single-page applications as well as a client-side web framework. It is built and backed by Google.…

0 Shares
AngularJS & Ionic: A Perfect Duo For Mobile App Development

AngularJS & Ionic: A Perfect Duo For Mobile App Development

Who would not like to save time and money and get things done efficiently Be it an app owner or a developer; this article would…

0 Shares
Share via
Copy link