ng5 兼容IE之 object doesn't support property or method 'xxxxxx'

用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真是程序員的噩夢呀,遇到噩夢,翻個身再睡!框架

相關文章
相關標籤/搜索