Implement single-spa to run angularjs and vue.js with with systemjs

Question

Hi all I am new and trying to setup single-spa for angularjs and vue.js projects.

My objective here is to run angularjs + gulp application and vue.js application as one single application, this I am doing as we want to convert angularjs app into vue.js, so I want to run this conversion in parallel while keep angularjs code running same time.

I am able to configure and run both angularjs and vuejs projects separately with single-spa using SystemJs. But when I try to import angularjs app with vuejs app or visa-vers it crash with different errors saying died in status LOADING_SOURCE_CODE or n.instance not defined.

I think it is something to do with missing configuration or routes.

So, here is what I am doing: I took project setup at link https://github.com/joeldenning/coexisting-vue-microfrontends and updated root-html-file/index.html and edited as below :

<script src="https://cdn.jsdelivr.net/npm/single-spa-angularjs@4.2.1/lib/single-spa-angularjs.min.js"></script>  
  <script type="systemjs-importmap">
    {
        "imports": {
          "navbar": "http://localhost:8081/js/app.js",
          "app1": "http://localhost:8082/js/app.js",
          "angularjsApp": "http://localhost:3000/single-spa-config.js",
          "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js",
          "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js",
          "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.0.7/dist/vue-router.min.js"
        }
    }
  </script>

And then updated script tag System.import function as below :

<script>

    (function () {
      Promise.all([
        System.import('single-spa'),
        System.import('vue'),
        System.import('vue-router')
      ]).
        then(function (modules) {
          var singleSpa = modules[0];
          var Vue = modules[1];
          var VueRouter = modules[2];

          Vue.use(VueRouter)

          singleSpa.registerApplication(
            'navbar',
            () => System.import('navbar'),
            location => true
          );

          singleSpa.registerApplication(
            'app1',
            () => System.import('app1'),
            location => location.pathname.startsWith('/app1')
          )

          console.log(singleSpa);
          window.singleSpa = singleSpa;

          singleSpa.registerApplication(
            'angularjsApp',
            () => System.import("angularjsApp"),
            activeWhen => ['/#!/']
          )

          singleSpa.start();
        })
      })()
  </script>

Then I added my angularjs application DIR at same root level as that of app1 and navbar. named as angularjsApp.

Here in angularjsApp. I am having single-spa-config.js which is having code below :

System.register([], function (_export) {
    return {
        execute: function () {
            console.log(angular);
            console.log(window.angular);
            _export(
                window.singleSpaAngularjs.default({
                    angular: window.angular,
                    mainAngularModule: 'app',
                    uiRouter: true,
                    preserveGlobal: true,
                })
            )
        }
    }
});

Now problem is when I try to execute it I am getting error as below : Uncaught angularjsApp: Application 'angularjsApp' died in status LOADING_SOURCE_CODE: angular is not defined or n.instance is not defined.

Can anyone help me here, and guide me where I am wrong and how I can fix it please.

Thanks Soyuz

Implement single-spa to run angularjs and vue.js with with systemjs

0 Answers0