シングルスパで子アプリケーションとしてemberアプリケーションをロードする際の問題

Question

シングルスパ（https://github.com/CanopyTax/single-spa）の子アプリケーションの1つとしてemberを使用しようとしていますが、jsファイルのassets/vendor.js、assets /ember-app.jsをsystemJSを使用して正しく実行します。残り火

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で単一のスパ例を設定

1））（完全ではない燃えさしのスケルトン単一スパフックメソッドを追加しますが、今の[OK]をする必要があり）：

手順問題を再現します

//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(); 
    }); 
} 

2a）emberアプリケーション用のプレースホルダdivを追加します。

#in single-spa-example-master/index.html add 
<div id="ember-app"></div> 

2B）燃えさし環境でrootElementプロパティを追加

#in src/ember-app/config/environment.js 
APP: { 
     // Here you can pass flags/options to your application instance 
     // when it is created 
     rootElement: '#ember-app' 
    } 

3）ビン/ビルド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）ビルドを追加ビルドコードの一部として

#!/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）子アプリケーションとして燃えさしアプリを宣言し、アプリ

//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を実行します）

npm install 
npm start 

7アプリケーションを起動する）ISSUE http://localhost:8080/#/ember

で燃えさしアプリにアクセスしてください：

1）vendor.jsファイルが読み込まれますが、ember-app.jsファイルがロードされません（クロムネットワークタブで確認できます）

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）ステップ5で、コードをコメント付きのバージョンに置き換えると、「runningTests」がvendor.jsファイルで定義されているため、ファイルが特定の順序でロードされるため、エラーが発生します）：

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 

Answer 1

明確な説明と手順を再現してくれてありがとう！私はすべてのステップを実行して、あなたが報告したのとまったく同じエラーを得ることができました。

あなたが見ているtldrは、SystemJSがember-app.jsとvendor.jsバンドルを正しく実行する方法を知らないということです。

長い説明：SystemJSがバンドルのコードをダウンロードすると、コードの正規表現が実行され、そのフォーマットが表示されます。vendor.jsファイルには、amd、cjs、esmモジュールの構文がありますSystemJSはバンドルをesm（es6）モジュールの構文として解釈することにします。その後、コードをSystem.register形式に変換し、コードを"use strict"ステートメントでjavascript strictモードで強制的に実行します。厳密なモードでは、コードは別のコンテキスト（this）で実行されます。そのため、this.EmberはエラーCannot read property 'Ember' of undefinedになります。もしあなたがそれについてもっと詳しく知りたいのであれば、あるいはそれが意味をなさないのであれば教えてください。追跡にはしばらく時間がかかりましたが、今理解していると思っています。

これはすべて、SystemJSの奥深くにあり、シングルスパの仕組みからかなり除外されています。

シングルスパのアプリ内でEmberが動作しているかどうかを確認したい場合は、この問題を回避するためにhttps://github.com/CanopyTax/single-spa-examples/pull/37#pullrequestreview-53690825をチェックします。 https://github.com/CanopyTax/single-spa-examples/issues/33#issuecomment-319359153も参照してください。