dependencies do not pass through properly in embedded engine under single spa

[dhanapak]

Problem Statement

Issue with mounting the Ember shopping engine into the app when running it from Single Spa, and receive an error related to the execution of Ember engine code, while the standalone Ember app works fine.

Error

"Error while processing route: mfe-engine-shopping.shopping.index Cannot read properties of null (reading 'externalRoutes') TypeError: Cannot read properties of null (reading 'externalRoutes')".

About the ember engine loading issue

I followed the Single Spa tutorials and used single-spa-ember for the Ember micro frontend with Single Spa. Everything works fine if the app doesn't have an engine, but I'm having trouble mounting the Ember shopping engine with dependencies into the app.

Specifically, when I try to load the shopping engine from a link in the dashboard component of the product app, I receive the following error: "Error while processing route: mfe-engine-shopping.shopping.index Cannot read properties of null (reading 'externalRoutes') TypeError: Cannot read properties of null (reading 'externalRoutes')".

Data communication between multiple ember app Issue
We leveraged the utility module provided by create-single-spa to enable data sharing between multiple Ember front-end apps. By using observables in the utility module, we exposed a method for all other Ember apps to publish and subscribe to data. However, despite attempting to make the utility module global through import maps, we were unable to do so, which prevented us from sending data through the utility module because of the utility module not loaded in global.

Technical Analyse of ember engine loading issue

The execution of Ember engine code differs between mounting the Ember app to Single Spa and running it standalone. When working in a standalone Ember app, the order of method invocation is as follows:

The _constructEngineInstance function is triggered from "ember-engines/addon/-private/router-ext.js".
Subsequently, it calls owner.buildChildEngineInstance, which then invokes buildChildEngineInstance in engine-instance-ext.js. This is one method used to assign the engine dependencies to the new object and pass it to the cloneParentDependencies method in engine-instance-ext.js.

However, when running from Single Spa, instead of triggering buildChildEngineInstance from engine-instance-ext.js, it calls buildChildEngineInstance from instance.js in the Ember JS package. Then, it makes a call to cloneParentDependencies in engine-instance-ext.js. Therefore, the dependencies are cloned to the new object from the mounted engine. The calling of buildChildEngineInstance in engine-instance-ext.js is missing here.

This seems to be the cause of the error "Error while processing route: mfe-engine-shopping.shopping.index Cannot read properties of null (reading 'externalRoutes') TypeError: Cannot read properties of null (reading 'externalRoutes')", as the cloneParentDependencies method throws this error.

The standalone Ember app works correctly, but it isn't working properly within Single Spa.

Any suggestions would be very helpful

Thanks in advance