Angular チュートリアルの双方向データバインディングができない

Question

リファレンスのチュートリアルをやっています。
双方向データバインディングをするために以下のようにしたところ、

<input [(ngModel)]="hero.name" placeholder="name">

エラーになったため、

Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.

この記事を参考にFromModuleをインプットしたのですが、NgModuleが見つからないとエラーになってしまいました。
どのように設定すれば、バインディングできるでしょうか？
ご回答よろしくお願いします。

/app/hero/hero.component.ts

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

@NgModule({
  imports: [FormsModule]
})

ターミナル上のエラー ERROR in src/app/hero/hero.component.ts(5,2): error TS2304: Cannot find name 'NgModule'.
ブラウザのコンソール上のエラー

hero.component.ts:14 Uncaught ReferenceError: NgModule is not defined
    at hero.component.ts:14
    at Object../src/app/hero/hero.component.ts (hero.component.ts:26)
    at __webpack_require__ (bootstrap:76)
    at Object../src/app/app.module.ts (app.component.ts:8)
    at __webpack_require__ (bootstrap:76)
    at Object../src/main.ts (environment.ts:15)
    at __webpack_require__ (bootstrap:76)
    at Object.0 (main.ts:12)
    at __webpack_require__ (bootstrap:76)
    at checkDeferredModules (bootstrap:43)

Answer 1

どのように設定すれば、バインディングできるでしょうか？

参考にされている古い記事ではなく公式のチュートリアルを参考に進めてください。
完成形はこちらになります。

エラーの原因はhero.component.tsで@NgModuleを定義しているからです。
公式のチュートリアルを見れば分かる話ですが@NgModuleはapp.module.tsで定義します。

Comments

[ruby_0ct]

できました。単純なミスですみません。ありがとうございました。