非表单传递HTML值到TS组件时生产构建报错求助

嘿，这个问题我之前也碰到过！本质是Angular开发模式和生产构建的类型检查严格程度不一样——开发时（npm run dev）和普通ng build的校验比较宽松，就算模板里绑定了组件类没声明的属性也能跑，但生产构建（npm run build）默认拉满了严格校验，所以直接给你抛出了Property 'messageTitle' does not exist on type 'MessagesNewComponent'的错误。

具体解决步骤： #

1. 给组件类补上messageTitle属性
   你得在MessagesNewComponent的TS文件里明确声明这个用于双向绑定的属性，生产构建的类型检查器才能识别它。最好初始化个空字符串，避免出现undefined的问题：

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-messages-new',
     templateUrl: './messages-new.component.html',
     styleUrls: ['./messages-new.component.css']
   })
   export class MessagesNewComponent {
     // 声明并初始化messageTitle
     messageTitle: string = '';
   
     sendMessage(title: string) {
       // 这里写你的消息发送逻辑
       console.log('要发送的标题:', title);
     }
   }
   

2. 确认FormsModule已经导入
   既然用了[(ngModel)]双向绑定，必须在组件所属的模块（比如AppModule或者你的特性模块）里导入FormsModule，不然就算开发模式也会报错（不过你说开发没问题，大概率已经加了，但还是确认下更稳妥）：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { FormsModule } from '@angular/forms'; // 导入FormsModule
   
   import { AppComponent } from './app.component';
   import { MessagesNewComponent } from './messages/messages-new/messages-new.component';
   
   @NgModule({
     declarations: [
       AppComponent,
       MessagesNewComponent
     ],
     imports: [
       BrowserModule,
       FormsModule // 把它加到imports数组里
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

3. 重新跑生产构建试试
   改完之后再执行npm run build，应该就能顺利通过了。

小提醒： #

如果你的项目开了Angular严格模式（tsconfig.json里strict: true），后续开发模式也会逐渐启用更严格的检查，所以养成在组件类里明确声明所有模板绑定属性的习惯，能避免不少这类跨环境的坑。

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