Internet Explorer和Angular 6错误错误:未捕获(按承诺):错误:正在加载块

时间:2019-03-15 10:02:15

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

在使用angular 6和IE 11时出现问题,该应用在chrome和其他浏览器中工作正常,但是在Internet Explorer中,我得到了这个提示

  

错误错误:未捕获(承诺):错误:正在加载块   默认〜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 / schematics 0.8.3   @ schematics /角度0.8.3   @ schematics /更新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: ''
    }
];

6 个答案:

答案 0 :(得分:1)

我认为您需要添加一些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在评论中所述,此列表下方可能还会列出更多polyfils,您可能也想取消注释。

答案 1 :(得分:1)

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

  1. 首先,打开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';

=> IE中不支持lambda表达式,因此我们可以用代码function()代替此表达式。

  1. 安装一些软件包

    npm install-保存web-animations-js

    npm install-保存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);
    }
  });
}

答案 2 :(得分:0)

您必须添加元标记。

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

答案 3 :(得分:0)

您可以从中检查步骤吗? this was the issue with IE

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

答案 4 :(得分:0)

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

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

答案 5 :(得分:0)

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

ref