Integration of Angular App into Vuejs App, Implementing via Micro Frontend SPA process.
Hello guys, I am back again, last time a medium on
`DialogFlow V2 under GCP (V1 to V2)` https://medium.com/@sid.shingate/dialogflow-v1-to-v2-gcp-authentication-and-accessing-apis-by-3-ways-35188b7faffb
As our Team is working on Angular 8 (MEAN) application, as its successfully implemented with our client's requirements and dependencies. As our venerated client upraise new implementation to integrate Angular 8 App in their existing Vuejs App in a single page application.
So technically my thinking, it's impossible to implement both different JS Frameworks on a single domain/port i.e. on http://localhost:4200/ and SPA navigation of both should be vice-versa (Vuejs should be able to access routes of Angular and Angular of Vuejs in a single page application).
These types of cases come on related primary applications, as the client's Vuejs App is an existing huge application and the Angular App will be a primary application. For eg, There can be multiple primary applications that will be linked to the main app ie currently it's Vuejs.
Angular app -> Vuejs Main<- Angular app or Reactjs
So the process is called Micro-Frontend Architecture.
`Micro-frontends` are small applications mostly divided by subdomain or functionality working together to deliver a larger application.
This can be privately for Angular or Reactjs or Vuejs OR integrating one JS(any framework) in another.
So let's come to a point:
Using the Single-SPA library it has successfully integrated.
Single-SPA is a javascript library to provide microservices in the browser.
Features of Mirco-Frontends
- Each frontend represents a specific feature or subdomain of the entire application
- Each frontend can be implemented with a separate team.
- Each frontend can be implemented with different technology.
- Independent of each other.
- Each Frontend can be owned by a single team.
PROCESS OF IMPLEMENTING ANGULAR IN VUE:-
In angular firstly install package
npm install --save single-spa-angularIn Angular app for single-SPA, there are some configurations that need todo, its mandatory for that you can go to this link you will get it for Angular.
https://single-spa.js.org/docs/ecosystem-angular
Important points in Angular App is as todo:
- Lifecycle functions i.e. bootstrap, mount, and unmount,
- Generate a
main.single-spa.tsin your projectsrc/. - Generate
single-spa-props.tsinsrc/single-spa/ - Generate
asset-url.tsinsrc/single-spa/ - Add an npm script
npm run build:single-spa. - Add an npm script
npm run serve:single-spa.
IMPORTING PRIMARY APPLICATION/s IN VUEJS:
In the Vuejs app index.html file or any other component wherever you need is the micro-root. We need to import the Angular App and registering the app with the appropriate name and location in <script/>. Since we are loading the apps on page load ie index.html in Vue, we are not defining any specific context paths.
Below is the Vuejs index.html, where Angular app and single-spa libraries, CDNs, etc. are imported.
<!DOCTYPE html><html><head><metahttp-equiv="Content-Security-Policy"content="default-src * data: blob: 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * data: blob: 'unsafe-inline'; font-src * data: blob: 'unsafe-inline';"/><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>Your VUEJS Application</title><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="importmap-type" content="systemjs-importmap" /><script type="systemjs-importmap">{"imports": {"angular-app": "http://localhost:4300/main.js","single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.5/system/single-spa.min.js"}}</script><linkrel="preload"
href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.5/system/single-spa.min.js"
as="script"
crossorigin="anonymous"
/><script src="https://unpkg.com/core-js-bundle@3.1.4/minified.js"></script><script src="https://unpkg.com/zone.js"></script><script src="https://unpkg.com/import-map-overrides@1.6.0/dist/import-map-overrides.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/system.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/amd.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-exports.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-register.min.js"></script><style></style></head>
<body>
<script>System.import("single-spa").then(function (singleSpa) {singleSpa.registerApplication(
"angular-app",
function () {
return System.import("angular-app");
},
function (location) {
return true;
},
);
singleSpa.start();
});
</script>
<import-map-overrides-full></import-map-overrides-full>
</body>
</html>
Above only a single angular app is imported but you can import multiple Apps as Angular/React/Vuejs,
In the index.html in a script of <script type=”systemjs-importmap”>{
"imports": {
"angular-app": "http://localhost:4300/main.js",
"single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.5/system/single-spa.min.js"
}
}
</script>
Its local/Dev: “angular-app”: “http://localhost:4300/main.js”
During production/staging, it will the “htpp://…./dist/main.js” which will be built in an angular App.
Finally, run the apps.
The main point is, no need to give an overall URL for routing for each other's routes and navigation vice-versa of the Vuje-Angular App. It will be in SPA.
So go on https://single-spa.js.org there you will get extra understanding.
The simple demo is done by me and even integration that was required by our client is also.
If I will give you here all zip folders of angular/Vuejs you will just npm install and run it and finish, no understanding for single-SPA, then it will be ready-made for.
So my point is, refer a website of single-spa and implement it that will be a positive point for you to understand the process.
If any problem/need arises you can mail me on sid.shingate@gmail.com
