尝试将 ToastrModule.forRoot 添加到导入 forroot 时会抛出错误

Question

我目前正在使用 angular 制作一个项目，并尝试添加 ngx toastr。 我在导入中添加了 ToastrModule 以及 BrowserModule 和 BrowserAnimationsModule。 添加 ToastrModule.forRoot() 显示以下错误：

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'.

我不确定它是否也相关，但是将 private toastr: ToastrService 放入我的 component.ts 文件的构造函数中会在控制台中显示以下错误：

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)

我运行了以下命令：

npm install ngx-toastr --save

和

npm install @angular/animations --save

到目前为止，我无法弄清楚问题出在哪里。 我试过其他版本的 toastr package 但这并没有解决问题。 我目前正在尝试将 toastr 的 16.0.1 版与 angular 15.0.1 一起使用

尝试在此文件中使用 toastr

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

这是 app.module 文件

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

• 尝试使用这个版本 ngx-toastr:"10.0.4"。

• 添加路径：angular.json中的styles表中的“node_modules/ngx-toastr/toastr.css”

• 在组件中导入 toastr

导入 {ToasterService} 表单“ngx-toastr”，将服务注入 ctor

：你忘了像这样添加 that.ToastrModule:forRoot() ：

imports: [
    //some module

    BrowserAnimationsModule, 
    ToastrModule.forRoot(),

  ],