【问题标题】：Issue in loading ember app as child application in single-spa在单水疗中心加载 ember 应用程序作为子应用程序的问题
【发布时间】：2017-08-01 12:40:36
【问题描述】：

我正在尝试使用 ember 作为具有单个 spa(https://github.com/CanopyTax/single-spa) 的子应用程序之一，但是我无法使用 systemJS 正确加载 js 文件 assets/vendor.js、assets/ember-app.js。

重现问题的步骤：

1) 使用 ember 设置单个 spa 示例

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) 为 ember 添加骨架单 spa 钩子方法（不完整但现在应该没问题）

//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) 在 ember 环境中添加 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) 为单个 spa 添加构建脚本（添加 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) 将构建添加为构建代码的一部分

#!/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) 将 ember 应用声明为子应用并运行该应用

//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) 转到 http://localhost:8080/#/ember 的 ember 应用程序

问题：

1) vendor.js 文件加载但 ember-app.js 文件未加载（可在 chrome 网络选项卡中验证）

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 步中，如果我将代码替换为注释版本，则会出现以下错误（相信这是因为文件应按特定顺序加载，因为在 vendor.js 文件中定义了“runningTests”）：

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

【问题讨论】：

标签： ember.js systemjs

【解决方案1】：

感谢您提供清晰的描述和重现步骤！我能够执行所有步骤并得到与您报告的完全相同的错误。

您所看到的 tldr 是 SystemJS 不知道如何正确执行 ember-app.js 和 vendor.js 包。

更长的解释：当 SystemJS 下载这些包的代码时，它会在代码上运行正则表达式以查看它的格式。vendor.js 文件具有 amd、cjs 和 esm 模块语法的组合，但 SystemJS 决定将包解释为 esm (es6) 模块语法。然后它将代码转换为 System.register 格式，并使用 "use strict" 语句强制代码以 javascript 严格模式执行。一旦进入严格模式，代码将在不同的上下文 (this) 下运行，这就是为什么 this.Ember 会导致错误 Cannot read property 'Ember' of undefined。让我知道您是否需要有关其中任何一个的更多详细信息，或者它是否没有意义。我花了一段时间才找到，但我相信我现在明白了，如果你愿意，我可以给你更多细节。

话虽如此，所有这些都深深植根于 SystemJS 的内部，并且与 single-spa 的工作方式完全不同。

如果您只想看看在单水疗中心应用程序中运行 Ember 的情况，我会查看 https://github.com/CanopyTax/single-spa-examples/pull/37#pullrequestreview-53690825 了解我在哪里解决了这个问题。另请参阅https://github.com/CanopyTax/single-spa-examples/issues/33#issuecomment-319359153 和相关讨论。

【讨论】：