Issue with wrapping Vaadin Controls using Angular Directives about vaadin

[tomivirkki]

Also see if you can find something useful from this repo/branch https://github.com/vaadin/base-starter-angular/tree/examples

[web-padawan]

Ok, now I finally understand what you are trying to achieve, thanks for the clarification.

However as I mentioned above, I changed the import and it worked for me locally.

Note, It's generally better to use import to the actual file:

import '@vaadin/vaadin-checkbox/vaadin-checkbox.js';

Instead of the one that is included to your example

import '@vaadin/vaadin-checkbox';

Please let me know if this still doesn't work for you.

[msbasanth]

It worked. Thanks a lot @web-padawan

[web-padawan]

Hi, looks like this might be related to transpiling node_modules to ES5.

Check out origami which helps to prepare Polymer components for using in Angular 7+.

[tomivirkki]

Adding the following in package.json "scripts" might also help (haven't tested with Angular)

"postinstall": "npm run prepare:es5",
"prepare:es5": "babel node_modules/@vaadin node_modules/@polymer node_modules/@webcomponents/shadycss -x '.js' --out-dir ./ --relative --presets @babel/env"

[msbasanth]

Thanks @web-padawan and @tomivirkki

We will look into origami, meanwhile we tried preparing with es5 and we are getting a different error.

zone.js:396 ERROR TypeError: Class constructor GestureEventListeners cannot be invoked without 'new'
    at CheckboxComponent.VaadinThemePropertyMixin [as constructor] (vaadin-theme-property-mixin.js:8)
    at CheckboxComponent.VaadinThemableMixin [as constructor] (vaadin-themable-mixin.js:11)
    at CheckboxComponent.VaadinTabIndexMixin [as constructor] (vaadin-control-state-mixin.js:15)
    at CheckboxComponent.VaadinControlStateMixin [as constructor] (vaadin-control-state-mixin.js:52)
    at CheckboxComponent.VaadinDirMixin [as constructor] (vaadin-dir-mixin.js:31)
    at CheckboxComponent.VaadinElementMixin [as constructor] (vaadin-element-mixin.js:29)
    at CheckboxComponent.CheckboxElement [as constructor] (vaadin-checkbox.js:55)
    at new CheckboxComponent(alert.component.ts:17)
    at NodeInjectorFactory.CheckboxComponent[as factory] (alert.component.ts:20)
    at getNodeInjectable (core.js:3666)

Then we got to know that extending from CheckboxElement is not really required as ElementRef.nativeElement already contain vaadin-checkbox. So now we don't have constructor errors after removing VaadinCheckbox extension.

@Component({
  selector: 'vaadin-checkbox',
  template: '<ng-content></ng-content>'
})
export class VaadinComponent {
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    this.el = new  CheckboxElement(); // Without new CheckboxElement we are not seeing WebComponent rendered
    c.detach();
    this.el = r.nativeElement;
  }
}

So we removed extending from CheckBoxElement and now with the above code we are able to see the WebComponent rendered.

Observation

1. With new CheckboxElement() the WebComponent is rendered.
2. If you have window.customElements.define("vaadin-checkbox", CheckboxElement); instead of new VaadinCheckbox still WebComponent is rendered.

So it looks like customElement registration is not happening if we only use ElementRef instance.

How we can trigger customElement registration without creating an instance or explicitly registering to the custom element? Or any other approach which is more suitable for wrapping WebComponents in Angular?

Regards
Basanth

[tomivirkki]

Since you're transpiling to es5, you'll also need to include this https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs

[msbasanth]

Thanks for the quick reply.

This is my index.html snippet

  <script src="https://unpkg.com/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>

My polyfills.ts

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'; 

import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

I tried adding both ways so app is getting custom-elements-es5-adapter.js, but the error still persists.

Now we are checking whether we can avoid limiting our WebComponents to ES5 as in the below code.

@Component({
  selector: 'vaadin-checkbox',
  template: '<ng-content></ng-content>'
})
export class VaadinComponent {
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    this.el = new  CheckboxElement(); // Without new CheckboxElement we are not seeing WebComponent rendered
    c.detach();
    this.el = r.nativeElement;
  }
}

Any comment on, how we can trigger customElement registration without creating an instance here?

Regards
Basanth

[web-padawan]

These two scripts are doing exactly the same so you only need one of them:

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'; 
import '@webcomponents/custom-elements/src/native-shim';

Also, you only need them with latest browsers (not in older ones like IE11).
You should not need calling new CheckboxElement() manually.

Could you provide is with a small reproduction so we could investigate?

[msbasanth]

Hi @web-padawan & @tomivirkki,

Here is the GitHub sample where we are trying vaadin-checkbox wrapping in an AngularComponent using Angular directives. https://github.com/msbasanth/vaadin-ng-wrapper

As you could see we have new CheckboxElement(); in https://github.com/msbasanth/vaadin-ng-wrapper/blob/master/src/app/vaddin-checkbox-component/vaddin-checkbox-component.ts

Which is only needed for registering the custom element(?). It looks like the custom element registration is not happening when we trigger vaadin-checxbox creation through an Angular directive.

Any further inputs are appreciated.

Regards
Basanth

[web-padawan]

@msbasanth I have tried your example locally and updated it to only use this import:

import '@vaadin/vaadin-checkbox/vaadin-checkbox.js';

Importing this file is enough for vaadin-checkbox custom element to be defined.
Note that is also imports the component definition from src internally.

Speaking about extending HTML element and registering that as Angular element, personally I'm not sure whether that is possible. At least I haven't seen the example of such usage.

[msbasanth]

Hi,

Thanks for the update.

Regarding extending vaadin-checkbox element: We are trying an approach similar to @ionic/angular - https://github.com/ionic-team/ionic/tree/master/angular

Most of our applications are in Angular and would like to give a wrapper without adding a new node in between. Which gives benefits like,

• Type checking in templates can happen at compile time
• Can avoid CUSTOM_ELEMENTS_SCHEMA usage
• Can think the possibility of providing test harness specific to component in Angular
• We can have control over change detection strategy in Angular

With "new CheckboxElement()" the wrapping works and vaadin-checkbox rendered properly. One thing which is confusing us, the (one time) custom element registration is not happening without "new CheckboxElement". Registering custom element from Anglar wrapper (window.customElements.define("vaadin-checkbox", CheckboxElement)) also works but it is not a cleaner approach.

NB: We are not converting vaadin-checkbox to Angular Element we just do an angular wrapping of vaadin element.

Regards
Basanth