target: es6 doesnt work with @AsObservable

[mgalante]

Dear Aleix,
We are using ngx-propserve on a Angular 7 (Angular Element) with target: es6 in tsconfig.json
When compiling with AOT, the decorator doesnt do anything. In es5 works correctly.
We worked arround doing a custom precompiling of the code and replacing the decorator with static code (add setters and an auxiliar variable).

Any ideas on why this could be happening?

[aleics]

Hi Miguel,

Well, that's not cool :)

I didn't really experiment with a es6 target, but it did work for me in a demo project using Angular 11 & AOT. I guess the Angular version is less of a problem, but not sure.
Happy to take a look into the issue, but I think it would be faster if you could provide a reproducible example 🙏

Edit: Also, I might be really interested on how you use Angular Elements together with ngx-propserve, since I didn't contemplate this use case when I've implemented the library at first.

[mgalante]

I think i can provide you with a minimal case of the error!
Also i can share you the pre-compiling code we are using, its not the best solution but it could be a starting point for a WebPack plugin...
Now im rushing with some production issues but i will be back here soon.
Thanks again for everything my friend

[aleics]

Hi @mgalante! Did you find a moment to come with that minimal case? :) Thank you!

[mgalante]

its something related to angular libraries, we will provide you a minimal example soon

[mgalante]

Hi @aleics, a member of my team, @marcosdavilam has prepared a minimal example of the error
https://github.com/marcosdavilam/angular-element-prop-serve

Sorry for the delay, and thanks for your incredible work

[aleics]

Hi @mgalante and @marcosdavilam, thank you very much for the reproducible example. I'm able to reproduce it as well.

Looking at the dist files, it seems that when compiling with es5, the AsObservable decorator is included in the prototype:

When compiling with es6, the AsObservable decorator is not included in the component's class:

Now, comparing this with a demo project of mine, without any Angular Elements, but plain default Angular components. Using the same tsconfig.json that you provide for ES6:

It seems that webpack would add the property a$, and decorate it using AsObservable, where in the compiled file of your example this part is missing.

I'm not really familiar on how Angular Elements get built, but maybe the decorators are not automatically included when using createCustomElements? Maybe it needs to have a NgElementConfig with a custom strategy factory?

I've seen that your project uses Angular 7. Did you try out to update it to a newer version? I've seen that Angular had some issues with custom decorators in the past as well, when using Ivy & AOT Compiler. So, maybe Angular Elements + Custom decorators is not something well supported yet? Do you use in your projects other custom decorators, that do work using this setup?