Skip to content

Instantly share code, notes, and snippets.

@AbdulNasertp

AbdulNasertp/apploader.js

Created March 15, 2018 10:50
Show Gist options
  • Save AbdulNasertp/b6e93a8a4954fe7fda360bd3a3a08998 to your computer and use it in GitHub Desktop.
Save AbdulNasertp/b6e93a8a4954fe7fda360bd3a3a08998 to your computer and use it in GitHub Desktop.
Download ZIP
MicroApp-SPA-Multiple angular app mounting issue
Raw
apploader.js
const loadingFunctionApp1 = () => import('../app1/app1.js');
const loadingFunctionApp2 = () => import('../app2/app2.js');
const loadingFunctionApp3 = () => import('../app3/app3.js');
export function getAppLoader(appName)
{
switch(appName) {
case "App1":
return loadingFunctionApp1;
break;
case "App2":
return loadingFunctionApp2;
break;
case "App3":
return loadingFunctionApp3;
break;
default:
return new Promise.resolve(false);
break;
}
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Micro Frontends</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/dist/common-dependencies.js"></script>
<script src="/dist/root-application.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Micro Frontends</a>
</div>
<ul class="nav navbar-nav">
<!-- <li class="active"><a href="#">Home</a></li> -->
<!-- <li><a href="#">App 1</a></li>
<li><a href="#">App 2</a></li>
<li><a href="#">App 3</a></li> -->
</ul>
</div>
</nav>
<div class="container">
<h1 id="hrHeading"></h1>
<ul class="nav nav-tabs" id="ismtab">
<li class="active"><a id="0" data-toggle="tab" href="#home">Home</a></li>
<li><a id="1" data-toggle="tab" href="#menu1">Tab 1</a></li>
<li><a id="2" data-toggle="tab" href="#menu2">Tab 2</a></li>
<li><a id="3" data-toggle="tab" href="#menu3">Tab 3</a></li>
<li><a id="4" data-toggle="tab" href="#menu4">Tab 4</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h2>Micro Frontends</h2>
<p>
The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams.
</p>
<p>
Each team has a distinct area of business or mission it cares about and specializes in.
A team is cross functional and develops its features end-to-end, from database to user interface.
</p>
<p>To evaluate the feasibility of using micro front end for ISM.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>App 1</h3>
<div id="app1"></div>
</div>
<div id="menu2" class="tab-pane fade">
<h3>App 2</h3>
<div id="app2"><app2/></div>
</div>
<div id="menu3" class="tab-pane fade">
<h3>App 1</h3>
<div id="app3"></div>
</div>
<div id="menu4" class="tab-pane fade">
<h3>App 4</h3>
<div class="row">
<div class="col-md-4">
<h4>Angular app</h4>
<div id="app4"><app4 /></div>
</div>
<div class="col-md-4">
<h4>React app</h4>
<div id="app5"></div>
</div>
<div class="col-md-4">
<h4>Duplicate React app</h4>
<div id="app6"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
root-application.js
import * as singleSpa from 'single-spa';
import { componentFactoryName } from '@angular/compiler';
import * as appLoader from '../root-application/apploader.js';
// const loadingFunctionApp1 = () => import('../app1/app1.js');
// const loadingFunctionApp2 = () => import('../app2/app2.js');
// const loadingFunctionApp3 = () => import('../app3/app3.js');
// function getAppLoader(appName)
// {
// if(appName == "App1")
// return loadingFunctionApp1;
// else if(appName == "App2")
// return loadingFunctionApp2;
// else if(appName == "App3")
// return loadingFunctionApp3;
// }
function RegisterApp(metaData)
{
//console.log('looping');
$.each(metaData,function(i,v){
singleSpa.registerApplication(v.AppName,
appLoader.getAppLoader(v.ApptoLoad), () => AppTOLoad(v.AppId));
});
singleSpa.start();
}
//singleSpa.start();
function loadingFunction(url) {
return import(url);
}
function pathPrefix(prefix) {
return function(location) {
return location.pathname.startsWith(`${prefix}`);
}
}
var currentApp = 0;
var ismMetaData = {
"tenantId": 1234,
"tenantName": 'Test ISM Tenant',
"metaData": [
{
"AppId": 1,
"AppName": "App1",
"Message": "This is app 1",
"DomId": "divApp1",
"ApptoLoad" : 'App1'
},
{
"AppId": 2,
"AppName": "App2",
"Message": "This is app 2",
"DomId": "divApp2",
"ApptoLoad" : 'App2'
},
{
"AppId": 3,
"AppName": "App3",
"Message": "This is app 3",
"DomId": "divApp3",
"ApptoLoad" : 'App1'
},
{
"AppId": 4,
"AppName": "App4",
"Message": "This is app 4",
"DomId": "divApp4",
"ApptoLoad" : 'App1'
},
{
"AppId": 5,
"AppName": "App5",
"Message": "This is app 5",
"DomId": "divApp5",
"ApptoLoad" : 'App3'
},
{
"AppId": 6,
"AppName": "App6",
"Message": "This is app 6",
"DomId": "divApp6",
"ApptoLoad" : 'App1'
}
]
}
$(document).ready(
function(){
$('a[data-toggle=tab]').click(function(){
//console.log(this.href);
//alert(this.id);
//console.log("currentApp on tab click:" + currentApp);
currentApp = this.id;
localStorage.setItem("CurrentTab", currentApp);
localStorage.setItem("app1", false);
singleSpaNavigate('/'+ currentApp);
if(currentApp == 4)
{
localStorage.setItem("app1", true);
singleSpaNavigate('/5');
singleSpaNavigate('/6');
}
});
$('#hrHeading').text(ismMetaData.tenantName);
var apps = ismMetaData.metaData;
RegisterApp(apps);
}
);
function AppTOLoad(appId)
{
//console.log("appId: " + appId + " TabId: " + currentApp);
//console.log(currentApp == appId ? true : false);
if(currentApp == 4 && appId > 4)
return true;
return currentApp == appId ? true : false;
}
@AbdulNasertp
Copy link
Author

Shared the files with Bret, so that he may analyse this issue of angular app not able to mount multiple times.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment