mat-form-field and mat-label is now known element in lazy loaded module- Material 13.1.1

Question

I am using angular 10 and Material 13.1.1 and i have a lazy loaded module in which i have a component Login where I am using some material input and field forms but that is giving me error

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

and

'mat-label' is not a known element:
1. If 'mat-label' is an Angular component, then verify that it is part of this module.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Here is my code.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './Common/navbar/navbar.component';
import { FooterComponent } from './Common/footer/footer.component';
import { FormsModule } from '@angular/forms';
import { HomeComponent } from './webComponent/home/home.component';
import { ClassesComponent } from './webComponent/classes/classes.component';
import { ClassDetailComponent } from './webComponent/classes/class-detail.component';
import { MassageComponent } from './webComponent/massage/massage.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';




@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    FooterComponent,
    HomeComponent,
    ClassesComponent,
    ClassDetailComponent,
    MassageComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ClassDetailComponent } from './webComponent/classes/class-detail.component';
import { ClassesComponent } from './webComponent/classes/classes.component';
import { HomeComponent } from './webComponent/home/home.component';
import { MassageComponent } from './webComponent/massage/massage.component';



const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'classes', component: ClassesComponent },
  { path: 'classes/:name', component: ClassDetailComponent },
  { path: 'massage', component: MassageComponent },
  {path:'members', loadChildren:()=>import('./Members/members.module').then(module=>module.MembersModule)},  /*<==please observe here I am lazy loading of the module*/
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),

  ],
  exports: [RouterModule],
})

after this my lazy loaded module, where i have login component (in which i want to use material)

members.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './webComponent/login/login.component';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field'

const userRoot: Routes = [
  { path: 'login', component: LoginComponent },
  //  {path:'register'}
];

@NgModule({
  declarations: [LoginComponent],  /*<= this is the component*/
  imports: [
    CommonModule,
    RouterModule.forChild(userRoot),
    MatInputModule,                    /*<== here i have imported the material related stuffs*/
    MatFormFieldModule,
    FormsModule,
    ReactiveFormsModule
  ],
})

//if user interact with members arena then only activate this
export class MembersModule { }

I am not sure what am I missing?

I have checked

Angular 6 error show to 'mat-form-field' is not a known element:

Use component from another module

'mat-form-field' is not a known element - Angular 5 & Material2

Lazy loading Angular modules with latest Angular material design gives error

mat-form-field and mat-label is now known element in lazy loaded module- Material 13.1.1

0 Answers0