I am trying to use ember as one of the child application with single spa(http://ift.tt/29aj4F9), however I am unable to load the js files assets/vendor.js, assets/ember-app.js properly using systemJS.
Steps to reproduce issue:
1) Setting up single spa example with ember
git clone git@github.com:CanopyTax/single-spa-examples.git
cd single-spa-examples
cd src
ember new ember-app
cd ember-app
npm install
2) Add the skeleton single spa hooks methods for ember(not complete but should be ok for now)
//src/ember-app/public/assets/apa.app.js
export async function bootstrap() {
return new Promise((resolve, reject) => {
resolve();
});
}
export async function mount() {
return new Promise((resolve, reject) => {
resolve();
});
}
export async function unmount() {
return new Promise((resolve, reject) => {
resolve();
});
}
function cleanupInspector() {
return new Promise((resolve, reject) => {
resolve();
});
}
3) add build script for single spa(add bin/build-emberjs)
#!/usr/bin/env bash
set -e
cd src/ember-app
npm install
ember build
cd ..
cd ..
rm -rf build/ember-app
cp -a src/ember-app/dist build/ember-app
./node_modules/jspm/jspm.js build \
src/ember-app/public/assets/spa.app.js \
- common/colored-border.js \
build/ember.app.js \
--format amd \
--source-map-contents \
--skip-rollup \
"$@"
4) add the build as part of the build-code
#!/usr/bin/env bash
set -e
rm -rf build
mkdir build
cp jspm_packages/system.src.js build/system.src.js
cp jspm_packages/system-polyfills.src.js build/system-polyfills.src.js
./bin/build-root
./bin/build-common-deps
./bin/build-home
./bin/build-navbar
./bin/build-angular1
./bin/build-react -p
./bin/build-angular2
./bin/build-vue
./bin/build-svelte
./bin/build-preact
./bin/build-vanillajs
./bin/build-inferno
./bin/build-emberjs
5) declare ember app as child application and run the app
//src/single-spa-examples.js
singleSpa.declareChildApplication('ember', ()=> {
/**ISSUE: ember-app.js does not get loaded*/
return SystemJS.import('/build/ember-app/assets/vendor.js').then(function() {
return SystemJS.import('/build/ember-app/assets/ember-app.js');
});
/*
return Promise.all([
SystemJS.import('/build/ember-app/assets/vendor.js'),
SystemJS.import('/build/ember-app/assets/ember-app.js')
])*/
}, hashPrefix('/ember'));
6) start the application
npm install
npm start
7) go to ember app at http://localhost:8080/#/ember
THE ISSUE:
1) vendor.js file loads but the ember-app.js file does not get loaded(can be verified in chrome network tab)
child-app-errors.js:12 Uncaught Error: 'ember' died in status LOADING_SOURCE_CODE: (SystemJS) Cannot read property 'Ember' of undefined
TypeError: Cannot read property 'Ember' of undefined
at eval (http://localhost:8080/build/ember-app/assets/vendor.js!transpiled:10200:38)
at eval (http://localhost:8080/build/ember-app/assets/vendor.js!transpiled:10301:11)
at execute (http://localhost:8080/build/ember-app/assets/vendor.js!transpiled:64708:9)
Error loading http://localhost:8080/build/ember-app/assets/vendor.js
at eval (http://localhost:8080/build/ember-app/assets/vendor.js!transpiled:10200:38)
at eval (http://localhost:8080/build/ember-app/assets/vendor.js!transpiled:10301:11)
at execute (http://localhost:8080/build/ember-app/assets/vendor.js!transpiled:64708:9)
Error loading http://localhost:8080/build/ember-app/assets/vendor.js
2) In step 5, if I replace the code with the commented version then I get following error(belive that its because the files should be loaded in specific order since "runningTests" is defined in vendor.js file):
child-app-errors.js:12 Uncaught Error: 'ember' died in status LOADING_SOURCE_CODE: (SystemJS) runningTests is not defined
ReferenceError: runningTests is not defined
at eval (http://localhost:8080/build/ember-app/assets/ember-app.js:294:1)
at eval (http://localhost:8080/build/ember-app/assets/ember-app.js:299:3)
at eval (<anonymous>)
at tryCatchReject (http://localhost:8080/build/system-polyfills.src.js:1188:30)
at runContinuation1 (http://localhost:8080/build/system-polyfills.src.js:1147:4)
at Fulfilled.when (http://localhost:8080/build/system-polyfills.src.js:935:4)
Evaluating http://localhost:8080/build/ember-app/assets/ember-app.js
Error loading http://localhost:8080/build/ember-app/assets/ember-app.js
at eval (http://localhost:8080/build/ember-app/assets/ember-app.js:294:1)
at eval (http://localhost:8080/build/ember-app/assets/ember-app.js:299:3)
at eval (<anonymous>)
at tryCatchReject (http://localhost:8080/build/system-polyfills.src.js:1188:30)
at runContinuation1 (http://localhost:8080/build/system-polyfills.src.js:1147:4)
at Fulfilled.when (http://localhost:8080/build/system-polyfills.src.js:935:4)
Evaluating http://localhost:8080/build/ember-app/assets/ember-app.js
Error loading http://localhost:8080/build/ember-app/assets/ember-app.js
Aucun commentaire:
Enregistrer un commentaire