Angular应用启动报错：Can't bind to 'ngModel' 不是input已知属性

问题场景 #

在Angular组件的HTML中使用了双向绑定输入框：

<input [(ngModel)]="bookRequest.title" type="text" class="form-control" id="title" name="title" placeholder="Book title">

启动应用时触发错误：

Can't bind to 'ngModel' since it isn't a known property of 'input'. [plugin angular-compiler]

已在app.module.ts中导入FormsModule（完整代码如下），但问题仍存在：

import {FormsModule} from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './pages/login/login.component';
import { RegisterComponent } from './pages/register/register.component';
import {FormsModule} from '@angular/forms';
import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from '@angular/common/http';
import {HttpTokenInterceptor} from './services/interceptor/http-token.interceptor';
import { ActivateAccountComponent } from './pages/activate-account/activate-account.component';
import {CodeInputModule} from 'angular-code-input';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    ActivateAccountComponent
  ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        HttpClientModule,
        CodeInputModule
    ],
  providers: [
    HttpClient,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpTokenInterceptor,
      multi: true
    },

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent未标记为独立组件：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'book-network-ui';
}

angular.json的schematics配置：

"schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "standalone": false
        },
        "@schematics/angular:directive": {
          "standalone": false
        },
        "@schematics/angular:pipe": {
          "standalone": false
        }
      }

解决方法 #

1. 确认组件已在导入FormsModule的模块中声明 #

使用ngModel的组件（即包含上述输入框的组件）必须添加到AppModule的declarations数组中，或者如果该组件属于其他特性模块，需在特性模块的imports中单独导入FormsModule。

从当前AppModule的declarations来看，仅包含4个组件，若你的输入框所在组件不在其中，需将其添加到declarations数组。

2. 移除重复的FormsModule导入 #

AppModule顶部重复导入了FormsModule，虽然不会直接引发错误，但建议删除其中一次，保持代码整洁。

3. 清理Angular缓存 #

缓存可能导致模块导入未生效，执行以下命令清理后重启应用：

ng clean
ng serve

4. 检查特性模块（若存在） #

如果使用ngModel的组件属于某个特性模块（非直接在AppModule下），必须在该特性模块的imports数组中导入FormsModule——模块的导入不具备继承性，仅在AppModule中导入无法覆盖特性模块内的组件。

关于app.component.spec.ts的说明 #

你提到怀疑测试文件有问题，但本次错误出现在应用启动阶段，而非测试阶段。AppComponent并未使用ngModel，因此测试模块中无需导入FormsModule，该文件不是问题根源。

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