Angular报错：类型AppComponent不存在属性nome，但已在组件中正确声明

问题场景 #

已在HomeComponent中声明变量nome：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent {
  nome = 'nome'
}

并在模板home.component.html中使用字符串插值：

<form>
    <mat-form-field>
        <label>{{nome}}</label>
        <input matInput type="text" name="nome">     
    <mat-form-field />
    <mat-form-field >
        <label>Email</label>
        <input matInput type="email" name="email">     
    <mat-form-field />
 <form>

但报错提示：Property 'nome' does not exist on type 'AppComponent'。

解决方法 #

1. 核对模板与组件的关联 #

检查HomeComponent的@Component装饰器中，templateUrl路径是否正确指向home.component.html，避免路径错误导致模板关联到了AppComponent。

2. 确认模板归属 #

排查是否在AppComponent的模板（如app.component.html）中误写了{{nome}}，而AppComponent类中并未声明该变量。

3. 清理编译缓存 #

执行命令清理Angular编译缓存，重新构建项目：

ng clean
ng build
# 开发环境可重启服务
ng serve

4. 检查组件的模块声明 #

确保HomeComponent已在对应NgModule（通常是AppModule）中正确声明：

// app.module.ts
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent // 确认该组件已声明
  ],
  // 其他配置项
})
export class AppModule { }

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