Material-components-web: Material Components throws syntax error in IE 11

[judearasu]

I have a angular 4 application where i use material components and not angular material. I am running the app using ng serve and not with native web-pack.

From starter's guide i followed the steps to integrate the mdc-button component in my angular4 app https://material.io/components/web/docs/getting-started/.

After including the mdc-button sass file on angular4 style.scss and including the button code on the html.I am able to see the changes on Chrome and IE11 browser.

On importing the ES2015 file for @material/ripple on my component file and the changes reflected on the chrome browser. But on IE11, it throws the syntax error on vendor.bundle.js pointing to the node module @material/ripple and breaks the application.

"use strict"; eval("Object.defineProperty(webpack_exports, \"esModule\", { value: true });\n/* harmony export (binding) */ __webpack_require.d(webpack_exports, \"MDCRipple\",

[acdvorak]

Thanks for filing this issue!

Could you possibly send us a small Gist or Git repo that reproduces the problem?

It would be especially helpful if we could see how you're importing and compiling your JS. Maybe there's a transpilation issue?

We tried the Getting Started guide and it worked for us in IE11.

[judearasu]

Yes, i will send the git repo

[jvalst]

We've a problem with IE11 in combination with MDC as well. We're using webpack for bundling our files, but don't want to run the node_modules through the babel-loader as well. When we run it through the babel-loader, everything works fine. But when we set the exclude on node_modules on, there are issues with MDC. When using webpack, is it the right way to only include the "dist" javascript files from MDC?

[acdvorak]

@jvalst It sounds like your issue is unrelated; please create a new issue and we'll be happy to help.

[acdvorak]

This sounds like a client issue, so closing it for now. Feel free to reopen if you're seeing IE bugs in the MDC library itself. Thanks! 😀

[danieldaeschle]

I have the same error. TypeScript doesn't transpile the mdc code automatically. Does someone has a solution how to use it with Angular??? Please help me :(