Angular 13安装ngx-toastr报错ERESOLVE无法解析依赖树

问题根因 #

npm默认拉取的最新稳定版ngx-toastr@15.0.0设置的peer依赖要求为@angular/common@>=14.0.0-0，和Angular 13项目内置的@angular/common@13.0.3版本不匹配，触发npm依赖树解析失败。

修复方法 #

推荐方案（无兼容隐患） #

安装与Angular 13版本适配的ngx-toastr版本即可，ngx-toastr 14.x大版本的peer依赖完全兼容Angular 13，执行以下安装命令：

npm install ngx-toastr@14.x --save

注意：ngx-toastr依赖@angular/animations包，如果你项目中未安装该依赖，需要安装和本地Angular主版本一致的版本，即执行npm install @angular/animations@13.x --save。

安装完成后完成基础配置即可正常使用：

• 在项目angular.json文件的styles配置项中引入toastr默认样式：

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

• 在根模块app.module.ts中引入依赖模块并注册：

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // 必须引入，否则弹窗动画无法正常工作
    ToastrModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

临时方案（不推荐） #

如果出于特殊原因必须使用高版本ngx-toastr，可以在安装命令后追加--legacy-peer-deps参数跳过npm的peer依赖校验：

npm install ngx-toastr --save --legacy-peer-deps

该方式不会校验依赖版本匹配性，安装后的包大概率存在运行时兼容问题，未经过完整功能验证不建议在生产环境使用。

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