Cannot integrate angularjs spa in a root layout using microfrontend layout

[otsab19]

I am trying to use old angularjs and new app built in react. Converted the existing angularjs app to a single spa app. I can add a new frontend to this angularjs single spa app and it works.

But what I am trying to use the root config and embed the apps using the recommended way to use single spa. Created root config and react using single spa CLI.

//Root config:

import { registerApplication, start } from "single-spa";
import {
  constructApplications,
  constructRoutes,
  constructLayoutEngine,
} from "single-spa-layout";
import microfrontendLayout from "./microfrontend-layout.html";

const routes = constructRoutes(microfrontendLayout);



System.import('oldapp').then(function(oldapp){
 
  const applications = constructApplications({
    routes,
    // loadApp() {
    //   return System.import('@myApp/newapp');
    // },
    loadApp() {
      return System.import('oldapp');
    },
  });
  const layoutEngine = constructLayoutEngine({ routes, applications });




applications.forEach(registerApplication);
layoutEngine.activate();
start();
});

// layout page:

  <!--

    This is the single-spa Layout Definition for your microfrontends.
    See https://single-spa.js.org/docs/layout-definition/ for more information.

  -->

  <!-- Example layouts you might find helpful:

  <nav>
    <application name="@org/navbar"></application>
  </nav>
  <route path="settings">
    <application name="@org/settings"></application>
  </route>

  -->

  <main>
    <route default>
      <!-- <application name="@myApp/newapp"></application> -->
      <application name="oldapp"></application>
    </route>
  </main>
</single-spa-router>

index.ejs

<script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js",
        "react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
        "react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js",

        "single-spa-angularjs": "//localhost/ng-spa.js"
      }
    }
  </script>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@myApp/root-config": "//localhost:9000/root-config.js",
        "oldapp": "//localhost/js/dist/angular-bundle.js"
      }
    }
  </script>

//angular app

System.import('single-spa').then(function (singleSpa) {
  System.import('single-spa-angularjs').then(function (singleSpaAngularjs) {
    // window.singleSpa = singleSpa;
    // window.singleSpaAngularjs = singleSpaAngularjs;

    System.register([], function(_export) {
      return {
        execute: function() {
          _export(singleSpaAngularjs.default.default({
            angular: window.angular,
            mainAngularModule: 'oldapp',
            uiRouter: true,
            preserveGlobal: false,
            template: '<old-app />',
          }))
        }
      }
    })
    
      
      // singleSpa.registerApplication({
      //   name: "oldapp",
      //   app: function() { return System.import('oldapp'); },
      //   activeWhen: ['/']
      // })
      // singleSpa.start()
    })
  })
  <script type="systemjs-importmap">
          {
            "imports": {
            "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js",
            "single-spa-angularjs": "https://cdn.jsdelivr.net/npm/[email protected]/lib/single-spa-angularjs.min.js",
              "oldapp": "/js/dist/angular-bundle.js"
            }
          }
        </script>

I get the error:

Application 'oldapp' died in status SKIP_BECAUSE_BROKEN: Failed to instantiate module oldapp. oldapp is not available. 

Did some debugging, the module cannot be found. What is the issue? Why is the module not loaded? If I use the oldapp single spa separately, it works.
https://stackoverflow.com/questions/70528119/cannot-integrate-angularjs-spa-in-a-root-layout-using-microfrontend-layout