Angular 12 lazy loading module with Formly

Question

I have problem with lazy loading module. Every time when I want to do it Formly thow me Error

ERROR Error: [Formly Error] The type "input" could not be found. Please make sure that is registered through the FormlyModule declaration.

Structure of my project with I have is:

Appmodule:
   PublicModule:
      AuthModule

and in Auth module I have

const routes: Routes = [
  {
    path: '',
    component: AuthComponent,
    children: [
      {
        path: 'login',
        component: LoginComponent
      }
    ]
  }

register like this RouterModule.forChild(routes)

and my PublicModule has only:

RouterModule.forChild([
      {
        path: 'user',
        loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
      }
    ]),

And in AppModule I have only this:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }
];

registered like this RouterModule.forRoot(routes)

and I don't know why angular thow me exception when I open login link.

Thank for help in advance

Answer 1

looks like you are using ngx-formly for form creation in your application, the error could be possibly because of missing declarations and imports in the module. below are the necessary imports to be added in your LoginComponent's module file

----imports

import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core'; 
import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
 // incase your are using bootstrap ui-theme

Also add them into your imports array in the same module file

imports: [   
    ReactiveFormsModule,
    FormlyBootstrapModule,  
    FormlyModule.forRoot(),
  ]

Answer 2

On your module imports you need to specify the types of fields that you will be using like so:

 import { FormlyFieldInput } from '@ngx-formly/material/input';

 imports: [
  FormlyModule.forRoot({
  types: [{ name: 'input', component: FormlyFieldInput }],
  })
 ]