Angular14部分页面报[ngForm][ngClass]未知属性编译错误求助

问题场景 #

开发大型Angular 14应用时，仅3-4个位于app/components/同级目录的页面编译报错，提示[ngForm]不是form元素的已知属性、[ngClass]不是input的已知属性，其余数百页面无异常。已在app.module.ts中正确导入相关模块，当前无法编译，询问是否需要删除并重新生成组件。

相关代码 #

组件导入代码

import { Component, OnInit, ViewChild } from "@angular/core";
import { FormBuilder, FormControl, AbstractControl, NgForm, Validators, FormGroup } from "@angular/forms";
import { HttpService } from "../../../services/http.service";
import { CookieService } from "ngx-cookie-service";
import { MatDialog } from "@angular/material/dialog";
import { MatSnackBar } from "@angular/material/snack-bar";
import { SavedataService } from "../../../services/savedata.service";
import { DateValidator } from "src/app/modules/shared/components/date-validator/date-validator.component";
import { Regx } from "src/assets/regex";
import { Observable } from "rxjs";

HTML表单代码片段

<form id="adminForm" [formGroup]="adminForm">
  <div class="col-sm-12 col-sm-12-marginTopAdjust">
    <div class="col-lg-6 col-lg-6-adjust">

.....

HTML输入框代码片段

<input id="dateEntered" type="date" name="dateReceived" formControlName="dateReceived"
  class="form-control inputdata" minlength="14" maxlength="14" data-title="Date Received"
  (blur)="blurEventMethod($event)" placeholder="00/00/0000" (disabled)=true [pattern]="regNoPattern"
  [ngClass]="{ 'is-invalid': ontabout && f['dateReceived'].errors }" />
<div
  *ngIf="submitted || f['dateReceived'].errors || f['dateReceived'].touched || f['dateReceived'].invalid"
  class="required">
  <span *ngIf="f['dateReceived'].errors && f['dateReceived'].errors['required']"
    class="text-danger required">
    {{getErrorMessage('dateReceived', 'Date Received ')}}
  </span>
</div>

错误截图 #

排查与解决方案 #

• 检查子模块导入：如果这些异常组件属于某个子模块而非直接声明在根模块，子模块必须单独导入FormsModule、ReactiveFormsModule和CommonModule——Angular模块是独立封装的，子模块不会自动继承根模块的导入配置。
• 确认组件声明：确保这些组件已在对应模块的declarations数组中正确声明，无重复声明或遗漏情况。
• 清理编译缓存：执行命令ng clean后重新编译，缓存异常可能导致此类无厘头错误。
• 校验模板与元数据：检查组件@Component装饰器中templateUrl路径是否正确；模板中属性名是否拼写正确（Angular指令属性大小写敏感，比如ngForm不能写成小写）。
• 最后考虑重生成组件：若以上步骤均无效，再删除现有组件文件，用ng generate component命令重新生成组件后迁移代码，避免手动创建组件时的元数据或配置疏漏。

内容的提问来源于stack exchange，提问作者Peter The Angular Dude