Angular应用编译成功却报my-app未匹配任何元素错误，该如何排查？

错误原因分析 #

my-app did not match any elements 错误属于Angular应用启动挂载阶段的问题，和你提供的路由、app.component.html配置无关，触发原因是Angular启动时找不到和根组件selector匹配的DOM节点来挂载应用。

排查及解决步骤 #

• 第一步：确认根组件（默认路径为src/app/app.component.ts）的selector配置
  检查@Component装饰器中的selector字段取值，确认是否为my-app，示例配置如下：

  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent { }
  

• 第二步：检查index.html中的挂载节点配置
  打开src/index.html文件，确认body标签内存在和根组件selector完全匹配的标签，示例如下：

  <body>
    <my-app></my-app>
  </body>
  

  多数情况下该错误都是因为修改了根组件的selector后没有同步更新index.html中的对应标签，或者误删了index.html中的挂载标签导致的。
• 第三步：确认AppModule的启动配置正确
  打开src/app/app.module.ts，检查@NgModule配置中的bootstrap数组是否正确指定了根组件：

  @NgModule({
    declarations: [
      AppComponent,
      BoardComponent,
      ViewlistComponent
    ],
    imports: [
      BrowserModule,
      RoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

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