Ошибка кода Angular 4 -> 6 "Нет директивы с"exportAs", установленным в"ngModel""

Question

Итак, я купил Mosh's Angular 4, не зная, что это Angular 4, а последний - Angular 6.

Да, я слышал, что разница между 4 и 6 невелика с точки зрения кодирования, но выслушайте меня.

В одной из лекций о шаблонно-управляемых формах он использует этот код:

<form>
  <div class="form-group">
      <label for="firstName">First Name</label>
      <input             <-- WE ARE LOOKING AT THIS ELEMENT
        ngModel
        name="firstName"
        id="firstName"
        type="text"
        class="form-control" />
  </div>
  <div class="form-group">
    <label for="comment">Comment</label>
    <textarea id="comment" cols="30" rows="10" class="form-control"></textarea>
  </div>
  <button class="btn btn-primary">Submit</button>
</form>

Поэтому я повторяю, что в Angular я установил (позже я узнал, что он использует 4, а я установил 6), и он работает нормально.

Теперь он хочет показать, что ngModel выглядит как печать ngModel объект на консоль, поэтому он создает переменную и регистрирует ее, добавив log(msg) { console.log(msg); } к .ts файл, а теперь <intput> упомянутое выше выглядит так:

<input 
    ngModel
    name="firstName"
    #firstName="ngModel"         <-- ADDED
    (change)="log(firstName)"    <-- ADDED
    id="firstName"
    type="text"
    class="form-control" />

Таким образом он компилирует это, это работает, консоль регистрирует ngModel просто хорошо. Итак, я компилирую тот же код, и я получаю это:

Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngModel" ("
        ngModel
        name="firstName"
        [ERROR ->]#firstName="ngModel"
        (change)="log(firstName)"
        id="firstName"
"): ng:///AppModule/ContactFormComponent.html@6:8
    at syntaxError (compiler.js:1021)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14830)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24018)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24005)
    at compiler.js:23948
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23948)
    at compiler.js:23858
    at Object.then (compiler.js:1012)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)

Итак, разумеется, я гуглю, чтобы выяснить, почему это происходит, и затем я вижу этот вопрос в стеке и вижу, что на него нет ответов. Я сейчас здесь, надеясь, что кто-нибудь придет и скажет мне: "Бедная душа, у вас опечатка" или что-то в этом роде.

ПРИМЕЧАНИЕ 1 Я надеюсь, что я не нарушаю никаких законов, цитируя лекции, которые я заплатил от г-на Моша. Если это так, пожалуйста, обратите внимание, я сниму этот вопрос. Кроме того, я искренне рекомендую его курс. 10/10.

ПРИМЕЧАНИЕ 2. Пожалуйста, имейте в виду вопрос, на который я наткнулся, на который не был дан ответ во время публикации этого вопроса. Мой немного более детальный, так что я бы не сказал, что это дубликат, но было бы неплохо, чтобы на этот вопрос тоже ответили.

ВОПРОС: Если до сих пор не ясно: что делает There is no directive with "exportAs" set to "ngModel" значит, а как мне это исправить? Каковы принципиальные различия между Angular 4 и 6, которые делают код из A4 недействительным в A6?

Я полностью новичок в угловой между прочим.