Angular 5.2.10从ng2-toastr迁移到ngx-toastr遇TypeError求助

让我们一步步定位问题，从最可能的原因开始排查：

1. 优先检查版本兼容性问题 #

你当前使用的ngx-toastr@8.4.0是为**Angular 6+**设计的，而你的项目基于Angular 5.2.10，版本不匹配会导致底层依赖（比如rxjs、Angular核心模块）的调用冲突，这很可能是触发handler.handle错误的核心原因。

解决方法：

• 卸载当前版本的ngx-toastr，安装适配Angular 5的7.x版本：

  npm uninstall ngx-toastr --save
  npm install ngx-toastr@7.2.0 --save
  

2. 确认ngx-toastr的模块配置是否正确 #

ngx-toastr的配置方式和ng2-toastr完全不同，不需要手动设置ViewContainerRef，但必须在根模块中完成配置：

• 在AppModule中导入动画模块和Toastr模块：

  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  // 如果不需要动画，可以用NoopAnimationsModule替代
  import { ToastrModule } from 'ngx-toastr';
  
  @NgModule({
    imports: [
      BrowserAnimationsModule,
      ToastrModule.forRoot({
        // 可选：添加自定义配置，比如位置、超时时间等
        positionClass: 'toast-top-right',
        timeOut: 3000
      })
    ]
  })
  export class AppModule { }
  

3. 清理旧依赖与缓存 #

你的package.json中还保留着ng2-toastr依赖，这可能和ngx-toastr产生冲突，同时缓存也可能残留旧的代码：

1. 卸载旧的ng2-toastr：

   npm uninstall ng2-toastr --save
   

2. 清理项目缓存和依赖：
   • 删除node_modules文件夹
   • 删除package-lock.json文件
   • 重新安装依赖：npm install
   • 清除Angular CLI缓存后启动项目：ng serve --clear-cache

4. 检查组件中Toastr服务的注入与使用 #

ngx-toastr使用的是ToastrService，而不是ng2-toastr的ToastsManager，确保所有使用提示框的组件都完成了替换：

// 替换旧的导入
// import { ToastsManager } from 'ng2-toastr';
import { ToastrService } from 'ngx-toastr';

constructor(private toastr: ToastrService) {}

// 使用示例
showSuccess() {
  this.toastr.success('操作成功！', '提示');
}

5. 验证rxjs版本兼容性 #

Angular 5.2.10对应的rxjs版本是5.5.6，而ngx-toastr 8.x依赖rxjs 6+，这也会导致操作符或内部方法调用失败。降级到ngx-toastr 7.x后，它会兼容rxjs 5.x版本，这个问题会自动解决。

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