Not able to get ember to load, looks like it's not calling ember

[genechan]

Hi, I made an example of the issue here on this git hub repo to help explain/show the issue I'm seeing.
The README.MD has setup instructions.

[email protected]:genechan/single-spa-ember-bug.git

https://github.com/genechan/single-spa-ember-bug

I'm trying to setup ember with single-spa-ember, I see my vendor and ember.js file load but the ember application does not start. For a test, I'm using the default ember quick start as the ember app to avoid any personal ember code mistakes. https://guides.emberjs.com/release/getting-started/quick-start/

thank you in advance for looking at this.

[genechan]

If I set autoRun to true in my ember-cli-build.js I can see the ember quick start running but that's going against the instructions.

module.exports = function(defaults) { let app = new EmberApp(defaults, { autoRun: true, // Set autoRun to false, because we only want the ember app to render to the DOM when single-spa tells it to.

Outside of this example, in regards to the real ember application that I was trying to migrate, I enable autoRun to true but ran into this error
died in status LOADING_SOURCE_CODE: {"isTrusted":true}

I found a similar ticket and think it may be related or not.
single-spa/single-spa#251
I only have 1 ember app and wanted to create a react app while I migrate ember into it.

[joeldenning]

I haven't tried single-spa-ember in a couple years. The last time I did so was with Ember CLI 3.12.0. You can see the source code for it at https://github.com/single-spa/single-spa-examples/tree/master/src/ember-app. What I remember from the experience was that Ember wasn't well suited at that time for single-spa, since it had strong assumptions in its compilation/bundling that didn't use industry norms like webpack and didn't really jive with the concept of in-browser javascript modules representing a microfrontend.

My guess here is that you're using a newer version of Ember that no longer works with single-spa-ember. If you have interest in helping revive the project, I'd be happy to guide you on diagnosing problems and making changes to single-spa-ember.

[rajasegar]

I have get it to a working stage with some changes here
https://github.com/rajasegar/single-spa-ember-bug
There was an issue with the port number, it was 8081 instead of 8080 in index.html for root-application.js
Some of the observations from the changes I have made:

Mount point in index.html for ember app

We need a mount point for our ember app to render in the DOM something like <div id="ember-app"></div> and we need to mention the same inside app.js inside our ember app like

rootElement = "#emberapp";

Use hash-based routing in Ember apps

We need to use hash routing in Ember because if we use history or auto as locationType in Ember, it messes up our browser url and the routing system of single-spa. Also if we use history Ember will take over the routing system automatically with unintended side effects.

Set autoRun to true

It looks like single-spa is not able to initiate the ember app on-demand, so it makes sense to auto start the Ember app

[joeldenning]

Thanks @rajasegar for your work and research into this.

We need a mount point for our ember app to render in the DOM something like

and we need to mention the same inside app.js inside our ember app like

👍 we should add this to the documentation for single-spa ember.

We need to use hash routing in Ember because if we use history or auto as locationType in Ember, it messes up our browser url and the routing system of single-spa. Also if we use history Ember will take over the routing system automatically with unintended side effects.

This is something that should be fixed. If you can provide more details about the issues caused by history routing, I'd be happy to help diagnose them.

It looks like single-spa is not able to initiate the ember app on-demand, so it makes sense to auto start the Ember app

I strongly disagree with this. The last time i tried single-spa-ember, I was able to get it to mount and unmount on demand. The entire point of single-spa applications is that they can be mounted and unmounted programmatically, on demand. If that is not happening, it's not single-spa. We should work on fixing this rather than accepting it.

[rajasegar]

@joeldenning The autoRun: false option now works fine, once when call start() in the root-config. It was previously not there. Now I can able to mount/unmount the ember app using the inspector dynamically.
The latest changes were made in this commit here
rajasegar/single-spa-ember-bug@a9c7f23
Let me work on this more by adding and testing more ember apps or other framework apps and I will let you know any other observations here and possibly will raise a PR to update the docs for single-spa-ember.

[joeldenning]

Ah yes, calling singleSpa.start() is necessary. Good catch. Looking forward to any PRs from you improving support.

[villander]

@joeldenning @rajasegar when I change the locationType to hash it works perfectly removing this shit error. Do you have some idea why it happens? If I use hash I can't access the nested routes, like payments.chargeback directly.

Why when we use hash we can't access child routes on the app?

[rajasegar]

@villander I think locationType is something specific to Ember, it doesn't have anything to do with single-spa
I have discussed some of these issues in this blog post
https://dev.to/rajasegar/ember-micro-frontends-with-single-spa-1p8j