Angular material not known element error in lazy loaded module-CodePudding

I m facing a weird issue in my shared module approach

In my shared module i have the following

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input'
import {MatButtonModule} from '@angular/material/button';


    @NgModule({
      declarations: [],
      imports: [
        CommonModule,
        MatFormFieldModule,
        MatInputModule,
        MatButtonModule
      ],
      exports:[MatFormFieldModule,MatInputModule,MatButtonModule]
    })
    export class SharedModule { }

I have a login module that is lazy loaded in the app module

const routes: Routes = [

  {
  path: 'login',
  loadChildren: () => import('@app/modules/login/login-routing.module').then(m => m.LoginRoutingModule)
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In the login module, i have imported the shared module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import {SharedModule} from '@app/modules/shared/shared.module'

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    CommonModule,
    SharedModule
  ]
})
export class LoginModule { }

But while add the form field in the LoginComponent i m getting element not known error

nt:
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.

Not sure why this is happening in the lazy loaded module

Angular version: 12 CLI version : 12.2

CodePudding user response：

You routing seems wrong. You are loading LoginRoutingModule instead LoginModule

CodePudding user response：

If you have some problems after "You routing seems wrong. You are loading LoginRoutingModule instead LoginModule" try to add in your imports - loginModule this:

imports:[
...,
RouterModule.forChild(
  [
    { 
      path:'', 
      component:LoginComponent
    }
  ]),
...