Build an Angular Component library that uses angular-elements?

Question

Our organization is building a component library where we add our components that are used on all our sites. For example we have a header and footer that we include on all our microsites. However, not all sites are built with Angular, so we have been looking into angular-elements.

We've done a couple of test projects using angular-elements, created a new project and outputted a button that can be used on any html page, technology agnostic. Super cool!

However, what are the best practices when it comes to building a component library using elements, are there any?

Our component library structure is as follow:

├── angular.json
├── CHANGELOG.md
├── component-lib
├── e2e
├── node_modules
├── package.json
├── README.md
├── src
├── tsconfig.json
├── tslint.json
└── yarn.lock

Where we have the demo page in the src/ folder and the components are in component-lib/

We build the component library with ng build component-lib, this outputs this folder:

└── component-lib
    ├── bundles
    ├── designsystem-component-lib.d.ts
    ├── designsystem-component-lib.metadata.json
    ├── esm2015
    ├── esm5
    ├── fesm2015
    ├── fesm5
    ├── lib
    ├── package.json
    ├── public_api.d.ts
    └── README.md

Is it possible to get the output as an angular-element? Any resources that have done the same?

score 0 · Answer 1 · answered Aug 26 '19 at 11:58

I followed this example: https://github.com/santoshyadav198613/ngRxElementDemo so it fits my own project.

I ended up creating a new ng project inside the same repo (called component-elements). The only responsibility that app has is to import the component-lib.module and package the angular-elements.

Inside component-lib.module.ts in component-lib I defined my custom elements.

export class ComponentLibraryModule {
  constructor(private injector: Injector) {
    const navbar = createCustomElement(NavBarComponent, { injector });
    customElements.define('elements-nav-bar', navbar);
    const footer = createCustomElement(FooterComponent, { injector });
    customElements.define('elements-footer', footer);
  }
}

In component-elements app I import @component-lib defined in tsconfig.json

 "paths": {
      "@component-lib": ["component-lib/src/lib"],
      "@component-lib/*": ["component-lib/src/lib/*"]
    }

And in elements-component I have the following app.module

import { ComponentLibraryModule } from '@component-lib/component-lib.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ComponentLibraryModule, FontAwesomeModule],
  providers: [],
  bootstrap: []
})
export class AppModule {
  ngDoBootstrap() {}
}

Build an Angular Component library that uses angular-elements?

1 Answers1