When trying to add ToastrModule.forRoot to imports the forroot throws an error

Question

I am currently making a project with angular and am trying to add the ngx toastr. I have added the ToastrModule as well as the BrowserModule and BrowsernAnimationsModule in my imports. Adding ToastrModule.forRoot() shows the following error:

TS2322: Type 'ModuleWithProviders<ToastrModule>' is not assignable to type 'any[] | Type<any> | ModuleWithProviders<{}>'.   Type 'ModuleWithProviders<ToastrModule>' is not assignable to type 'ModuleWithProviders<{}>'.     Types of property 'providers' are incompatible.       Type '(Provider | EnvironmentProviders)[] | undefined' is not assignable to type 'Provider[] | undefined'.         Type '(Provider | EnvironmentProviders)[]' is not assignable to type 'Provider[]'.           Type 'Provider | EnvironmentProviders' is not assignable to type 'Provider'.             Type 'EnvironmentProviders' is not assignable to type 'Provider'.

I am not sure if it is related as well, but putting private toastr: ToastrService in the constructor of my component.ts file shows the following error in the console:

main.ts:11 ERROR Error: Uncaught (in promise): Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `EnvironmentInjector#runInContext`. Find more at https://angular.io/errors/NG0203
Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `EnvironmentInjector#runInContext`. Find more at https://angular.io/errors/NG0203
    at injectInjectorOnly (core.mjs:731:15)
    at Module.ɵɵinject (core.mjs:742:12)
    at Object.ToastrService_Factory [as factory] (ngx-toastr.mjs:613:1)
    at R3Injector.hydrate (core.mjs:6887:35)
    at R3Injector.get (core.mjs:6775:33)
    at ChainedInjector.get (core.mjs:13769:36)
    at lookupTokenUsingModuleInjector (core.mjs:3293:39)
    at getOrCreateInjectable (core.mjs:3338:12)
    at Module.ɵɵdirectiveInject (core.mjs:10871:12)
    at NodeInjectorFactory.LoginComponent_Factory [as factory] (login.component.ts:10:28)
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26218:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at drainMicroTaskQueue (zone.js:585:35)

I have ran the following commands:

npm install ngx-toastr --save

and

npm install @angular/animations --save

I am so far not able to figure out what the problem could be. I have tried other versions of the toastr package but this did not fix the problem. Im currently trying to use version 16.0.1 of the toastr with angular 15.0.1

Trying to use the toastr in this file

import {Component, OnInit} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import { ToastrService } from 'ngx-toastr';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  model: loginModel = {
    username: '',
    password: ''
  }

  constructor(private http: HttpClient,
              private toastr: ToastrService) {
  }

  ngOnInit(): void {
  }

  sendLogindata(): void {
    let url = "http://localhost:8080/regterschotracing/login";
    this.http.post<{ username: String, password: String }>(url, this.model)
      .subscribe({
        next: data => {
          this.toastr.success('Hello world!', 'Toastr fun!', {progressBar: true});
          //Here we can send the user to the next page after they have a session with the needed details
        },
        error: error => {
          console.log("There was an error with error code: ");
          console.log(error);
          //Here we need to show the user the message that they didn't login because of wrong credentials
        }
      })
  }
}

And here is the app.module file

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {RouterOutlet} from "@angular/router";
import {HomeComponent} from './home/home.component';
import {MatSidenavModule} from "@angular/material/sidenav";
import {MatButtonModule} from "@angular/material/button";
import {MatFormFieldModule,} from "@angular/material/form-field";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {MatTabsModule} from "@angular/material/tabs";
import {MatCheckboxModule} from "@angular/material/checkbox";
import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from "@angular/material/core";
import {MatTableModule} from "@angular/material/table";
import {DragDropModule} from "@angular/cdk/drag-drop";
import {NavbarComponent} from './navbar/navbar.component';
import {MatToolbarModule} from "@angular/material/toolbar";
import {MatDividerModule} from "@angular/material/divider";
import {MatIconModule} from "@angular/material/icon";
import {ResizeObserverDirective} from "./navbar/resize-observer.directive";
import {TabsComponent} from './tabs/tabs.component';
import {LoginComponent} from './login/login.component';
import {HttpClientModule} from "@angular/common/http";


const globalRippleConfig: RippleGlobalOptions = {
  disabled: true,
  animation: {
    enterDuration: 0,
    exitDuration: 0
  }
};

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NavbarComponent,
    ResizeObserverDirective,
    TabsComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterOutlet,
    MatSidenavModule,
    MatButtonModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    ReactiveFormsModule,
    MatTabsModule,
    MatCheckboxModule,
    MatTableModule,
    DragDropModule,
    MatToolbarModule,
    FormsModule,
    MatDividerModule,
    MatIconModule,
    HttpClientModule,
    ToastrModule.forRoot(),
  ],

  providers: [{provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: globalRippleConfig}],
  exports: [ResizeObserverDirective],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Please show your app.module.ts and the component, where you use the ngx-toastr — Sven Märki, Nov 25 '22 at 15:01

Chady BAGHDADI · Answer 1 · 2022-11-25T15:50:51.223

0

try to use this version ngx-toastr :"10.0.4".
add the path : "node_modules/ngx-toastr/toastr.css" in the styles table in the angular.json
Import the toastr in the component

import {ToasterService} form "ngx-toastr" the inject the service in the ctor

! you forgot to add that :ToastrModule.forRoot() like that :

imports: [
    //some module

    BrowserAnimationsModule, 
    ToastrModule.forRoot(),

  ],

edited Nov 25 '22 at 15:50

answered Nov 25 '22 at 14:59

Chady BAGHDADI

203
2
7

Trying to add version 10.0.4 gives me an ERESOLVE could not resolve error.npm ERR! Could not resolve dependency: npm ERR! ngx-toastr@"10.0.4" from the root project – B. Bakker Nov 25 '22 at 15:12
delete the node_modules then reinstall it – Chady BAGHDADI Nov 25 '22 at 15:13
I did do it by removing it from the node modules and reinstalling it. I also have the path in the angular.json and the toastr in the component. The problem really is the forroot part. – B. Bakker Nov 25 '22 at 15:35
i edit my responce you need to add the ToastrModule.forRoot(), – Chady BAGHDADI Nov 25 '22 at 15:51
That was my bad. I removed it to continue working on other parts – B. Bakker Nov 25 '22 at 16:03
add this code in your tsconfig.app.json "skipLibCheck": true, see this link https://stackoverflow.com/questions/62755093/angular-error-generic-type-modulewithproviderst-requires-1-type-arguments – Chady BAGHDADI Nov 25 '22 at 16:28
Sadly this does not stop the problem. It now doesn't compile (but yeah that was to be expected). Below is the first four lines of the error followed by more Provider Error: src/app/app.module.ts:64:5 - error TS2322: Type 'ModuleWithProviders' is not assignable to type 'any[] | Type | ModuleWithProviders<{}>'. Type 'ModuleWithProviders' is not assignable to type 'ModuleWithProviders<{}>'. Types of property 'providers' are incompatible. Type '(Provider | EnvironmentProviders)[] | undefined' is not assignable to type 'Provider[] | undefined'. – B. Bakker Nov 26 '22 at 15:48

When trying to add ToastrModule.forRoot to imports the forroot throws an error

1 Answers1