Getting 'Map' is undefined error.

[Shijir]

OS?

Windows 7 (running on a VM)

Versions.

angular-cli: 1.0.0-beta.20-4
node: 6.6.0
os: darwin x64

Repro steps.

I am trying to use the custom elements v1 polyfill (custom-elements.min.js) in the angular-cli.json by using the following pattern:

      "scripts": [
        "../node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
        "../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
      ],

This works across all browsers except IE10. In the console, it says:

SCRIPT5009: 'Map' is undefined 

Mention any other details that might be useful.

It logs an error when I try to use it in the scripts section of angular-cli.json. The error will be gone and the polyfill will start working fine if I insert es6-shim in the script:

      "scripts": [
        "../node_modules/es6-shim/es6-shim.min.js",
        "../node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
        "../node_modules/@webcomponents/custom-elements/custom-elements.min.js"
      ],

Here I don't want to use es6-shim because there is core-js/es6/map imported in the polyfills.ts file.

The log error was pointing at the polyfill (https://github.com/webcomponents/custom-elements/blob/master/custom-elements.min.js).

[filipesilva]

I think I know the reason for this. It's true that you have core-js/es6/map in polyfills.ts, but the scripts array is loaded before the main bundle. So custom-elements.min.js never sees the Map shim.

The solution is to add es6-shim to scripts instead of polyfills.ts. Maybe the CLI should do that by default really.

[filipesilva]

Also related to #2752

[Shijir]

@filipesilva thank you for the response. Your explanation really helped me to confirm my assumption of what was causing the error. I am wondering why script arrays are loaded before polyfills. In the documentation, it's recommended to have those 3rd party libraries in the scripts array. But there are some libraries that depend on the polyfills such as core-js and other shims. So I thought it would make sense if angular-cli loads those 3rd pary libraries after loading the polyfills.ts.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}