How to merge Angular and Vue projects together?

Question

I read various resources available on this but still couldn\'t figure out a way. The issue here is that I want to merge two different projects together. My colleague was wor

Answer 1

One solution would be to continue to keep the two features (really applications) separate and divert the user traffic with a Load Balancer. The load balancer can handle and route traffic to the respective application based on configured URL rules. If you are using AWS, you can configure an Application Load Balancer (ALB) using listener rules and target groups.

Even if you aren't using AWS, this type of load balancer can be easily configured. For example with a reverse proxy server on nginx.

The benefit of this approach is that neither application needs to be updated at all, and you don't have to worry about any cross-framework dependencies, issues, etc.

Example:

applicationname.com/app1 -> forwards to Target Group for App 1
applicationname.com/app2 -> forwards to Target Group for App 2

In each application you can now just use regular href links that can point to the other application. example in App 1: <a href="/app2/feature1">Feature 1</a>

Answer 2

And they are entirely independent from each other as well. There is no link in the first project app from where my app needs to be launched.

It seems like you can try out the cool Micro Frontend. MicroFrontend is a new application paradigm where frontend services are organised as different applications and communicate through an event bus all on the front end.

There are different methods of achieving this like:

1. Rendering them in different iFrames and communicating through an postMessage API
2. Rendering them at different URLs but using an event bus with common dependency management.
3. Using single SPA Framework.

Since you said that the applications need not communicate with each other, SPA Framework would be easier for you. It is very mature framework in this domain with support for front end frameworks including Vue and AngularJS but not limited to these options.

What you would do to make this work is effectively create an HTML with different divs:

<div id="angular1"></div>
<div id="vue-app"></div>

So that they do not involve changes with each other.

Create a single SPA file as config of your application.

import * as singleSpa from 'single-spa';

singleSpa.registerApplication('angular', () =>
  import ('../app1/angular1.app.js'), pathPrefix('/app1'));
singleSpa.registerApplication('vue', () =>
  import ('../app2/vue.app.js'), pathPrefix('/app2'));

singleSpa.start();

function pathPrefix(prefix) {
  return function(location) {
    return location.pathname.startsWith(`${prefix}`);
  }
}

You can find more details on this config Here

After installing the corresponding SPA plugins (single-spa-vue and single-spa-angular in your case), we have to tell single-spa the life cycle hooks it needs to mount and unmount your framework.

In the case of vue:

import Vue from 'vue/dist/vue.min.js';
import singleSpaVue from 'single-spa-vue';

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#vue-app'
    template: `<p>Vue Works</p>`
  }
});

export const bootstrap = [
  vueLifecycles.bootstrap,
];

export const mount = [
  vueLifecycles.mount,
];

export const unmount = [
  vueLifecycles.unmount,
];

You can find a sample application with Vue and Angular Here. Here is a step by step guide from makers of single-spa. Also check out their examples.

Hope that helps.