Solution for Angular IE Error: Uncaught (in promise) Loading chunk
Tags: angular, typescript, tutorial
Published: 2020-02-12 13:49:11

<!-- wp:paragraph -->
<p>In this article, angular developer will learn the most common error's solution which is: <strong><em>"Uncaught (in promise) Loading chunk"</em></strong> Angular &amp; IE. Developer is facing this error while working with angular and IE browser, Yes App is running fine with chrome &amp; another browser but not in internet explorer.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>#2 Step to solve Internet explorer &amp; Angular Error: Uncaught (in promise): Loading chunk</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>After researching some hours; we finally found solution and that issue about <strong>promise((t,n)=&gt;,</strong> promise keyword does not supporting in IE.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>STEP 1: Open the src/polyfills.ts file, and uncomment below code</h2>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>/** 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';</code></pre>
<!-- /wp:code -->

<!-- wp:list -->
<ul><li>lambda expression does not support in IE so we can replace with code function() instead of this expression.</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>STEP 2: Install some packages as below</h2>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>npm install --save web-animations-js
npm install --save classlist.js</code></pre>
<!-- /wp:code -->

<!-- wp:list -->
<ul><li><strong>Then We found promise issue from one of the npm package (fuctbase64/index.js)</strong></li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code>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);
    }
  });
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Replace code with</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>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);
    }
  });
}</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3>Over To You!</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Check out full <a rel="noreferrer noopener" aria-label="StackOverFlow thread (opens in a new tab)" href="https://stackoverflow.com/questions/55180018/internet-explorer-angular-6-error-error-uncaught-in-promise-error-loading" target="_blank">StackOverFlow thread</a> for more details about solution.</p>
<!-- /wp:paragraph -->