Lazy loading Angular 12 module incorporating Formly

I'm facing an issue with the lazy loading module. Every time I try to use it, Formly throws an error

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

The project structure I have is as follows:

Appmodule:
   PublicModule:
      AuthModule

In my Auth module, I have defined routes like this:

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

registered using RouterModule.forChild(routes)

My PublicModule only has:

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

And in AppModule, I have the following:

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

registered using RouterModule.forRoot(routes)

I am unsure why Angular is throwing an exception when I open the login link.

Thank you for any help in advance!

Answer №1

It appears that you are utilizing ngx-formly for form creation within your application. The error may be due to missing declarations and imports in the module. Listed below are the necessary imports that should be included in your LoginComponent's module file:

----imports

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

Make sure to also add them to the imports array within the same module file:

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

Answer №2

To properly import modules in your code, you should specify the types of fields that will be utilized as shown below:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Event-Propagation in Angular 5 with mat-expansion-panel within another component

In my project, I am facing a challenge where I need to create multiple mat-expansion-panels within one mat-expansion-panel. Everything works fine except for the issue that when I try to open a child-panel, it triggers the close-event of the parent-panel. ...

Is casting performed by <ClassName> in typescript?

According to the Angular DI documentation, there is an example provided: let mockService = <HeroService> {getHeroes: () => expectedHeroes } So, my question is - can we consider mockService as an instance of HeroService at this point? To provide ...

Refining Typescript type with specific error for generics

Seeking assistance to comprehend the situation: TS playground The situation involves a store with an exec method, where narrowing down the type of exec param is crucial for a sub process. However, an error seems to arise due to the store type being generi ...

Different or improved strategy for conditional rendering in Angular

Hey there! I've got a few *NgIf conditions in my template that determine which components (different types of forms) are displayed/rendered. For example, in one of my functions (shown below) private _onClick(cell:any){ this._enableView = fals ...

Obtaining data from a nested JSON using Angular4 and AngularFire2's db.list

I have a restaurant and I wanted to share a tip: Here is the JSON Structure: http://prntscr.com/gn5de8 Initially, I attempted to retrieve data from my restaurant as follows: <p *ngFor="let tip of restaurants[item.$key].tips" [innerHTML]=&qu ...

Issue when calling .create() method on Mongoose schema: "this expression is not callable" error in TypeScript

Encountering an error with the .create method on a mongoose model in Next JS while making a call in an API route. The get request is functioning properly... The structure: pages>API>task.tsx import dbConnect from "../../util/dbconnect"; im ...

What could be causing my Vue code to behave differently than anticipated?

There are a pair of components within the div. When both components are rendered together, clicking the button switches properly. However, when only one component is rendered, the switch behaves abnormally. Below is the code snippet: Base.vue <templa ...

What is the best way to create a function that can identify and change URLs within a JSON file?

I'm currently working on a function that will replace all URLs in a JSON with buttons that redirect to another function. The modified JSON, complete with the new buttons, will then be displayed on my website. In my component.ts file, the section wher ...

Type of value returned by Observables

When I send my request to the API and parse it using the map function, the following code is executed: // portion of service post(url: string, params): Observable<Response> { let requestUrl: string = this.apiUrl + url; return this.http.post(r ...

Unusual behavior and confusion encountered with loadChildren in Angular 7 routing

I've encountered a strange behavior while using loadChildren in my application and I'm quite confused about why it's happening. Here is the content of my app-routing-module.ts: const routes: Routes = [ { path: '', redire ...

I'm currently facing issues with the API not returning the list of users to my Angular client application. As I am still in the early stages of learning Angular, I am

Upon inspecting the Network tab, I noticed that one of the users is highlighted in red indicating an error. The console also displays an error 401, indicating unauthorized access. Below is the code snippet from the memberService.ts and member-list-componen ...

Instructions for accessing the side menu upon navigating to a new page

I'm working on an Ionic4 app that integrates with Google Firestore and includes a login feature. My goal is to have the sidemenu automatically open whenever a user logs into the application. For example: Login > PageX > *Open Sidemenu. How can ...

How to use sinon to create a mock for an independently imported function

Is there a way to successfully mock the axios import using sinon and then set expectations? Here is my attempted code: import axios from 'axios'; axiosMock = sinon.mock(axios); However, the expectation does not pass: describe('Custom test ...

Webpack cannot find the specified module extension

I am facing a challenge with my project that involves both express and Angular. In this discussion, I will focus only on the express side. https://i.sstatic.net/C1blt.png When importing custom modules on the server side, I use the following syntax: impo ...

hosting on a base URL does not activate cloud functions

meta-tags-are-not-updating-for-root-url-www-domain-com Base url not triggered hosting I encountered a similar issue as mentioned in the first link above. The solutions provided seemed unusual, like having to delete index.html every time I build/deploy my ...

Tips for importing external modules in Node.js

Feeling a bit stuck here, not sure where to turn next. I've searched high and low for a solution, but nothing seems to be working after all my attempts... To illustrate my current issue, I've put together a simple project. You can check it out o ...

Implementing the 'colSpan' attribute in ReactJS

I encountered an error saying "Type string is not assignable to type number" when attempting to include the colSpan="2" attribute in the ReactJS TypeScript code provided below. Any suggestions on how to resolve this issue? class ProductCategoryRow exten ...

Tips for setting ngModel and name attributes in an angular test for a custom component

Just getting started with angular. I recently developed a custom component that implements the ControlValueAccessor to allow developers to easily access its value. Here's an example of how it can be used: <app-date [label]="'Date 2&apos ...

Setting the base href in Angular using an environment variable for a Tomcat or other application server - a step-by-step guide

Is it possible to set the base href using an environment variable in a Tomcat or application server? For instance: index.html <base href="/${environment.tomcat}/"> Or is there a way to utilize an environment variable for the operating system? ...

Tips for creating a flexible popover widget

I am facing an issue with my project that has a popover (ng-bootstrap) similar to what I need. The problem is that the tooltips and popovers are not flexible when it comes to resizing the page. To address this, I attempted to put a mat-grid (which works pe ...