I followed this documentationt to build a monorepo with stencil and angular : https://stenciljs.com/docs/angular
Nothing less, nothing more.

When running my angular app I can see in the network tab in my console that my two stencil components are loaded whereas I only need one.

In my app.component.ts (angular 18.2 in standalone mode) I call only “my-component” but my two components are called in the console.

import { RouterOutlet } from '@angular/router';
import { MyComponent } from 'component-library';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, MyComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'my-app';
}

I would like to load only the right component, not everything at once.

For the brave, I’ve made a repo : https://github.com/Loic57/stencil-angular-18

• git clone https://github.com/Loic57/stencil-angular-18
• npm i (be sure to have lerna installed)
• go to packages/stencil-library and run : npm run build
• go to packages/angular-workspace and run : npx -p @angular/cli ng build component-library
• go to packages/angular-workspace/projects/my-app and run : npm run start

The browser should open on localhost:4200 and you should see “Hell, i’m a test” which is shipped by default with stencil.

But if you inspect the network tab in the console you should see another component name “component-2” created by myself but which is not called in app.component.ts

In the demo wxe have only 2 components so it’s ok, but I’m working in a 40+ components project and the page is very heavy (more than 10Mo)

I can’t continue this way.

There is something which disturb me a lot.
In the documentation it says :
By default, the dist-custom-elements output target generates a single file per component, and exports each of those files individually.

But, in the angular documentation it says :
The configuration for the Custom Elements output target must set the export behavior to single-export-module for the wrappers to generate correctly if using the scam or standalone output type.

So, in one side it says, “keep customElementsExportBehavior on default to have one component per file” and on the other side it says “change customElementsExportBehavior to ‘single-export-module’ if you need standalone components”

But single-export-module’ regroups all the components into one index.js file.

I’m lost