Troubleshooting Angular Error TS2322: Resolving Type 'ModuleWithProviders<any>' is not compatible with type 'any[] | Type<any>'

I've encountered an error while trying to build a webapp using Angular that I can't seem to resolve:

ERROR in src/app/app.module.ts(22,5): error TS2322: Type 'ModuleWithProviders' is not assignable to type 'any[] | Type'. Type 'ModuleWithProviders' is missing the following properties from type 'Type': apply, call, bind, prototype, and 5 more.

This is my app.module.ts file:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ToastrModule } from 'ngx-toastr';
import { AppRoutingModule } from './app-routing.module';
import { ComponentsModule } from './components/components.module';
import { AppComponent } from './app.component';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';

@NgModule({
  declarations: [
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ComponentsModule,
    RouterModule,
    AppRoutingModule,
    NgbModule,
    ToastrModule.forRoot()
  ],
  imports: [
    AppComponent,
    AdminLayoutComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The error points to the line with ToastrModule.forRoot()

Here's my package.json:

{
  "name": "pum-pum-pum",
  "version": "0.0.0",
  // scripts section...
}

I could really use some assistance on this issue.

Answer №1

It appears that you have placed Modules under declarations and components under imports in your code. To properly structure it, Modules should go under imports and components should go under declarations.

Answer №2

  1. declarations store components, pipes, or directives.
  2. imports store modules.
@NgModule({
  // correct
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ComponentsModule,
    RouterModule,
    AppRoutingModule,
    NgbModule,
    ToastrModule.forRoot()
  ],
  // correct
  declarations: [
    AppComponent,
    AdminLayoutComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer №3

Include the following imports within the import section, not in @NgModule({declarations:
FormsModule, HttpClientModule, ComponentsModule, RouterModule, AppRoutingModule, NgbModule, ToastrModule.forRoot() Do not include any modules or imports within the declarations array.

The updated format should be like this - imports: [ BrowserAnimationsModule, FormsModule, HttpClientModule, ComponentsModule, RouterModule, AppRoutingModule, NgbModule, ToastrModule.forRoot() ],

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

What is preventing me from getting this typescript plugin to function properly?

Currently, I am working on developing a plugin example and facing an issue. I am struggling to make the module loader recognize that the plugin has additional functionality compared to the original. I believe I am close to a solution, but a little nudge in ...

The seamless integration of NestJs, Angular, and Cognito for a streamlined user

Implementing the Authentication and Authorization flows can be tricky without concrete examples. While NestJs doc provides a good example for JWT tokens, I still struggle to establish the correct flow. Here is my current approach to solving the authorizat ...

Dealing with GraphQL mutation errors without relying on the Apollo onError() function

When managing access to an API call server-side, I am throwing a 403 Forbidden error. While trying to catch the GraphQL error for a mutation, I experimented with various methods. (Method #1 successfully catches errors for useQuery()) const [m, { error }] ...

Simulating the useRouter function from the next/navigation (App Router) library in Cypress

I'm currently conducting a Cypress test on my component. This specific component utilizes the useRouter hook from next/navigation within a button to navigate back to another page. import { useRouter } from "next/navigation"; import { VStack, ...

Locate a specific item within an array using TypeScript

Looking for a more efficient solution to retrieve data from a collection in Typescript. The data is structured as follows: myData: { Id: string, Name: string, Address: string Salary: number phone: number } We have approximately 500 records, eac ...

Is it possible for the binding model of Mat-Checkbox to be optional or null?

Greetings everyone! I am a newcomer to the world of Angular, where I have successfully created a dynamic list of checkboxes. However, I have encountered a challenge when trying to bind selected values from an API to these checkboxes. <div *ngFor="let b ...

Using TypeScript for Immutable.js Record.set Type Validation

Currently, I'm utilizing Immutable.js alongside TypeScript for the development of a Redux application. In essence, the structure of my State object is as follows: const defaultState = { booleanValue: true, numberValue: 0, } const StateRecord = ...

Adding a row at a specific position in an AG Grid with Angular 7: A step-by-step guide

I am struggling to insert a new row at a specific position in an ag-grid. Whenever I attempt to add the row, it ends up duplicating all the existing rows in the grid, including the new one. Can anyone assist me with this issue? My goal is to place the new ...

Display the information in real-time as it is being transmitted to the backend

I'm facing a challenge with the user experience. Currently, I am developing a chat application using Ionic, Angular, and Firebase. The issue at hand is that messages are only displayed once they are successfully sent to the server. This means that o ...

Issue: Unable to retrieve redirect result data in Ionic 3 FirebaseExplanation: I am experiencing

I'm currently troubleshooting a minor issue with the firebase.auth().getRedirectResult() function in my Ionic 3 app. It seems that the function is not accessing the then block as expected. Even after attempting to log the result and a random string, n ...

Angular routing is giving me trouble when trying to open various menus at the same location

I am new to Angular and facing a situation where my HomeComponent has a reference to the Appmenucomponent in its .html page. I need to be able to click on different menus (each leading to a new component) and have them open in the same place (div), similar ...

Unable to access or modify properties within a function passed as an argument

deleteDialog(item, func: Function) { this.dialogService .open(ConfirmDialogComponent, { context: { title:"Are you sure?", cancelClss: "info", confirmClss: "danger", }, ...

Transform array of elements from type T1 to element in the array to type T2

Here is a Typescript class I am working with: export class Envelope<T> { result: T; constructor(result: T) { this.result = result; } } I'm trying to convert Envelope<RecentPostResponse[]> to Observable<PostModel[]>: getP ...

Tips for optimizing SEO by efficiently indexing data from client-side API requests

I'm not seeking a step-by-step tutorial on how to set this up. I'm genuinely curious about what's achievable and what's not. Within my Angular 6 application, I am exploring the implementation of server-side content loading for better i ...

Hide react component by clicking it

There is a cookies component with a button labeled "I agree" that I want to use to close the component when clicked. However, I am facing an issue in getting this functionality to work. I understand that the onClick event on the button should trigger an ...

Is there a way to access a child component's method from the parent component using ref in Vue3?

I am encountering an issue while attempting to call the child method from the parent component in vue3 using the ref method. Unfortunately, an error is being thrown. Uncaught TypeError: addNewPaper.value?.savePaper is not a function Displayed below is m ...

What steps can be taken to address a TypeScript error when a function's parameters may be of two different types?

I'm facing an issue with a simple function that retrieves the address as a string interface AddressType1 { city: string | null; state: string | null; postalCode: string | null; } interface AddressType2 { city: string | null; region: strin ...

"Following successful POST login and session storage in MongoDB, the session is unable to be accessed due

When sending login data by POST with the credentials: 'include' option from client server 5500 to backend server 3000, I ensure that my session data is properly stored in MongoDB thanks to the use of 'connect-mongodb-session'. In the ba ...

During the signin process with invalid credentials, a CallbackRouteError is thrown by Next-auth instead of the expected CredentialsSignin error while using the Credentials

I am currently engaging with the tutorials provided by Next JS, accessible at Next JS. Right now I am immersed in chapter 15. However, I encountered a peculiar issue when attempting to sign in with invalid credentials. Instead of receiving the expected err ...

Track every detail of your website visits with Angulartics, including full URIs and even

Utilizing Angulartics and Angulartics Google Analytics [1] to monitor user flow within an angular page has been successful. Event tracking is functioning well, and automatic pageview tracking is also working. However, the anchor part of the URL is not visi ...