Angular 2 : Can't bind to 'ngModel' even though FormsModule is imported

Question

我收到 Can't bind to 'ngModel' since it isn't a known property of 'input'. 错误，尽管我已经导入了 FormsModule .

package.json:

"@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "^2.0.0",

在主应用程序模块中:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
  bootstrap: [App],
  declarations: [
    App
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    HttpModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgaModule,
    PagesModule,
    routing
  ]

这是我路由到组件 (pages.routes.ts) 的地方:

import { NewProjectModule, BasicForm } from './new-project/new-project.module';
...
{ path: 'new-project', component: BasicForm },

这是组件模块:

import { FormsModule } from '@angular/forms';
...
import { BasicForm } from './basicForm.component';
...
export { BasicForm } from './basicForm.component';

@NgModule({
  imports: [CommonModule, FormsModule, BrowserModule],
  exports: [BasicForm],
  declarations: [BasicForm]
})
export default class NewProjectModule {
}

还将 FormsModule 导入到组件中只是为了更好的衡量:

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

@Component({
  selector: 'basic-form',
  template: `
<input type="text" class="form-control" id="directory" placeholder="C:\Users\Matt\Documents\Projects" [(ngModel)]="project.directory">
  `
})

上面的模板行抛出错误。

Answer 1

我花了很长时间研究这个，我终于意识到我犯了一个新手错误，没有在 NgModule 声明中包含我正在构建的组件

import { FormsModule } from "@angular/forms"; // <--- import FormsModule 
import { MyModule } from "./components/my-module/my-module.component"; // <--- import your component

@NgModule({
    declarations: [
        AppComponent,
        MyModule // <--- add your component to declarations 
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        NgbModule,
        AppRoutingModule,
        FormsModule // <--- add FormsModule to imports
    ]