Angular17独立组件中Toastr注入失败问题求助

你遇到的NullInjectorError是因为没有正确配置ngx-toastr所需的依赖提供者，独立组件模式下不能直接把ToastrService或ToastNoAnimation丢进providers数组，需要用ngx-toastr针对Angular新API提供的provideToastr()函数来完成配置。

正确配置方式 #

1. 确保依赖安装完整

先确认已经安装了ngx-toastr和必要的动画依赖（即使你用无动画组件，基础依赖还是需要）：

npm install ngx-toastr @angular/animations

2. 组件级别配置（仅当前独立组件可用）

在你的_PDSLoginComponent的@Component装饰器中，用provideToastr()替代手动添加服务：

import { Component } from '@angular/core';
import { ToastrService, provideToastr, ToastNoAnimation } from 'ngx-toastr';

@Component({
  selector: 'app-pds-login',
  standalone: true,
  imports: [/* 你的其他导入模块 */],
  providers: [
    provideToastr({
      // 全局配置项，按需调整
      timeOut: 3000,
      positionClass: 'toast-top-right',
      // 指定无动画组件
      toastComponent: ToastNoAnimation
    })
  ],
  templateUrl: './pds-login.component.html',
  styleUrls: ['./pds-login.component.css']
})
export class _PDSLoginComponent {
  constructor(private toastr: ToastrService) {}

  // 测试使用
  showLoginSuccess() {
    this.toastr.success('登录成功！', '操作提示');
  }
}

3. 全局配置（整个应用所有独立组件可用）

如果想让toastr在全应用生效，直接在main.ts的bootstrapApplication中配置：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideToastr, ToastNoAnimation } from 'ngx-toastr';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideToastr({
      toastComponent: ToastNoAnimation,
      timeOut: 4000,
      closeButton: true
    }),
    // 其他应用级提供者
  ]
});

这种情况下，你的_PDSLoginComponent不需要再在自己的providers里加任何toastr相关配置，直接注入ToastrService即可使用。

错误原因说明 #

之前你手动添加ToastrService和ToastNoAnimation到providers，并没有提供ToastConfig这个关键的注入令牌——而ToastrService的初始化依赖ToastConfig。provideToastr()函数会自动帮你注册所有必要的依赖（包括ToastConfig、ToastrService以及你指定的动画组件），所以单独添加服务是无效的。

内容的提问来源于stack exchange，提问作者JoshQ