title: Angular: why after that I introduced ReactiveFormsModule in my project, all the Angualr elements declared in my project started to give errors?
body: <p>I am working on an Angular 13 project using Angular material and I am finding the following strange project when I try to introduce the use of <strong>reactive form</strong> in my project. Note that before introduce this component (using reactive form) the project worked fine and if I &quot;delete&quot; this component it works again.</p>
  <p>First of all I created the following <strong>material.module.ts</strong> file in order to contains all the Material dependency:</p>
  <pre><code>import { NgModule } from &quot;@angular/core&quot;;
  import { MatButtonModule } from '@angular/material/button';
  import { MatIconModule } from '@angular/material/icon';
  import { MatFormFieldModule } from '@angular/material/form-field';
  import { MatInputModule } from '@angular/material/input';
  import { MatDatepickerModule } from '@angular/material/datepicker';
  import { MatNativeDateModule } from &quot;@angular/material/core&quot;;
  import { MatCheckboxModule } from '@angular/material/checkbox';
  
  @NgModule({
      imports: [MatButtonModule,
                MatIconModule,
                MatFormFieldModule,
                MatInputModule,
                MatDatepickerModule,
                MatNativeDateModule,
                MatCheckboxModule
              ],
      exports: [MatButtonModule,
                MatIconModule,
                MatFormFieldModule,
                MatInputModule,
                MatDatepickerModule,
                MatNativeDateModule,
                MatCheckboxModule
              ]
  })
  export class MaterialModule {
  
  }
  </code></pre>
  <p>Then I created this new <strong>login.component.html</strong> file:</p>
  <pre><code>&lt;section&gt;
      &lt;form fxLayout=&quot;column&quot; 
            fxLayoutAlign=&quot;center center&quot;
            [formGroup]=&quot;loginForm&quot;&gt;
          &lt;mat-form-field&gt;
              &lt;input type=&quot;email&quot; 
                     matInput 
                     placeholder=&quot;Your Email&quot;
                     formControlName=&quot;email&quot;&gt;
          &lt;/mat-form-field&gt;
  
          &lt;mat-form-field&gt;
              &lt;input type=&quot;password&quot; 
                     matInput 
                     placeholder=&quot;Your Password&quot;
                     formControlName=&quot;password&quot;&gt;
          &lt;/mat-form-field&gt;
  
      &lt;/form&gt;
  &lt;/section&gt;
  </code></pre>
  <p>as you can see it contains a form using reactive approach for validation.</p>
  <p>Then I created the related <strong>login.component.ts</strong> file:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormControl, FormGroup, Validators,  } from '@angular/forms';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    loginForm: FormGroup;
  
    constructor() { }
  
    ngOnInit(): void {
      this.loginForm = new FormGroup({
        email: new FormControl('', {validators: [Validators.required, Validators.email]}),
        password: new FormControl('', {validators: [Validators.required]})
  
      })
    }
  
  }
  </code></pre>
  <p>The problem is that, after that I introduced this new componented (basically after that I declared the import\export of the <strong>ReactiveFormsModule</strong> into the main <strong>app.module.ts file</strong> that is:</p>
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
      SignupComponent,
      LoginComponent,
      TrainingComponent,
      CurrentTrainingComponent,
      NewTrainingComponent,
      PastTrainingComponent,
      WelcomeComponent,
      ReactiveFormsModule,
      
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      BrowserAnimationsModule,
      MaterialModule,
      FlexLayoutModule,
      FormsModule,
      ReactiveFormsModule,
      
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>I obtained these errors (related also to other components of my project) into the console.</p>
  <p>Basically it is as all the Angular elements used into my project are no more recognized as knowed element after that I introduced the <strong>ReactiveFormsModule</strong>:</p>
  <pre><code>Build at: 2022-06-03T11:56:41.733Z - Hash: 9b66a01fac4df3bd - Time: 8483ms
  
  Error: src/app/app.component.html:1:1 - error NG8001: 'router-outlet' is not a known element:
  1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
  2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  
  1 &lt;router-outlet&gt;&lt;/router-outlet&gt;
    ~~~~~~~~~~~~~~~
  
    src/app/app.component.ts:5:16
      5   templateUrl: './app.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component AppComponent.
  
  
  Error: src/app/app.module.ts:30:5 - error NG6001: Cannot declare 'ReactiveFormsModule' in an NgModule as it's not a part of the current compilation.
  
  30     ReactiveFormsModule,
         ~~~~~~~~~~~~~~~~~~~
  
    node_modules/@angular/forms/forms.d.ts:4078:22
      4078 export declare class ReactiveFormsModule {
                                ~~~~~~~~~~~~~~~~~~~
      'ReactiveFormsModule' is declared here.
  
  
  Error: src/app/auth/login/login.component.html:5:11 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.
  
  5           [formGroup]=&quot;loginForm&quot;&gt;
              ~~~~~~~~~~~~~~~~~~~~~~~
  
    src/app/auth/login/login.component.ts:6:16
      6   templateUrl: './login.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component LoginComponent.
  
  
  Error: src/app/auth/login/login.component.html:6:9 - error NG8001: 'mat-form-field' is not a known element:
  1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
  2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  
  6         &lt;mat-form-field&gt;
            ~~~~~~~~~~~~~~~~
  
    src/app/auth/login/login.component.ts:6:16
      6   templateUrl: './login.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component LoginComponent.
  
  
  Error: src/app/auth/login/login.component.html:13:9 - error NG8001: 'mat-form-field' is not a known element:
  1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
  2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  
  13         &lt;mat-form-field&gt;
             ~~~~~~~~~~~~~~~~
  
    src/app/auth/login/login.component.ts:6:16
      6   templateUrl: './login.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component LoginComponent.
  
  
  Error: src/app/auth/signup/signup.component.html:2:82 - error NG8003: No directive found with exportAs 'ngForm'.
  
  2     &lt;form fxLayout=&quot;column&quot; fxLayoutAlign=&quot;center center&quot; fxLayoutGap=&quot;10px&quot; #f=&quot;ngForm&quot; (ngSubmit)=&quot;onSubmit(f)&quot;&gt;
                                                                                     ~~~~~~
  
    src/app/auth/signup/signup.component.ts:6:16
      6   templateUrl: './signup.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component SignupComponent.
  
  
  Error: src/app/auth/signup/signup.component.html:3:9 - error NG8001: 'mat-form-field' is not a known element:
  1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
  2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  
  3         &lt;mat-form-field&gt;
            ~~~~~~~~~~~~~~~~
  
    src/app/auth/signup/signup.component.ts:6:16
      6   templateUrl: './signup.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component SignupComponent.
  
  
  Error: src/app/auth/signup/signup.component.html:11:33 - error NG8003: No directive found with exportAs 'ngModel'.
  
  11                    #emailInput=&quot;ngModel&quot;&gt;
                                     ~~~~~~~
  
    src/app/auth/signup/signup.component.ts:6:16
      6   templateUrl: './signup.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component SignupComponent.
  
  
  Error: src/app/auth/signup/signup.component.html:16:9 - error NG8001: 'mat-form-field' is not a known element:
  1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
  2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  
  16         &lt;mat-form-field hintLabel=&quot;Should be at least 6 characters long.&quot;&gt;
             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  
    src/app/auth/signup/signup.component.ts:6:16
      6   templateUrl: './signup.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component SignupComponent.
  
  
  Error: src/app/auth/signup/signup.component.html:24:30 - error NG8003: No directive found with exportAs 'ngModel'.
  
  24                    #pwInput=&quot;ngModel&quot;&gt;
                                  ~~~~~~~
  
    src/app/auth/signup/signup.component.ts:6:16
      6   templateUrl: './signup.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component SignupComponent.
  
  
  Error: src/app/auth/signup/signup.component.html:25:13 - error NG8001: 'mat-hint' is not a known element:
  1. If 'mat-hint' is an Angular component, then verify that it is part of this module.
  2. If 'mat-hint' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  
  25             &lt;mat-hint align=&quot;end&quot;&gt;{{ pwInput.value?.length }} / 6&lt;/mat-hint&gt;
                 ~~~~~~~~~~~~~~~~~~~~~~
  
    src/app/auth/signup/signup.component.ts:6:16
      6   templateUrl: './signup.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component SignupComponent.
  
  
  Error: src/app/auth/signup/signup.component.html:26:13 - error NG8001: 'mat-error' is not a known element:
  1. If 'mat-error' is an Angular component, then verify that it is part of this module.
  2. If 'mat-error' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  
  26             &lt;mat-error&gt;Must be at least 6 characters long.&lt;/mat-error&gt;
                 ~~~~~~~~~~~
  
    src/app/auth/signup/signup.component.ts:6:16
      6   templateUrl: './signup.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component SignupComponent.
  
  
  Error: src/app/auth/signup/signup.component.html:29:9 - error NG8001: 'mat-form-field' is not a known element:
  1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
  2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  
  29         &lt;mat-form-field&gt;
             ~~~~~~~~~~~~~~~~
  
    src/app/auth/signup/signup.component.ts:6:16
      6   templateUrl: './signup.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component SignupComponent.
  
  
  Error: src/app/auth/signup/signup.component.html:32:20 - error NG8002: Can't bind to 'matDatepicker' since it isn't a known property of 'input'.
  
  32                    [matDatepicker]=&quot;picker&quot;
                        ~~~~~~~~~~~~~~~~~~~~~~~~
  
    src/app/auth/signup/signup.component.ts:6:16
      6   templateUrl: './signup.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component SignupComponent.
  
  
  Error: src/app/auth/signup/signup.component.html:36:13 - error NG8001: 'mat-datepicker-toggle' is not a known element:
  1. If 'mat-datepicker-toggle' is an Angular component, then verify that it is part of this module.
  2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  
  36             &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  
    src/app/auth/signup/signup.component.ts:6:16
      6   templateUrl: './signup.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component SignupComponent.
  
  
  Error: src/app/auth/signup/signup.component.html:36:46 - error NG8002: Can't bind to 'htmlFor' since it isn't a known property of 'mat-datepicker-toggle'.
  1. If 'mat-datepicker-toggle' is an Angular component and it has 'htmlFor' input, then verify that it is part of this module.
  2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
  
  36             &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
                                                  ~~~~~~~~~~~~~~
  
    src/app/auth/signup/signup.component.ts:6:16
      6   templateUrl: './signup.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component SignupComponent.
  
  
  Error: src/app/auth/signup/signup.component.html:37:13 - error NG8001: 'mat-datepicker' is not a known element:
  1. If 'mat-datepicker' is an Angular component, then verify that it is part of this module.
  2. If 'mat-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  
  37             &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
                 ~~~~~~~~~~~~~~~~~~~~~~~~
  
    src/app/auth/signup/signup.component.ts:6:16
      6   templateUrl: './signup.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component SignupComponent.
  
  
  Error: src/app/auth/signup/signup.component.html:41:9 - error NG8001: 'mat-checkbox' is not a known element:
  1. If 'mat-checkbox' is an Angular component, then verify that it is part of this module.
  2. If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  
  41         &lt;mat-checkbox ngModel name=&quot;agree&quot; required color=&quot;primary&quot;&gt;Agree Terms and Conditions&lt;/mat-checkbox&gt;
             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  
    src/app/auth/signup/signup.component.ts:6:16
      6   templateUrl: './signup.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component SignupComponent.
  
  
  
  
  ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
  
  
  ✖ Failed to compile.
  </code></pre>
  <p>Why? What is wrong? What am I missing? How can I try to fix it?</p>