Internet explorer & Angular 6 ERROR Error: Uncaught (in promise): Error: Loading chunk

Question

I am getting issue while using angular 6 and IE 11, app is working fine in chrome & another browser but in internet explorer, i am getting this

ERROR Error: Uncaught (in promise): Error: Loading chunk default~app-xxxxx~eb5ba6d4 failed. (missing: http://localhost:4200/default~app-xxxx.js) Error: Loading chunk default~app-xxxx~eb5ba6d4 failed. (missing: http://localhost:4200/default~app-xxxx~eb5ba6d4.js)

Project details

Angular CLI: 6.2.3 Node: 8.12.0 OS: win32 x64 Angular: ...

Package Version

@angular-devkit/architect 0.8.3 @angular-devkit/core 0.8.3 @angular-devkit/schematics 0.8.3 @schematics/angular 0.8.3 @schematics/update 0.8.3 rxjs 6.2.2 typescript 2.9.2

My app routing is

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

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

do you see anything (like a 404) in the dev console's network tab? — Arikael
– Arikael, Commented Mar 15, 2019 at 10:06
what is the http status of the file? Or do you see nothing at all? We once had the problem that some AdBlocker interfered — Arikael
– Arikael, Commented Mar 15, 2019 at 11:34
Try to update the related packages, can you post the Enough code to reproduce the problem as in Minimal, Complete, and Verifiable example. — Zhi Lv
– Zhi Lv, Commented Mar 18, 2019 at 7:26

BJ Coder · Accepted Answer · 2019-03-18 09:58:41Z

After investing some hours finally found my solutions Issue about promise((t,n) => ,

At first, open the src/polyfills.ts file, and uncomment

/** 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 expression does not support in IE so we can replace with code function() instead of this expression.

Install some packages

npm install --save web-animations-js

npm install --save classlist.js

Then i was found promise issue from one of the npm package (fuctbase64/index.js)

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);
    }
  });
}

Replace code with

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 expression does not support in IE, maybe you can change som settings in your tsconfig.json-file instead to fix this: "module": "es2015", and "target":"es5"

Puneet Uppal · Accepted Answer · 2019-03-15 11:13:58Z

1

You have to add meta tag.

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

answered Mar 15, 2019 at 11:13

Puneet Uppal

3101 silver badge10 bronze badges

Comments

John · Accepted Answer · 2019-03-15 11:37:46Z

1

I think you need to add some polyfills. If you open the src/polyfills.ts file, you need to uncomment these imports:

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

EDIT:

There might be more polyfils listed below this list, as mentioned by @Arikael in the comments, that you might want to uncomment as well.

edited Mar 15, 2019 at 11:37

answered Mar 15, 2019 at 10:10

John

11.6k5 gold badges60 silver badges75 bronze badges

2 Comments

Arikael Over a year ago

below these lines there is /** IE10 and IE11 requires the following for the Reflect API. */ import 'core-js/es6/reflect'; Did you uncomment this too?

BJ Coder Over a year ago

@Arikael yes "core-js/es6/reflect" already uncommented but still same issue

RSJ · Accepted Answer · 2019-03-15 11:35:21Z

0

Can you check the steps from this? this was the issue with IE

Angular CLI applications require a few more steps in order to support Internet Explorer.

answered Mar 15, 2019 at 11:35

RSJ

414 bronze badges

Comments

AbdurrahmanY · Accepted Answer · 2019-07-31 21:10:12Z

0

I am new at angular. I have faced an error about "loading chunk xyz module failed" in Internet Explorer. I had tried lots of things but no solution. Finally I changed adding order of "declarations" array and "imports" array in NgModule definition. I mean defining "declarations" before "imports" in NgModule() solved my problem.

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

answered Jul 31, 2019 at 21:10

AbdurrahmanY

90513 silver badges23 bronze badges

Comments

Muhammed Moussa · Accepted Answer · 2020-06-23 10:33:44Z

0

This happens if a chunk could not be loaded, which will happen more often on mobile due to poor connections. You need to have some error handling in case a chunk failed to load, such as asking the user to reload the page.

ref

answered Jun 23, 2020 at 10:33

Muhammed Moussa

5,2471 gold badge39 silver badges29 bronze badges

Collectives™ on Stack Overflow

Internet explorer & Angular 6 ERROR Error: Uncaught (in promise): Error: Loading chunk

Package Version

6 Answers 6

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Package Version

6 Answers 6

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related