Angular自定义组件在浏览器中显示为0x0且无法正常展示的问题

核心问题排查与修复步骤 #

1. 确保组件已在模块中正确声明 #

Angular组件必须在对应NgModule的declarations数组中注册，否则框架无法识别该组件。打开app.module.ts（或你创建的对应模块文件），确认TestComponentComponent已被导入并添加到声明列表：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// 导入TestComponent
import { TestComponentComponent } from './test-component/test-component.component';

@NgModule({
  declarations: [
    AppComponent,
    TestComponentComponent // 必须添加到此处
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 不要直接在index.html中放置组件 #

Angular应用的入口是app-root根组件，你需要把app-test-component放到app.component.html模板内，而非直接写入index.html：
修改app.component.html：

<!-- 保留原有内容，添加测试组件 -->
<app-test-component></app-test-component>

index.html仅需保留<app-root></app-root>即可，Angular会自动渲染根组件及其内部的子组件。

3. 补充组件模板内容与基础样式 #

如果test-component.component.html为空，组件会因无内容显示为0x0尺寸。给模板添加基础内容：

<!-- test-component.component.html -->
<div class="test-container">
  这是TestComponent的测试内容
</div>

同时在test-component.component.css中设置样式确保组件有可见尺寸：

.test-container {
  padding: 20px;
  border: 1px solid #ccc;
  min-height: 50px;
}

完成以上操作后，重启Angular开发服务器（ng serve），组件即可正常显示。

内容的提问来源于stack exchange，提问作者Jess Antonio Bojorquez Espinoz