NullInjectorError：R3InjectorError [ToastrService - > ToastrService - > InjectionToken ToastConfig - > InjectionToken ToastConfig]：

Question

当我在主模块组件中添加 ngx-toastr ProvideToast() 时，我陷入了在 angualr 16 的角度独立微前端中添加 ngx-toastr 的困境。请检查下面的屏幕截图：

谢谢

您好，当我在主模块组件中添加 ngx-toastr ProvideToast() 时，我陷入了在 angualr 16 的角度独立微前端中添加 ngx-toastr 的困境。请检查下面的屏幕截图：

谢谢

Answer 1

这是一个工作示例供您参考。

请浏览他们的 github 页面上的

Getting Started

。

我遵循的步骤。

1. 安装烤面包机

   npm install ngx-toastr --save

   ，如果需要安装

   npm install @angular/animations --save

2. 将以下行复制粘贴到全局 styles.scss

scss

// regular style toast
@import 'ngx-toastr/toastr';

// bootstrap style toast
// or import a bootstrap 4 alert styled design (SASS ONLY)
// should be after your bootstrap imports, it uses bs4 variables, mixins, functions
@import 'ngx-toastr/toastr-bs4-alert';

// if you'd like to use it without importing all of bootstrap it requires
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
// bootstrap 4
@import 'ngx-toastr/toastr-bs4-alert';
// boostrap 5
@import 'ngx-toastr/toastr-bs5-alert';

---

或

角度.json

add the styles array the toaster css

"styles": [
  "styles.scss",
  "node_modules/ngx-toastr/toastr.css" // try adding '../' if you're using angular cli before 6
]

3. 添加打开toastr的代码

main.ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { provideToastr } from 'ngx-toastr';
import { provideAnimations } from '@angular/platform-browser/animations';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)="showSuccess()">
      open toaster
    </button>
  `,
})
export class App {
  constructor(private toastr: ToastrService) {}

  showSuccess() {
    this.toastr.success('Hello world!', 'Toastr fun!');
  }
}

bootstrapApplication(App, {
  providers: [
    provideAnimations(), // required animations providers
    provideToastr(), // Toastr providers
  ],
});

Stackblitz Demo