Cannot get storage-blob library to work in Angular 7 application using IE 11

[johnbigley]

• Azure Storage Blob client library for JavaScript

• 12.1.2

• Windows 10

• browser

  • name/version: IE 11

• typescript

  • version: 3.1.1

• Is the bug related to documentation in

  • README.md
  • source code documentation
  • SDK API docs on https://docs.microsoft.com

I do not think this is a bug, but I would appreciate some assistance. I am using this package in an Angular 7 application and it works with all browsers except for IE 11; the only IE version that I need to support. I get this error:

Script1002: Syntax error
vendor.js (145800,1)

At that line in vendor.js is this:
class AzureKeyCredential {

I have run into a similar problem in the past and I had to use polyfills to fix it, but this time I have added all the polyfills and I still get the problem. Below is a copy of my polyfills.ts file. I also tried adding all the core-js\es7 polyfills and it did not help. Any assistance would be appreciated.

/**

• This file includes polyfills needed by Angular and is loaded before the app.
• You can add your own extra polyfills to this file.
• This file is divided into 2 sections:
• 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
• 2. Application imports. Files imported after ZoneJS that should be loaded before your main

•  file.
  

• The current setup is for so-called "evergreen" browsers; the last versions of browsers that
• automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
• Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
• Learn more in https://angular.io/guide/browser-support
  */

/***************************************************************************************************

• BROWSER POLYFILLS
  */

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

/**

• If the application will be indexed by Google Search, the following is required.
• Googlebot uses a renderer based on Chrome 41.
• https://developers.google.com/search/docs/guides/rendering
  **/
  import 'core-js/es6/array';
  import 'core-js/es7/array';

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

/**

• Web Animations @angular/platform-browser/animations
• Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
• Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
  **/
  // import 'web-animations-js'; // Run npm install --save web-animations-js.

/**

• By default, zone.js will patch all possible macroTask and DomEvents
• user can disable parts of macroTask/DomEvents patch by setting following flags
  */

// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

/*

• in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
• with the following flag, it will bypass zone.js patch for IE/Edge
  */
  // (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************

• Zone JS is required by default for Angular itself.
  */
  import 'zone.js/dist/zone'; // Included with Angular CLI.

/***************************************************************************************************

• APPLICATION IMPORTS
  */

[ghost]

Thanks for the feedback! We are routing this to the appropriate team for follow-up. cc @xgithubtriage.

[jeremymeng]

Unfortunately class is not supported in IE11. Two dependencies of the storage library use them: @azure/core-auth and @opentelemetry/api and we don't have control over the latter.

We have some guide to work around this when bundling: https://github.com/Azure/azure-sdk-for-js/blob/master/sdk/storage/storage-blob/README.md#special-bundling-notes-for-ie11. Could you please have a look? Does Angular run a particular bundler behind the scenes?

[jeremymeng]

Another question: is there a browserslist file where you can enable the support for IE?

[johnbigley]

I have previously taken the steps to make my app work in IE 11. I also use the MSAL library which requires steps to make it run in IE 11. I believe the bundler in Angular is webpack.

Here is my browserslist:
"broswerslist" : [
"last 2 versions",
"not ie <= 10",
"not is_mob <= 10",
"IE 11"
],

And here are my compiler options to produce ES5:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"esnext.asynciterable",
"dom"
]
}
}

[johnbigley]

I am confused. Angular uses class extensively.

[jeremymeng]

I am confused. Angular uses class extensively.

I suspect that when bundling, Angular does not touch vendor libraries by default. I created a test project that shows how to make storage blob library to work in IE 11 using Webpack + Babel.

https://github.com/jeremymeng/storage-webpack-bundle#use-babel-to-transpile-our-output

Not sure yet how easy it would be to customize Angular to integrate this.

[jeremymeng]

I did some search on the Internet, and @angular-builders/custom-webpack looks a popular one to use. A random link: https://netbasal.com/customize-webpack-configuration-in-your-angular-application-d09683f6bd22

[johnbigley]

I was looking at the code in the debugger and I noticed that it appears that I am getting modules from the wrong distribution. I should be getting the version from dist not dist-esm. I had a similar problem early on using the storage-blob library, see #7296. You helped me with that one.

// "./node_modules/@azure/core-auth/dist-esm/src/azureKeyCredential.js":
/!**********************************************************************!
! ./node_modules/@azure/core-auth/dist-esm/src/azureKeyCredential.js !
********************************************************************/
/! exports provided: AzureKeyCredential /
// (function(module, webpack_exports, webpack_require) {

"use strict";
webpack_require.r(webpack_exports);
/* harmony export (binding) / webpack_require.d(webpack_exports, "AzureKeyCredential", function() { return AzureKeyCredential; });
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
/*

• A static-key-based credential that supports updating
• the underlying key value.
  /
  class AzureKeyCredential {
  /*
  • Create an instance of an AzureKeyCredential for use
  • with a service client.
  • @param key the initial value of the key to use in authentication
    /
    constructor(key) {
    if (!key) {
    throw new Error("key must be a non-empty string");
    }
    this._key = key;
    }
    /*
  • The value of the key to be used in authentication
    /
    get key() {
    return this._key;
    }
    /*
  • Change the value of the key.
  • Updates will take effect upon the next request after
  • updating the key value.
  • @param newKey the new key value to be used
    */
    update(newKey) {
    this._key = newKey;
    }
    }
    //# sourceMappingURL=azureKeyCredential.js.map

/***/ }),

[jeremymeng]

The problem in #7296 was not dist-esm v.s. dist, but because we didn't have a browser replacement for ./dist-esm/src/utils/utils.node.js.

In this case, AzureKeyCredential from node_modules\@azure/core-auth/dist/index.js also has the class keyword because it is not ES5 compatible. Simiar for node_modules\@opentelemetry\api\build\src\trace\NoopTracer.js

[johnbigley]

This information helps a lot. I am wondering if this is similar to the problem that MSAL had at one point. I believe they provided a library compatible with ES5. I don't remember all of the details. I did find this https://github.com/AzureAD/microsoft-authentication-library-for-js/pull/868/files. I will look into the transpiling options. Is it possible for you to provide an ES5/IE11 compatible version of this library like MSAL did?

[johnbigley]

I remembered some of the details of the problem with MSAL. It would not work with IE 11 so I had to download the source code and added that code to my project to compile it into ES5. A few months later they updated MSAL and I was able to consume their library without any problems with IE 11. I removed the code and installed the new library using npm.

[jeremymeng]

We have fixed @azure/core-auth, but we don't own @opentelemetry/api though. The issue is tracked at open-telemetry/opentelemetry-js#902

[jeremymeng]

To clarify the fix to @azure/core-auth has not been released yet but will be soon.

[ramya-rao-a]

@jeremymeng, Now that the fix to @azure/core-auth has been released, what are the next steps here?

[jeremymeng]

We are still blocked by open-telemetry/opentelemetry-js#902. I think it is still useful to have this as a tracking issue. Not sure how it would impact out issue status reporting though.

[ghost]

Thanks for the feedback! We are routing this to the appropriate team for follow-up. cc @xgithubtriage.

[ramya-rao-a]

Removing the Service Attention label as the pending work here is related to our dependency on Open Telemetry.
Assigning to @xirzec

Either we wait for OT to fix this and then we update our dependency
Or we look for alternative solutions like downlevel compiling the types package

[xirzec]

The OpenTelemetry issue was fixed in this PR: open-telemetry/opentelemetry-js#1368

As soon as they publish a release that contains that fix, we can adopt the new version.

[ramya-rao-a]

That is great news @xirzec!

Another piece of good news is that there doesnt seem to be any breaking changes to deal with from our side when moving to 0.6.1 to the latest 0.10.1. See #10393

Assuming the same proves for the next version, it should be a trivial change for us

[ramya-rao-a]

Re-opening as we still need to release the storage packages with updated dependencies

[SychevIgor]

@ramya-rao-a do we have date for this package release? Really important for our project

[jeremymeng]

I believe the plan is to have a new release of storage libraries later this month.

[ljian3377]

I think we will need to postpone the release to early September.

[xirzec]

@ljian3377 is there a release planned this month still?

[jeremymeng]

new versions of Storage libraries have just been released which should fix this. Closing.