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

Luca Farsetti · Accepted Answer · 2021-11-04 08:11:27Z

2

You routing seems wrong. You are loading LoginRoutingModule instead LoginModule

answered Nov 4, 2021 at 8:11

Luca Farsetti

2472 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shamon shamsudeen Over a year ago

Seems anothe issue the route is empty

marcfpereira · Accepted Answer · 2021-11-04 08:37:42Z

1

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

answered Nov 4, 2021 at 8:37

marcfpereira

111 bronze badge

Collectives™ on Stack Overflow

Angular material not known element error in lazy loaded module

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related