Angular 17中如何定义多个独立组件作为可选根元素

别靠捕获错误来挨个尝试启动组件，先检查DOM里有没有对应组件的根元素，再启动对应的Angular组件，从根源避免NG05104错误。

具体代码实现 #

import { bootstrapApplication } from '@angular/platform-browser';
import { CustomComponent } from './app/custom.component';
import { AnotherComponent } from './app/another.component';

// 组件选择器与组件类的映射
const componentMap = [
  { selector: 'app-custom-component', component: CustomComponent },
  { selector: 'app-another-component', component: AnotherComponent }
];

// 找到当前页面存在的根组件
const targetComponent = componentMap.find(item => document.querySelector(item.selector));

if (targetComponent) {
  bootstrapApplication(targetComponent.component)
    .catch(err => console.error('Angular应用启动失败', err));
} else {
  console.error('未找到可启动的Angular根组件');
}

当前方案的潜在问题 #

虽然功能正常，但这些隐患不能忽视：

• 干扰错误排查：每次启动失败都会输出NG05104错误，会掩盖真实的应用问题，增加排查难度。
• 错误监控误报：如果用了Sentry这类监控工具，这些预期内的错误会被统计为异常，产生大量无效告警。
• 扩展性差：后续加新组件时，得不断链式追加catch，代码会越来越臃肿难维护。
• 隐性内部副作用：Angular启动失败时会执行内部清理逻辑，虽然当前场景影响不大，但不是最优实践，可能埋下未知隐患。

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