Angular 17中使用组件选择器无法显示组件，求问题排查

结合Angular 17默认采用独立组件模式的特性，按以下步骤排查问题：

• 确认XComponent的独立组件配置
  打开x.component.ts，检查@Component装饰器是否包含standalone: true。Angular 17通过ng generate component创建的组件默认会开启该配置，若手动创建组件时遗漏，需补上：

  @Component({
    selector: 'app-x',
    standalone: true, // 必须配置该属性
    imports: [],
    templateUrl: './x.component.html',
    styleUrl: './x.component.css'
  })
  export class XComponent {}
  

• 在AppComponent中显式导入XComponent
  即便已在app.component.ts顶部导入XComponent，仍需将其添加到AppComponent的@Component装饰器的imports数组中，否则Angular无法识别该组件：

  import { Component } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { XComponent } from './x/x.component'; // 顶部导入组件
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule, XComponent], // 必须添加至该数组
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
  })
  export class AppComponent {}
  

• 验证XComponent的选择器是否匹配
  检查x.component.ts中的selector值是否为app-x，若为其他值（如app-my-x），需同步修改app.component.html中的标签为对应选择器。

• 检查AppComponent模板结构
  若app.component.html包含<router-outlet>标签，确认<app-x>的位置是否在路由出口之外；若<app-x>被放在路由出口内部，当前路由加载的组件会覆盖该区域，导致无法显示。

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