Angular: why after that I introduced ReactiveFormsModule in my project, all the Angualr elements dec-CodePudding

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 reactive form in my project. Note that before introduce this component (using reactive form) the project worked fine and if I "delete" this component it works again.

First of all I created the following material.module.ts file in order to contains all the Material dependency:

import { NgModule } from "@angular/core";
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 "@angular/material/core";
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 {

}

Then I created this new login.component.html file:

<section>
    <form fxLayout="column" 
          fxLayoutAlign="center center"
          [formGroup]="loginForm">
        <mat-form-field>
            <input type="email" 
                   matInput 
                   placeholder="Your Email"
                   formControlName="email">
        </mat-form-field>

        <mat-form-field>
            <input type="password" 
                   matInput 
                   placeholder="Your Password"
                   formControlName="password">
        </mat-form-field>

    </form>
</section>

as you can see it contains a form using reactive approach for validation.

Then I created the related login.component.ts file:

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]})

    })
  }

}

The problem is that, after that I introduced this new componented (basically after that I declared the import\export of the ReactiveFormsModule into the main app.module.ts file that is:

@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 { }

I obtained these errors (related also to other components of my project) into the console.

Basically it is as all the Angular elements used into my project are no more recognized as knowed element after that I introduced the ReactiveFormsModule:

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 <router-outlet></router-outlet>
  ~~~~~~~~~~~~~~~

  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]="loginForm">
            ~~~~~~~~~~~~~~~~~~~~~~~

  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         <mat-form-field>
          ~~~~~~~~~~~~~~~~

  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         <mat-form-field>
           ~~~~~~~~~~~~~~~~

  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     <form fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="10px" #f="ngForm" (ngSubmit)="onSubmit(f)">
                                                                                   ~~~~~~

  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         <mat-form-field>
          ~~~~~~~~~~~~~~~~

  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="ngModel">
                                   ~~~~~~~

  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         <mat-form-field hintLabel="Should be at least 6 characters long.">
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  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="ngModel">
                                ~~~~~~~

  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             <mat-hint align="end">{{ pwInput.value?.length }} / 6</mat-hint>
               ~~~~~~~~~~~~~~~~~~~~~~

  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             <mat-error>Must be at least 6 characters long.</mat-error>
               ~~~~~~~~~~~

  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         <mat-form-field>
           ~~~~~~~~~~~~~~~~

  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]="picker"
                      ~~~~~~~~~~~~~~~~~~~~~~~~

  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             <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  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             <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                                                ~~~~~~~~~~~~~~

  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             <mat-datepicker #picker></mat-datepicker>
               ~~~~~~~~~~~~~~~~~~~~~~~~

  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         <mat-checkbox ngModel name="agree" required color="primary">Agree Terms and Conditions</mat-checkbox>
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  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.

Why? What is wrong? What am I missing? How can I try to fix it?

CodePudding user response：

declarations: [
    ...
    ReactiveFormsModule, // worng place to import

]

You need to import the ReactiveFormsModule only in the imports

CodePudding user response：

The ReactiveFormsModule should not be in the declarations.