Angular 17.3.5中'app-root'选择器匹配失败问题求助

问题背景 #

将Angular 2项目迁移至17.3.5版本时，使用独立组件触发NG05104错误：控制台提示The selector "app-root" did not match any elements，但项目中并未主动使用app-root选择器。所有组件均标记standalone = true，AppComponent定义了app-root选择器但未被其他组件引用，app.component.html仅包含<app-home></app-home>，项目可正常构建部署，但所有页面均触发该异常。

报错堆栈 #

Error: NG05104: The selector "app-root" did not match any elements.
    at DefaultDomRenderer2.selectRootElement (platform-browser.mjs:654:13)
    at locateHostElement (core.mjs:11436:34)
    at ComponentFactory.create (core.mjs:15806:17)
    at _ApplicationRef.bootstrap (core.mjs:31460:42)
    at core.mjs:35074:32
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:14882:33)
    at _ZoneDelegate.invoke (zone.js:367:52)
    at _Zone.run (zone.js:130:43)
    at zone.js:1260:36

核心原因 #

Angular默认的应用引导逻辑是启动AppComponent，但DOM中不存在与app-root选择器匹配的元素；或者你期望直接引导HomeComponent作为根组件，但未修改main.ts的引导配置。

解决方案 #

方案1：保留AppComponent作为根组件 #

检查项目根目录下的index.html文件，确保其中包含<app-root></app-root>标签。Angular引导AppComponent时，会在DOM中查找该选择器对应的元素来渲染组件内容。
示例index.html关键代码：

<body>
  <app-root></app-root>
</body>

方案2：直接引导HomeComponent作为根组件 #

修改main.ts文件，将引导目标从AppComponent替换为HomeComponent，无需依赖app-root选择器：
修改前的main.ts：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
// 路由或其他提供者配置

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

修改后的main.ts：

import { bootstrapApplication } from '@angular/platform-browser';
import { HomeComponent } from './app/home/home.component';
import { provideRouter } from '@angular/router';
// 路由或其他提供者配置

bootstrapApplication(HomeComponent, {
  providers: [provideRouter(routes)]
});

验证结果 #

• 方案1：添加<app-root>标签后，Angular会正常渲染AppComponent，进而加载其中的<app-home>组件，异常消除。
• 方案2：直接引导HomeComponent后，应用会以HomeComponent作为根组件启动，无需依赖AppComponent的选择器，异常不再出现。

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