You may need an appropriate loader to handle this file type when using Angular and LitElement

Question

My application is built with angular 7.

To boost some productivity I'm using components that are based on lit-element, exactly there are based on ing-bank/@lion.

When running that I got an error

ERROR in ./node_modules/@lion/accordion/src/LionAccordion.js 204:40
Module parse failed: Unexpected token (204:40)
You may need an appropriate loader to handle this file type.
|
|   __setupSlots() {
>     const invokerSlot = this.shadowRoot?.querySelector('slot[name=invoker]');
|     const handleSlotChange = () => {
|       this.__cleanStore();

As I assuming, there is a problem to include es6 web components into angular application that is targeting es5?

How to make it work?

Answer 1

Yes, the object?.property optional chaining operator is very recent and the => lambda operator wasn't in ES5.

Both are now supported in every browser except IE11.

I'd recommend targeting a more recent JS version, but if you need to work on IE11 you'll need to apply a transform down to it as part of your build. Webpack should be able to do it, but you may need to add babel-loader to downgrade your dependencies.