Angular material not known element error in lazy loaded module

Question

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

Answer 1

You routing seems wrong. You are loading LoginRoutingModule instead LoginModule

Answer 2

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