mardi 1 août 2017

Issue in loading ember app as child application in single-spa

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