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?