Search code examples
angularwebpackecmascript-6polymerbabeljs

How to compile angular 6 project having ECMA6 JS [polymer js] into a single bundle


I have angular6 application and using external JS files in ECMA6 [eg: polymer] Now when I build my application using Angular CLI, it's not able to transpile these External ECMA6 JS files due to which the applications fail to load in IE11.

Note: We are using polyfills provided by polymer due to which it's working in Mozilla but as IE11 needs both polyfills and compilation of ECMA6 files so it fails. Babel can transpile ECMA6 JS files but I haven't been able to integrate with angular CLI. Is there any way to compile this type [angular project + polymer component or any ECMA6 js] application in one bundle.


Solution

  • You answered your own question. You need to integrate babel. Use webpack to bundle it all into one js file. Have a look at:

    https://medium.com/@hubert.zub/using-babel-7-and-preset-typescript-to-compile-angular-6-app-448eb1880f2c

    https://medium.com/google-developer-experts/mix-and-match-angular-custom-elements-polymer-1aee0b3d63a1