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

angular, angular2-forms, angular2-template

I am getting the Can't bind to 'ngModel' since it isn't a known property of 'input'. error, though I have imported the FormsModule.

package.json:

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

In main app.module:

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

Here's where I route to the component (pages.routes.ts):

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

Here is the component module:

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 {}

Also imported FormsModule into component just for good measure:

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">  `})

Error is thrown on the above template line.

Best Solution

Can't say exactly what did it, but I completely refactored and the issue is resolved.

Instead of using a component in the routes definition, I used loadChildren:

{ path: 'new-project', loadChildren: () => System.import('./new-project/new-project.module') },

which pulls in the module. In the module, I made sure to import FormsModule:

import { FormsModule } from '@angular/forms';[email protected]({  imports: [CommonModule, NgaModule, FormsModule, routing],

And now angular is finding NgModel for the form template.