How can I build a secondary entry point as angular element?

Question

So, I have an angular lib, this lib has two secondary entry point components that I want to publish as angular elements so that I can import @project/lib/component1 and @project/lib/component2.

I have the entry points configured this way:

projects
│   public-api.ts
│   package.json    
│   ng-package.json  
│   angular.json  
│   component1-element.ts 
│   component2-element.ts  
│
└───component1
│   │   component1.component.ts
│   │   component1.module.ts
│   │   component1.component.html 
│   │   package.json
│   │   public-api.ts
│   │   index.ts
│   │       
└───component2
│   │   component2.component.ts
│   │   component2.module.ts
│   │   component2.component.html 
│   │   package.json
│   │   public-api.ts
│   │   index.ts

with this configs in ng-package.json:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "./dist/lib",
  "lib": {
    "entryFile": "public-api.ts"
  }
}

and this in lib public-api.ts:

export * from "./component1";
export * from "./component2";

when I run ng build lib I get a dist folder with the configured secondary entry points with this structure:

dist/lib
│   lib.d.ts
│   package.json    
│   public-api.d.ts   
│
└───component1
│   │   component1.component.d.ts
│   │   component1.module.d.ts
│   │   package.json
│   │   public-api.d.ts
│   │   index.d.ts
└───component2
│   │   component2.component.d.ts
│   │   component2.module.d.ts
│   │   package.json
│   │   public-api.d.ts
│   │   index.d.ts

Now, into Angular elements, in my componet1.module.ts and componet2.module.ts I'm already creating the custom elements for both components:

export class ComponentElementModule {
  constructor(private injector: Injector) {}

  public ngDoBootstrap(): void {
    const el = createCustomElement(Component, {
      injector: this.injector,
    });
    customElements.define("lib-component", el);
  }

And at the root of my lib I have the platform registry for both component1-element.ts and component2-element.ts:

platformBrowserDynamic()
  .bootstrapModule(ComponentElementModule)
  .catch((err) => console.log(err));

How can I make the build to build the Angular Elements and not the Angular Modules of both components?

How can I build a secondary entry point as angular element?

0 Answers0