Angular optimze-flag on ng build --prod loses stencil-components

[jasperbosch]

I made a Angular-component-library containing StencilJS-components and used that in a Angular-application. In dev-mode all works as expected. After making a production build with optimize: true (angular.json), running the application does not show any Stencil Component. No errors or warnings.

There is however a warning during build about the entrypoint containing deep imports => This is probably not a problem, but may cause the compilation of entry points to be out of order.`

The source of the deep imports is the proxies.ts that is generated.

Could that be the cause of the problem?

I am using Angular10.

[fblcompeople]

Same issue for me. After building with ng build --prod stencil webcomponents aren't visible.

[fblcompeople]

I could solve it by modifying the ComponentLibraryModule. I build my uppon this template: https://github.com/ionic-team/stencil-ds-angular-template/blob/master/src/component-library-module.ts

I'll moved the defineCustomElements() function into the module constructor. This survived the --prod flag.

@jasperbosch can you verify that this solves the issue?

import { NgModule } from "@angular/core";
import { defineCustomElements } from "component-library/loader";

import { DemoComponent } from "./directives/proxies";

// defineCustomElements(window); // <-- move from here

const DECLARATIONS = [
  // proxies
  DemoComponent
];

@NgModule({
  declarations: DECLARATIONS,
  exports: DECLARATIONS,
  imports: [],
  providers: []
})
export class ComponentLibraryModule {
    constructor() {
        defineCustomElements(window); // <-- to here
   }
}

[jasperbosch]

YES! This works. Thank you for this solution.

[fblcompeople]

Please keep this issue open, so ionic devs can fix it in their template.

[jasperbosch]

Still getting a issue in IE about 'fetch not defined'. (In one of my components fetch is used to import a i18n-language-file.) I changed the constructor to:

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

but that did not help.