Me enfrento a un problema extraño en mi enfoque de módulo compartido

En mi módulo compartido tengo lo siguiente

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

Tengo un módulo de inicio de sesión que está cargado de forma diferida en el módulo de la aplicación

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

En el módulo de inicio de sesión, he importado el módulo compartido.

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

Pero mientras agrega el campo de formulario en el componente de inicio de sesión, LoginComponent un elemento de error desconocido

 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.

No estoy seguro de por qué sucede esto en el módulo de carga diferida

Versión angular: 12 Versión CLI: 12.2