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

Answer 1

• 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(),

  ],