How to use it in angular 4 project

[hiwotamare]

I am using a library called "builder-pattern" that uses es6 proxy in my angular 4 project. And I added this javascript file(import "../node_modules/proxy-polyfill/src/index.js") in the polyfill.ts file. But IE 11 still throws an error. Is there any one who used this library in angular 2+ successfully. If so please help?

[westor21]

Today I spent some time to make this work. In the file where I use the proxy I did this:

import proxyPolyfillFunc from 'proxy-polyfill/src/proxy';
..
if (window['Proxy']) {
    proxy = new Proxy(o, handler);
} else {
    const ProxyPolyfill = proxyPolyfillFunc();
    proxy = new ProxyPolyfill(o, handler);
}

My IE 11 also has a problem with ES 6 template strings, I got an error at lines like this (line 45) in the source of this polyfill:

throw new TypeError(`Proxy polyfill does not support trap '${k}'`);

I replaced the template strings with normal concatenated strings and it worked.

[westor21]

Ah, for the ES6 compatibility I see, I have to import the minified version: import proxyPolyfillFunc from 'proxy-polyfill/proxy.min.js';

[venkateshparihar]

can you give the polyfills code for it

[westor21]

What do you mean? My answer referred the library in this repo. The code remains in node_modules/proxy-polyfill after npm install proxy-polyfill

[venkateshparihar]

I want to know how you are Implementing proxy polyfills in angular 2 or above

[westor21]

import proxyPolyfillFunc from 'proxy-polyfill/proxy.min.js';
..
let proxy;
if (window['Proxy']) {
    proxy = new Proxy(o, handler);
} else {
    const ProxyPolyfill = proxyPolyfillFunc();
    proxy = new ProxyPolyfill(o, handler);
}

while 'proxy' is the new proxy object, 'o' the original object and 'handler' is the proxy handler, in my usecase I use set and get, e.g.

const handler = {
        get: function(obj, prop) {
          if (prop in obj) {
            return obj[prop];
          }
          throw new Error(`Getter ${prop} in Object not found.`);
        },
        set: function(obj, prop, value) {
          if (prop in obj) {
            console.log(`Setting ${value} for ${obj.$id}.`);
            obj[prop] = value;
            ...
            // Indicate success
            return true;
          }
          throw new Error(`Setter ${prop} in Object not found`);
        }
      };

[venkateshparihar]

comlink is working properly in all browser except ie and vendor js error comes after implementing proxy polyfills can you send me demo app where you integrate it in angular.

thanks in advance

[westor21]

Here is a small Demo. It runs in IE 11 too. https://stackblitz.com/edit/angular-proxy-polyfill

[skesarwani]

I am getting the error as Function expected in IE11,

Implemented following:

Thanks, any help is appreciated.

[samthor]

I've updated the documentation in the README about how to include the code. It wasn't quite right.

The recommended way is just to bring in proxy.min.js—don't use anything from that file, just import it directly.