Angular 4 -> 6 code error "There is no directive with "exportAs" set to "ngModel""

Question

So, i bought Mosh's Angular 4 course not knowing that it is Angular 4 and the latest is Angular 6.

Yea, I've heared that the difference between 4 and 6 is small in terms of coding, but hear me out.

In one of the lectures about template driven forms, he uses this code:

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

So i repeat that in Angular I installed (later I've found out that he's using 4 and I have installed 6), and it works fine.

Now, he wants to show what ngModel looks like by printing the ngModel object to the console, so he creates a variable and logs it by adding log(msg) { console.log(msg); } to the .ts file, and now the <intput> mentioned above looks like this:

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

So he compiles it, it works, the console logs the ngModel just fine. So then I compile the same code, and I get this:

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)

So, offcorse, I google to find why is this happening, and then I see this question on stack and see that it has no answers. I am now here, hoping someone will come and tell me "you poor soul, you have a typo" or something.

NOTE 1 I hope I'm not breaking any laws by quoting the lectures I paid for from mr Mosh. If so, please note me, I will remove this question. Also, i sincerely reccomend his course. 10/10.

NOTE 2 Please have in mind the question I stumbled upon that was not answered at the time I am posting this question. My is a bit more detailed, so I wouldn't say it is a duplicate, but it would be nice that that question gets answered too.

QUSETION If not clear by now: what does There is no directive with "exportAs" set to "ngModel" mean, and how do I fix it? What are the crutial differences between Angular 4 and 6 that make the code from A4 invalid in A6?

I am tottaly new to angular btw.