用angular5练习,偶然发现,在Chrome等浏览器跑飞了的代码,竟然在IE面前就是战五渣,第一个页面都加载不出来,决心解决下。
项目环境就是ng new命令生产的默认结构,没有其余特殊设置。
F12开始看后台,一个错误都没有。气急败坏的反复刷新,错误总算出来了(我的猜想这个情况多是由于个人电脑有问题,理论上应该第一次打开就能看到错误)。
object doesn't support property or method 'startsWith'
随便一搜,这个错误很广泛,总结起来就是IE的脚步落后了,有些语法不支持,须要polyfill的辅助才行。解决方案也很简单,就是重写polyfill的对应方法。因为不清楚到底把代码该写在哪里,进项目下查看一番,发如今src文件夹下,有一个叫polyfill.js的文件。
文件打开一看,问题基本上解决了。看下文件内和本次相关的内容:程序员
/** IE9, IE10 and IE11 requires all of the following polyfills. **/ import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/weak-map'; import 'core-js/es6/set'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ import 'classlist.js'; // Run `npm install --save classlist.js`. /** IE10 and IE11 requires the following for the Reflect API. */ import 'core-js/es6/reflect';
简单明了,以上代码原来都是注释掉的,相信你们都懂了,打开注释,问题解决了。这部分,相信在其余框架里也有对应的处理,你们细心找一下就ok。es6
第一步错误处理搞定,本觉得万事大吉,结果又提示了类似的错误,此次是找不到方法readAsBinaryString(练习中用涉及到了文件读取)。有了前边的经验,搜索起来得心应手,缘由仍是IE的步伐慢,暂时还没支持readAsBinaryString,解决方案是readAsArrayBuffer方法代替。npm
走着,先判断下浏览器是否支持readAsBinaryString,而后再决定用哪一个方法!浏览器
readFile(file: any) { const reader = new FileReader(); if (!FileReader.prototype.readAsBinaryString) { reader.onload = (event: any) => { let binary = ''; const bytes = new Uint8Array(event.target.result); const length = bytes.byteLength; for (let i = 0; i < length; i++) { binary += String.fromCharCode(bytes[i]); } this.readFileContent(binary, file.name); }; reader.readAsArrayBuffer(file); //IE浏览器 } else { reader.onload = (event: any) => { const data = event.target.result; this.readFileContent(data, file.name); }; reader.readAsBinaryString(file); //其余浏览器 } }
跑一下,完美解决!
IE真是程序员的噩梦呀,遇到噩梦,翻个身再睡!框架