'single-spa - how to load an Angular app without using SystemJS

I have an AngularJS version 1.4 application and I want to migrate to Angular 12+ . So I decided to use single-spa to integrate the new Angular App to the Legacy App.
I'm following this video Single spa app with Angular and Angularjs micro frontends

In that video he is using SystemJS to load the new Angular App. Although SystemJS is said to be the recommended way I would like to know if it is possible to load both the legacy and the new app without SystemJS. The new Angular app is created using single-spa CLI

This is the repo for the video

In the main.js I changed to this

// System.register([], function (_export) {
//   return {
//     execute: function () {
//       _export(
//         window.singleSpaAngularjs.default({
//           angular: angular,
//           mainAngularModule: "main-module",
//           uiRouter: true,
//           preserveGlobal: false,
//         })
//       );
//     },
//   };
// });

//create global variable
window.legacyAngularApp = window.singleSpaAngularjs.default({
  angular: angular,
  mainAngularModule: 'main-module',
  uiRouter: true,
  preserveGlobal: false,
})

In the index.html I changed to this. I managed to load the AngularJS app without SystemJS but couldn't figure out how to load the new Angular app without SystemJS.
I would like to know what changes I need to do to load the new Angular App also without using SystemJS

angularangularjssystemjssingle-spasingle-spa-angular


Solution 1:[1]

  • Try module Federation for sharing & binding resources instead of systemJs.

Refer these links

From official

Example

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yuvaraj

Related Questions