Build Micro Front-Ends Using Angular

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

By Mohit Surati Angular Js April 7, 2020 6 min read 168 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

Step-by-Step Guide To Create Your Angular Library With Angular CLI

Step-by-Step Guide To Create Your Angular Library With Angular CLI

Earlier HTML was extensively used to build front-end, but HTML is only good when it comes to static content. AngularJS is one such powerful JavaScript…

1 Share
Exploring The Top Angular Component Library For Developers

Exploring The Top Angular Component Library For Developers

As the internet space becomes the dominant area of office work, for the larger mass of people, there is a constant run to make the…

2 Shares
Exploring The 40 Angularjs Dashboard Templates For Front-End Development

Exploring The 40 Angularjs Dashboard Templates For Front-End Development

Angular JS was ranked number 3 in the list of top front end JavaScript frameworks in the state of JS 2019. It has been in…

2 Shares
Share via
Copy link