Angular material not known element error in lazy loaded module

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

      declarations: [],
      imports: [
    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)

  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'

  declarations: [
  imports: [
export class LoginModule { }

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

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

>Solution :

You routing seems wrong. You are loading LoginRoutingModule instead LoginModule

Leave a Reply