Angular升级到Ivy后组件模板报错是怎么回事？

___梦媛提问于 2026-03-10 23:39:22 阅读 8

框架

我刚把项目从Angular 8升级到12，启用了Ivy编译器，结果一个原本正常的组件突然报错说找不到模板变量。明明代码没动过，是不是Ivy对模板语法有啥新要求？

控制台报的是“Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’”，但我已经导入了FormsModule啊。下面是我组件里的一小段代码：

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

@Component({
  selector: 'app-test',
  template: 
    <input [(ngModel)]="name" placeholder="输入名字">
    <p>你好，{{ name }}！</p>
  
})
export class TestComponent {
  name = '';
}

我来解答赞 3 收藏

反馈

1 条解答

程序猿林莹 Lv1

这个问题跟 Ivy 关系不大，主要是模块导入的问题。

报错说找不到 ngModel 属性，FormsModule 没生效。你检查一下使用这个 TestComponent 的模块（比如 AppModule）有没有导入 FormsModule：

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

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { TestComponent } from './test.component';



@NgModule({

  declarations: [

    TestComponent

  ],

  imports: [

    BrowserModule,

    FormsModule  // 这里要加上

  ], bootstrap: [AppComponent]

})

export class AppModule { }

如果你用的是 Angular 12 的独立组件（standalone component），那得在组件自己的 imports 数组里导入：

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

import { FormsModule } from '@angular/forms';



@Component({

  selector: 'app-test',

  standalone: true,

  imports: [FormsModule],  // 独立组件需要在这里加

  template: 

    <input [(ngModel)]="name" placeholder="输入名字">

    <p>你好，{{ name }}！</p>

  

})

export class TestComponent {

  name = '';

}

Ivy 编译器对模板类型检查比之前更严格了，原来在 View Engine 下可能稀里糊涂能跑的情况，现在会直接报错。你这个就是模块作用域的问题，FormsModule 必须导入到使用这个组件的模块里，或者在独立组件里单独导入。

2026-03-11 00:00