Unhandled Promise rejection: ошибки синтаксического анализа шаблона: невозможно привязать к 'ngModel', так как это не известное свойство 'input'

Question

Я всегда получаю ошибку Не могу привязываться к 'ngModel', так как это не известное свойство «ввода». если я пытаюсь использовать что-то вроде этого:

<div *ngIf="guide" class="form-group"> 
    <label for="guideName">Name: </label> 
    <input class="form-control" name="guideName" [(ngModel)]="test" required id="guideName"> 

    <button (click)="saveGuide(guide)"></button> 
</div> 

Мои app.module.ts выглядит следующим образом:

import {NgModule} from "@angular/core"; 
import {routing} from "./app.routing"; 
import {BrowserModule} from '@angular/platform-browser'; 
import {FormsModule} from "@angular/forms"; 

import {GuideModule} from "./guide/guide.module"; 

@NgModule({ 
    imports: [BrowserModule, FormsModule, routing, GuideModule], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 

export class AppModule {} 

В моей package.json у меня есть:

"dependencies": { 
    ... 
    "@angular/forms": "^2.1.2", 
    ... 
} 

Мой systemjs.config.ts:

(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 
      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      "@angular/forms": "node_modules/@angular/forms/bundles/forms.umd.js", 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
      // other libraries 
      'rxjs': 'npm:rxjs', 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

Answer 1

Вы получаете эту ошибку, потому что guide-details.component.ts не является частью AppModule где вы импортировали FormsModule (NgModel директива является частью FormsModule). Вам необходимо импортировать FormsModule в модуль, в котором объявляется или перемещается guide-details.component.ts. guide-details.component.ts - AppModule.