Angular 20.2.0自定义组件无法显示的问题求助

我太懂跟着5年前的老教程踩坑的憋屈感了——明明步骤都对着做，结果组件死活不出来，真的闹心。咱们一步步拆解问题，把这个组件给揪出来：

首先，先纠正一个核心误区：别在index.html里直接放自定义组件 #

Angular的应用启动逻辑是从<app-root>开始的，这是Angular框架唯一会在index.html里识别的入口组件。你之前在index.html里加的<app-square>，Angular根本不会处理它——因为Angular初始化的时候只会接管<app-root>内部的内容，外部的元素它管不着。所以第一步先把index.html里的<app-square>删掉，body里只留<app-root>：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Myapp2</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root> <!-- 只保留这个根组件入口 -->
</body>
</html>

自定义组件必须放在Angular组件的模板里，比如你改的app.component.html就对，继续用这个。

然后，解决组件的“合法身份”问题 #

现代Angular（20.2.0属于最新版本）有两种组件模式：独立组件和NgModule组件，你之前的错误就是没给组件正确的身份，导致Angular认不出它：

方案1：把Square改成独立组件（推荐现代Angular的做法）

打开square.component.ts，在@Component装饰器里加上standalone: true，这样组件就可以被其他组件直接引用了：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-square',
  standalone: true, // 新增这一行，标记为独立组件
  template: `
    <button class="square">{{ value }}</button>
    <h1>Hello from Square Component</h1>
  `,
  styles: [`
    .square {
      width: 60px;
      height: 60px;
      font-size: 24px;
      margin: 2px;
      background: #fff;
      border: 1px solid #999;
      cursor: pointer;
    }
  `]
})
export class AppSquareComponent {
  @Input() value: string | null = null;
}

这时候你之前在app.component.ts里加的imports: [AppSquareComponent]就是正确的，不用改。

方案2：用NgModule声明组件（适合传统项目模式）

如果你的项目是用NgModule创建的（比如创建时加了--no-standalone参数），那不能在组件的imports里引用其他非独立组件，必须把Square组件声明到AppModule里：
打开app.module.ts（如果没有的话，说明你是独立组件模式，用方案1就行），修改成这样：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppSquareComponent } from './square.component'; // 引入Square组件

@NgModule({
  declarations: [
    AppComponent,
    AppSquareComponent // 在这里声明Square组件
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这时候要把app.component.ts里的imports: [AppSquareComponent]删掉，因为NgModule已经帮你声明了这个组件，AppComponent可以直接用它。

最后一步：重启开发服务器 #

Angular的热重载有时候会“偷懒”，尤其是修改了组件的standalone属性或者NgModule之后，停掉当前的ng serve命令，重新跑一遍ng serve，确保所有修改都生效。

额外小技巧：看控制台找线索 #

打开浏览器F12的Console标签页，看看有没有类似'app-square' is not a known element的报错，这类提示能直接告诉你问题出在哪——比如没声明组件、没加standalone属性都会报这个错。

按照这些步骤改完，你的Square组件应该就能正常显示啦！

内容来源于stack exchange