最近同事发现前端项目中使用single-spa,出现不兼容性问题,找我来协助下。我去捣鼓了一下,看了下官网关于angular的处理方案,如下:
Internet Explorer If you need to support IE11 or older, do the following: 1.Add core-js polyfill 2.Remove arrow functions from index.html (example) 3.Change angular.json target to es5 (example) Full example commit to get IE11 support
index.html 引入如下js
<script src='https://unpkg.com/core-js-bundle/minified.js'></script>
官网给了example,如下:
}
</script>
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.5/system/single-spa.min.js" as="script" crossorigin="anonymous" />
<script src='https://unpkg.com/core-js-bundle@3.1.4/minified.js'></script>
<script src="https://unpkg.com/zone.js"></script>
<script src="https://unpkg.com/import-map-overrides@1.6.0/dist/import-map-overrides.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/system.min.js"></script>
@@ -30,20 +31,32 @@
System.import('single-spa').then(function (singleSpa) {
singleSpa.registerApplication(
'navbar',
// () => System.import('navbar'),
// location => true
function () {
return System.import('navbar');
},
function (location) {
return true;
}
)
singleSpa.registerApplication(
'app1',
// () => System.import('app1'),
// location => location.pathname.startsWith('/app1')
function () {
return System.import('app1');
},
function (location) {
return location.pathname.startsWith('/app1');
}
);
singleSpa.registerApplication(
'app2',
// () => System.import('app2'),
// location => location.pathname.startsWith('/app2')
function () {
return System.import('app2');
},
function (location) {
return location.pathname.startsWith('/app2');
}
)
singleSpa.start();
按照这个把你们的不兼容函数改掉
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
// "target": "es2015",
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
----- 后面发现
接着上面 ,项目中用的是single-spa-vue ,按照上面处理完之后发现遇到 Application 'user-server' died in status LOADING_SOURCE_CODE: "does not export an unmount function or array of functions" 这个问题
后面看了半天,发现我用的 single-spa-vue 版本是 1.5.4 ,这个版本 还不兼容,直接 single-spa-vue 升级到最新版本。
参考: https://single-spa.js.org/docs/ecosystem-angular/#internet-explorer
全部评论