Angular 18独立模式下Stencil Web Components按需加载问题

问题现象 #

我按Stencil官方文档搭建了Stencil与Angular的单仓项目，在Angular 18.2独立模式的app.component.ts里只引入并使用了MyComponent，但运行应用后，控制台网络面板显示所有Stencil组件（包括未使用的component-2）都被加载了。实际项目里有40+组件，已经导致页面体积超过10MB，当前方案无法继续推进。

配置困惑 #

Stencil文档说明dist-custom-elements输出目标默认会按组件生成独立文件；但Angular文档指出，若使用SCAM（单组件Angular模块）或独立输出类型，必须将customElementsExportBehavior设置为"single-export-module"才能生成正确的包装器，而这个设置会把所有组件合并到单个index.js文件中，两者的配置要求存在矛盾。

复现步骤 #

• 执行git clone https://github.com/Loic57/stencil-angular-18
• 运行npm i（需提前安装lerna）
• 进入packages/stencil-library目录，执行npm run build
• 进入packages/angular-workspace目录，执行npx -p @angular/cli ng build component-library
• 进入packages/angular-workspace/projects/my-app目录，执行npm run start

内容的提问来源于stack exchange，提问作者Helysion