Search code examples
angularweb-component

Angular web components with custom elements error

I am trying to create a basic web component in Angular with Angular Elements.

So far, I have done the following:

  1. Installed Elements using npm i @angular/elements --save
  2. Installed npm i @webcomponents/custom-elements -- save
  3. Added CUSTOM_ELEMENTS_SCHEMA to schemas array in app.module.ts
  4. Created the component, call it MyComponent
  5. Defined MyComponent as a custom element in AppModule using the code below
    export class AppModule {
        constructor(injector: Injector) {
            const el = createCustomElement(WeatherForecastComponent, { injector });
            customElements.define('weather-forecast', el);
        }
    }

With all that done, running npm start gives me the following errors:

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 328:49-63 Can't import the named export 'ApplicationRef' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 323:68-85 Can't import the named export 'ChangeDetectorRef' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 123:50-74 Can't import the named export 'ComponentFactoryResolver' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 187:25-49 Can't import the named export 'ComponentFactoryResolver' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 320:30-38 Can't import the named export 'Injector' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 233:40-46 Can't import the named export 'NgZone' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 204:33-46 Can't import the named export 'ReplaySubject' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 404:42-54 Can't import the named export 'SimpleChange' from non EcmaScript module (only default export is available)

Can't import the named export 'Version' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 346:32-35 Can't import the named export 'map' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 206:68-73 Can't import the named export 'merge' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@angular/elements/fesm2015/elements.mjs 206:46-55 Can't import the named export 'switchMap' from non EcmaScript module (only default export is available)

If I'm not mistaken, they are caused by the createCustomElement function call.

I've tried including some polyfills and adapters, but they are different from tutorial to tutorial, and none solve this issue. I searched everywhere for a solution, but in vain.

Any ideas what I'm doing wrong?

Solution

  • The problem was I had Angular 10.x, but the @angular/elements was installed with latest version. When I upgraded Angular and Node to correct versions, everything started working as expected.