ngx-toastr编译报错：Generic type 'ɵɵComponentDeclaration'需7-8个类型参数

错误原因 #

这个错误和自定义服务的toaster属性设置、样式文件导入均无关，核心问题是你安装的ngx-toastr版本与当前Angular版本不兼容。

Angular内部的组件声明类型ɵɵComponentDeclaration在不同版本中对泛型参数数量的要求不同：

• Angular 14及以下版本要求7个泛型参数
• Angular 15+版本要求8个泛型参数

如果你的Angular是15+版本，但安装了适配低版本Angular的旧版ngx-toastr，就会触发这个编译错误。

解决方法 #

1. 匹配ngx-toastr与Angular版本 #

根据你的Angular版本安装对应版本的ngx-toastr：

• Angular 15+：安装ngx-toastr@16.x及以上版本
• Angular 14：安装ngx-toastr@15.x版本
• Angular 13：安装ngx-toastr@14.x版本
• Angular 12：安装ngx-toastr@13.x版本

执行对应版本的安装命令（以Angular 15+为例）：

npm uninstall ngx-toastr
npm install ngx-toastr@latest

2. 确认依赖完整 #

ngx-toastr依赖Angular动画模块，确保已安装：

npm install @angular/animations

3. 修正AppModule配置 #

在app.module.ts中正确导入模块：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [
    BrowserAnimationsModule, // 必须导入动画模块
    ToastrModule.forRoot({
      // 可选配置示例
      positionClass: 'toast-top-right',
      timeOut: 3000
    })
  ]
})
export class AppModule { }

4. 修复样式不生效问题 #

如果styles.css中的导入无效，直接在angular.json的styles数组中添加样式路径：

"styles": [
  "src/styles.css",
  "node_modules/ngx-toastr/toastr.css"
]

最后重启开发服务器：

ng serve --open

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