Issue
I am trying to create a basic web component in Angular with Angular Elements.
So far, I have done the following:
- Installed Elements using
npm i @angular/elements --save
- Installed
npm i @webcomponents/custom-elements -- save
- Added
CUSTOM_ELEMENTS_SCHEMA
toschemas
array in app.module.ts - Created the component, call it
MyComponent
- Defined
MyComponent
as a custom element inAppModule
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.
Answered By - dzenesiz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.