How to not bootstrap Angular web elements for lazy loading

Question

I'm trying to build an angular application to build web elements using @angular/elements module.

The root project will only be used for testing those components in a standard stand-alone app.

I created a project called "elements" which only purpose will be to create components and distribute them as web elements which works fine so far.

I am now trying to lazy load those elements. I only want the related bundles files when I'm really using the component.

Here is my app.module.ts which defines the web elements:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector, DoBootstrap, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { createCustomElement } from '@angular/elements';
import { CfLabelComponent } from './cf-label/cf-label.component';
import { CfAdslComponent } from './cf-adsl/cf-adsl.component';

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [],
})
export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) { }

  ngDoBootstrap() {
    customElements.define('cf-label', createCustomElement(CfLabelComponent, { injector: this.injector }));
    customElements.define('cf-adsl', createCustomElement(CfAdslComponent, { injector: this.injector }));
  }
}

I understand that Angular needs something to bootstrap on. I don't have the classic app.component.ts as I don't need it at the end of the day. The previous code is working but bootstraps the components cf-label & cf-adsl inside the main.js which is understandable but this is not what I want. Could you please suggest a way to approach this matter?