Comments (8)
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.
from single-spa-ember.
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.
from single-spa-ember.
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.
from single-spa-ember.
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
from single-spa-ember.
@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.
from single-spa-ember.
Ah yes, calling singleSpa.start()
is necessary. Good catch. Looking forward to any PRs from you improving support.
from single-spa-ember.
@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?
from single-spa-ember.
@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
from single-spa-ember.
Related Issues (10)
- The appUrl in loadEmberApp is useless HOT 2
- import issues with single-spa-ember with different ember/ember-cli versions HOT 8
- Multiple Ember apps need to be namespaced. HOT 6
- What about loading application specific styles ? HOT 7
- Build should exclude `single-spa` from vendor bundle HOT 3
- mount doesn't work with Ember 3.28 version HOT 4
- Dependencies do not pass through properly in embedded engine under single spa HOT 1
- Dependencies do not pass through properly in embedded engine under single spa
- this.callback.apply is not a function when importing single-spa-ember
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from single-spa-ember.