How to use stencilJs web components in Angular Universal

Posted on by

I have developed some web components using stencilJs, and add them to my angular project by npm package with no issue

The changes I made was

main.ts


import { applyPolyfills, defineCustomElements } from 'my-package/loader';

...
applyPolyfills().then(() => {
    defineCustomElements();
});

and in App.moudle

    schemas: [CUSTOM_ELEMENTS_SCHEMA],

then in my app.component.html

 <my-comp #comp></my-comp>

and in my app.component.ts

    @ViewChild('comp') comp!: ElementRef<HTMLMyCompElement>;

    ngOnInit(): void {
        console.log(this.digitalVerification.nativeElement);
        this.comp.nativeElement.configure({ token: '123' });
    }

and this is working prefect with no error

Then I tried to convert my app to angular universal to have some server side rendering, by running ng add @nguniversal/express-engine

Then in the added files I made these changes

app.server.module.ts

    schemas: [CUSTOM_ELEMENTS_SCHEMA],

main.server.ts

  import { applyPolyfills, defineCustomElements } from 'my-package/loader';

  ...
  applyPolyfills().then(() => {
      defineCustomElements();
  });

Then I ran the project by npm run dev:ssr, but I get this error in terminal as soon I open the page, although this.digitalVerification.nativeElement has value and I am able to see it in terminal logs

ERROR TypeError: this.comp.nativeElement.configure is not a function

Any idea?

Source: Angular Questions