Ng9 - Build Micro Front-Ends Using Angular Elements: The Beginner's Guide
----------------------------------------------------------------------------------------------
As of 16/apr/2020 node js 10.x and angualr cli9.X is working
https://github.com/gnganpath/angular-micro-frontend Source CODE
IDEA: "travel-booking" is master app ( container app)
which contains "flight-booking" and "train-booking" micro angular apps
Start with micro apps
Step:1
ng new flight-booking
Step:2
flight-booking:>ng add @angular/elements
Step:3
flight-booking:>ng add ngx-build-plus
Step:4
flight-booking:->package.json:
document-register-element module to 1.8.1 // update from 1.7.2
Step:5
flight-booking:> npm i -g http-server --save
Step:6
particular component from this angular micro app. Otherwise we can use entire app (appcomponent) itself will be micro app
flight-booking:> ng g c booking
booking.html
<!--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>
component.ts
title = 'Flight Booking App from booking component';
Step:7 ****
flight-booking::: 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: [], /// most important it must be empty after complete the local development. and run into micro app
entryComponents: [
BookingComponent
]
})
export class AppModule {
constructor(private injector: Injector) {
}
ngDoBootstrap() {
const myCustomElement = createCustomElement(BookingComponent, { injector: this.injector });
customElements.define('app-flight-booking', myCustomElement);
}
}
Step: 8
flight-booking::: angular.json
after micro complete angula.json or run every time micro app build
"architect": { "build": { "builder": "ngx-build-plus:build", .... from Browser
"serve": { "builder": "ngx-build-plus:dev-server", ...
"test": { "builder": "ngx-build-plus:karma",
Step: 9
flight-booking:> ng build --prod --output-hashing none --single-bundle true
Step:10
flight-booking:>http-server ./dist/flight-booking -p 8081
Similarly, create another custom element, train-booking, and run the server with port 8082.
Step: 11 Repeat step 1-10
Follow the step 1-10for second micro app which is train-booking with or without routing(entire app)
http-server ./dist/train-booking -p 8082
Step:12
ng new travel-booking
Step:13
travel-booking:::
index.html
<!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="http://localhost:8081/main.js"></script>
<script type="text/javascript" src="http://localhost:8082/main.js"></script>
</body>
</html>
we can include <app-flight-booking></app-flight-booking> any where inside src/app
app-flight-booking is custom Elment defined from every micro app app.module using createcustomElement
Step: 14
travel-booking::angular.json
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "travel-booking:build",
"port": 8080
}
Ref:https://dzone.com/articles/build-micro-front-ends-using-angular-elements-the
mutli framework angualr, react, vue, ember micro front-end
https://medium.com/javascript-in-plain-english/create-micro-frontends-using-web-components-with-support-for-angular-and-react-2d6db18f557a
----------------------------------------------------------------------------------------------
As of 16/apr/2020 node js 10.x and angualr cli9.X is working
https://github.com/gnganpath/angular-micro-frontend Source CODE
IDEA: "travel-booking" is master app ( container app)
which contains "flight-booking" and "train-booking" micro angular apps
Start with micro apps
Step:1
ng new flight-booking
Step:2
flight-booking:>ng add @angular/elements
Step:3
flight-booking:>ng add ngx-build-plus
Step:4
flight-booking:->package.json:
document-register-element module to 1.8.1 // update from 1.7.2
Step:5
flight-booking:> npm i -g http-server --save
Step:6
particular component from this angular micro app. Otherwise we can use entire app (appcomponent) itself will be micro app
flight-booking:> ng g c booking
booking.html
<!--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>
component.ts
title = 'Flight Booking App from booking component';
Step:7 ****
flight-booking::: 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: [], /// most important it must be empty after complete the local development. and run into micro app
entryComponents: [
BookingComponent
]
})
export class AppModule {
constructor(private injector: Injector) {
}
ngDoBootstrap() {
const myCustomElement = createCustomElement(BookingComponent, { injector: this.injector });
customElements.define('app-flight-booking', myCustomElement);
}
}
Step: 8
flight-booking::: angular.json
after micro complete angula.json or run every time micro app build
"architect": { "build": { "builder": "ngx-build-plus:build", .... from Browser
"serve": { "builder": "ngx-build-plus:dev-server", ...
"test": { "builder": "ngx-build-plus:karma",
Step: 9
flight-booking:> ng build --prod --output-hashing none --single-bundle true
Step:10
flight-booking:>http-server ./dist/flight-booking -p 8081
Similarly, create another custom element, train-booking, and run the server with port 8082.
Step: 11 Repeat step 1-10
Follow the step 1-10for second micro app which is train-booking with or without routing(entire app)
http-server ./dist/train-booking -p 8082
Step:12
ng new travel-booking
Step:13
travel-booking:::
index.html
<!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="http://localhost:8081/main.js"></script>
<script type="text/javascript" src="http://localhost:8082/main.js"></script>
</body>
</html>
we can include <app-flight-booking></app-flight-booking> any where inside src/app
app-flight-booking is custom Elment defined from every micro app app.module using createcustomElement
Step: 14
travel-booking::angular.json
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "travel-booking:build",
"port": 8080
}
Ref:https://dzone.com/articles/build-micro-front-ends-using-angular-elements-the
mutli framework angualr, react, vue, ember micro front-end
https://medium.com/javascript-in-plain-english/create-micro-frontends-using-web-components-with-support-for-angular-and-react-2d6db18f557a
No comments:
Post a Comment