msal-angular v2.0.4 引入Promise polyfill后IE11无法运行问题咨询

问题原因 #

Script 1002 是IE11的典型语法报错，触发原因是代码中存在IE11不支持的ES6+语法，和你添加的polyfill无关，也不是msal js和msal angular的功能差异导致。本质是你当前的构建流程没有把msal相关依赖的代码转成ES5规范：msal-angular v2依赖的@azure/msal-browser包默认导出ES6版本的产物，你仅配置了自身业务代码转ES5，没有处理第三方依赖的语法，所以会触发该报错。

解决方案 #

• 调整msal依赖的导入路径，强制使用ES5版本的产物。在tsconfig.json的compilerOptions节点下新增paths配置，内容如下：

"paths": {
  "@azure/msal-browser": ["./node_modules/@azure/msal-browser/dist/msal-browser.js"],
  "@azure/msal-angular": ["./node_modules/@azure/msal-angular/dist/msal-angular.js"]
}

• 校验polyfill加载顺序，你引入的bluebird Promise polyfill必须放在index.html的head标签最顶部，优先级高于所有其他script标签，不能放到body底部或其他依赖之后加载。
• 确认Angular构建的基础配置：tsconfig.json中的compilerOptions.target必须设置为es5，不能为es2015或更高版本；browserlist.rc中要保留IE 11的配置，不要在构建时排除该目标。
• 清理重复的Promise polyfill，不要同时引入bluebird、core-js Promise、Angular专用Promise polyfill，多份实现冲突也会导致IE11运行异常，仅保留bluebird一份即可。
• 如调整后仍有报错，可在angular.json的build配置中新增vendorChunk: true，拆分出第三方依赖包的构建产物，直接打开产物搜索箭头函数=>、const、let等ES6关键字，定位未转译的第三方依赖，将其添加到angular.json的build.options.allowedCommonJsDependencies列表中，强制构建流程对其做ES5转译。

内容的提问来源于stack exchange，提问作者zaedric