我試圖使用作爲一個單一的水療中心應用程序(https://github.com/CanopyTax/single-spa),但我無法加載js文件assets/vendor.js,資產/ember-app.js正確使用systemJS。加載應用程序中的應用程序作爲單應用程序中的子應用程序
步驟來重現問題:
1)與Ember
git clone [email protected]:CanopyTax/single-spa-examples.git
cd single-spa-examples
cd src
ember new ember-app
cd ember-app
npm install
2設置單一溫泉爲例)添加骨架單一溫泉掛鉤方法燼(未完成,但現在應該是確定的)
//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)爲燼應用添加佔位符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 \
"[email protected]"
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)去燼應用在http://localhost:8080/#/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中,如果我將代碼替換爲註釋版本,那麼我會得到以下錯誤(相信它是因爲應該按特定順序加載文件,因爲「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