Internet explorer & Angular 6 ERROR 错误：未捕获（承诺）：错误：正在加载块答案

【问题标题】：Internet explorer & Angular 6 ERROR Error: Uncaught (in promise): Error: Loading chunkInternet explorer & Angular 6 ERROR 错误：未捕获（承诺）：错误：正在加载块
【发布时间】：2019-03-15 10:02:14
【问题描述】：

我在使用 Angular 6 和 IE 11 时遇到问题，应用程序在 chrome 和其他浏览器中运行良好，但在 Internet Explorer 中，我得到了这个

ERROR 错误：未捕获（承诺中）：错误：正在加载块默认~app-xxxxx~eb5ba6d4 失败的。（缺少：http://localhost:4200/default~app-xxxx.js）错误：加载块 default~app-xxxx~eb5ba6d4 失败。（失踪： http://localhost:4200/default~app-xxxx~eb5ba6d4.js)

项目详情

Angular CLI：6.2.3 节点：8.12.0 操作系统：win32 x64 角度： ...

包版本

@angular-devkit/architect 0.8.3 @angular-devkit/核心 0.8.3 @angular-devkit/原理图 0.8.3 @原理图/角度 0.8.3 @原理图/更新 0.8.3 rxjs 6.2.2 打字稿 2.9.2

我的应用路由是

const routes: Routes = [
    {
        path: '',
        loadChildren:  'app/content/pages/pages.module#PagesModule'

    },
    {
        path: 'layout',
        loadChildren: 'app/content/layout/layout.module#LayoutModule',      
    },
    {
        path: '**',
        redirectTo: ''
    }
];

【问题讨论】：

您在开发控制台的网络选项卡中看到任何内容（例如 404）吗？
@Arikael 没有什么可看的像 404
文件的http状态是什么？或者你什么也看不见？我们曾经遇到过一些 AdBlocker 干扰的问题
尝试更新相关包，能否如Minimal, Complete, and Verifiable example一样发布足够的代码来重现问题。

标签： angular typescript internet-explorer angular6 internet-explorer-11

【解决方案1】：

花了几个小时终于找到了我的解决方案关于 promise((t,n) => ,

的问题

首先打开src/polyfills.ts文件，取消注释

/** 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';

=> lambda 表达式在 IE 中不支持，所以我们可以用代码 function() 代替这个表达式。

安装一些包

npm install --save web-animations-js

npm install --save classlist.js

然后我从一个 npm 包 (fuctbase64/index.js) 中发现了 Promise 问题

module.exports = function (event) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    let files = event.target.files;
    let len = files.length;
    if (len > 1) {
      reject(new DOMException("Only one file can be uploaded at a time"));
    } else {
      reader.onerror = () => {
        reader.abort();
        reject(new DOMException("Problem parsing input file."));
      };
      let file = files[0]
      reader.onload = (evt) => {
        const uint = new Uint8Array(evt.target.result);
        let bytes = [];
        uint.map(byte => {
          bytes.push(byte.toString(16));
        });
        const hex = bytes.join('').toUpperCase();
        let base64 = reader.result.split(',')[1];
        file.base64 = base64;
        file.binaryFileType = getMimetype(hex);
        resolve(file);
      };
      reader.readAsDataURL(file);
    }
  });
}

用

替换代码

module.exports = function (event) {
  return new Promise(function(resolve, reject)  {
    let reader = new FileReader();
    let files = event.target.files;
    let len = files.length;
    if (len > 1) {
      reject(new DOMException("Only one file can be uploaded at a time"));
    } else {
      reader.onerror = function() {
        reader.abort();
        reject(new DOMException("Problem parsing input file."));
      };
      let file = files[0]
      reader.onload = function(evt){
        const uint = new Uint8Array(evt.target.result);
        let bytes = [];
        uint.map(function(byte) {
          bytes.push(byte.toString(16));
        });
        const hex = bytes.join('').toUpperCase();
        let base64 = reader.result.split(',')[1];
        file.base64 = base64;
        file.binaryFileType = getMimetype(hex);
        resolve(file);
      };
      reader.readAsDataURL(file);
    }
  });
}

【讨论】：

> lambda 表达式在 IE 中不支持，也许您可以更改 tsconfig.json 文件中的 som 设置来解决此问题："module": "es2015" 和 "target":"es5"

【解决方案2】：

您必须添加元标记。

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

【讨论】：

【解决方案3】：

我认为您需要添加一些 polyfill。如果您打开 src/polyfills.ts 文件，您需要取消注释这些导入：

/** 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';

编辑：

正如@Arikael 在 cmets 中提到的那样，此列表下方可能列出了更多的 polyfil，您可能还想取消注释。

【讨论】：

在这些行下面有/** IE10 and IE11 requires the following for the Reflect API. */ import 'core-js/es6/reflect'; 你也取消注释了吗？
@Arikael 是的 "core-js/es6/reflect" 已经取消注释但仍然是同样的问题

【解决方案4】：

你能检查一下这里的步骤吗？ this was the issue with IE

Angular CLI 应用程序需要更多步骤才能支持 Internet Explorer。

【讨论】：

【解决方案5】：

我是 Angular 的新手。我在 Internet Explorer 中遇到了有关“加载块 xyz 模块失败”的错误。我尝试了很多东西，但没有解决方案。最后，我更改了在 NgModule 定义中添加“声明”数组和“导入”数组的顺序。我的意思是在 NgModule() 中的“导入”之前定义“声明”解决了我的问题。

@NgModule({
  declarations: [SomeComponent],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    MaterialModule,
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: translateHttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ]
})

【讨论】：

【解决方案6】：

如果无法加载块，则会发生这种情况，由于连接不良，这种情况在移动设备上会更频繁地发生。如果一个块加载失败，您需要进行一些错误处理，例如要求用户重新加载页面。

ref

【讨论】：