Angular创建组件后页面不显示，提示app.component不是模块

问题根源分析 #

• 核心错误：你将组件的HTML模板代码错误写入了app.component.ts文件中。Angular里.ts文件是组件类的定义载体，而非模板文件，这会导致Angular无法正确识别AppComponent为合法组件类，进而抛出"app.component is not a module"错误。
• 额外问题：模板中使用了<app-shopping-list>组件，但该组件未在app.module.ts的declarations数组中声明，即便修复前一个错误，该组件仍无法正常显示。

解决方案 #

1. 修复app.component.ts文件 #

把当前app.component.ts中的HTML代码移至app.component.html，并将app.component.ts恢复为标准组件类结构：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'your-app-name'; // 替换为你的应用名称
}

2. 整理app.component.html文件 #

将之前错误放在app.component.ts里的HTML代码粘贴到app.component.html：

<app-header></app-header>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <app-recipes></app-recipes>
      <app-shopping-list></app-shopping-list>
    </div>
  </div>
</div>

3. 声明ShoppingListComponent #

在app.module.ts中导入并声明ShoppingListComponent：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { RecipesComponent } from './recipes/recipes.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
import { RecipeDetailsComponent } from './recipes/recipe-details/recipe-details.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component'; // 新增导入

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RecipesComponent,
    RecipeListComponent,
    RecipeDetailsComponent,
    ShoppingListComponent // 新增声明
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 重启开发服务器 #

执行ng serve重启开发服务器，刷新浏览器验证组件显示效果。

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