Angular独立组件启动报错：未使用选择器却提示'app-login'未匹配元素

原因分析 #

当你通过bootstrapApplication(LoginComponent)启动Angular应用时，LoginComponent会作为根组件被初始化。如果根组件的@Component装饰器中定义了selector属性，Angular会自动去项目根目录的index.html文件里寻找匹配该选择器的DOM元素，以此作为组件的挂载点。但你没有在index.html中添加<app-login></app-login>标签，导致Angular找不到对应的挂载位置，因此抛出该错误。

两种解决方式 #

方式一：在index.html中添加匹配标签 #

打开项目根目录下的index.html，在<body>标签内部添加<app-login></app-login>标签，示例如下：

<body>
  <app-login></app-login>
</body>

方式二：移除LoginComponent的selector（推荐根组件场景） #

根组件无需通过selector挂载，直接由bootstrapApplication完成初始化，因此可以直接删除@Component装饰器中的selector: 'app-login'配置。修改后的组件代码片段如下：

@Component({
  standalone: true,
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  imports: [FormsModule, CommonModule],
})
export class LoginComponent {
  // 组件逻辑保持不变
}

说明：第二种方式更适合作为根组件的使用场景，无需额外维护index.html中的标签；如果后续需要将LoginComponent作为子组件嵌入其他组件中，再重新添加selector配置即可。

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