Publish Angular Elments web component as npm package

Question

Is there a way to publish an angular app (which is wrapped as a web component using Angular Elements) as an npm package? I'm looking to import the web component in another app through npm as opposed to copying script files and including them in the angular.json.

I have created an angular app, successfully wrapped the app as a webcomponent using Angular Elements, created a separate main app to consume the component, imported the script files into the main app through the angular.json file, and successfully rendered my web component in the main app using the web component element tags.

Here is some of my code:

Web Component module

@NgModule({
  declarations: [AppComponent, ExplorerComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MultiViewerModule,
    StoreModule.forRoot({
      viewerConfig: viewerReducer
    }),
    CommonPlotsModule.forRoot(environment),
    StoreDevtoolsModule.instrument(),
    HttpClientModule
  ],
  entryComponents: [ExplorerComponent]
})
export class AppModule {
  constructor(injector: Injector) {
    const explorer = createCustomElement(ExplorerComponent, {injector});
    customElements.define('plots-element', explorer);
  }
  ngDoBootstrap() {
  
  }
}

Main App module:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

App Component in main app:

<plots-element></plots-element>

I am exploring importing the web component app from the dist folder but I haven't had any luck yet.

How can I create an npm package of an Angular Elements component which I can import into other apps?

I haven't found anything yet – afriedman111 Dec 15 '22 at 16:00 — afriedman111, Dec 15 '22 at 16:00

score 1 · Accepted Answer · answered Dec 04 '21 at 16:24

I found that copying the package.json file from my angular elements app project into the dist folder will allow me to do an npm link. Then if I link to that project in my consuming app I can reference the script files in my angular.json files like node_modules/my-lib/runtime.js etc. I can import the script files referenced from the global node_modules folder. I created a command in my package json that builds the elements app and copies the file:

...
"build:elements": "ng build app-elements --output-hashing none && cp projects/app-elements/package.json dist/app-elements"
...

This however does not allow me to import the component definition through an es6 import statement.

Publish Angular Elments web component as npm package

1 Answers1