[SOLVED] Enforce es6 Browser shims in angular2 / webpack

Enforce es6 Browser shims in angular2 / webpack

I made this "widget" which clients can load on their website in angular2. e.g.

<some-name config="clientcode"></some-name>

There are some more settings etc. but that's not relevant, values are pulled from the native element, all seems to work fine on ancient browsers as well.

However one client uses all these fancy polyfills/shims (without checking if they're there like so:

Object.extend(Function.prototype, {
argumentNames: function() {
    var a = this.toString().match(/^[\s\(]*function[^(]*\(([^\)]*)\)/)[1].replace(/\s+/g, "").split(",");
    return 1 != a.length || a[0] ? a : []
},
bind: function() {
    if (2 > arguments.length && Object.isUndefined(arguments[0]))
        return this;
    var a = this
      , b = $A(arguments)
      , c = b.shift();
    return function() {
        return a.apply(c, b.concat($A(arguments)))
    }
}, ... });

These conflict with my angular2 widget especially the last 4 lines of this snippet (not really the last one though).

The fun part is, that is was all working on RC5, which I had to roll back to. Does anyone know if I can force angular2/webpack to include those shims to override my client's? And ensure that it always works embedded into an existing website? It will cause a bit of bloat, but in this case it's not a huge deal since it's a website/service people would use once a month or maybe once a week.

Solution

Normally polyfills (core-js in particular) won't be applied if the feature already exists.

If the problem can be narrowed down to bind, it can be removed before adding polyfills to the project:

if (Function.bind && !/\[native code\]/.test(Function.bind)) {
  delete Function.prototype.bind;
}

import 'core-js/shim';