Angular项目部署Nginx后ngx-toastr报错c.Subject is not a constructor

问题场景 #

本地通过ng serve运行时ngx-toastr弹窗功能正常，执行ng build --prod生成部署包并部署到Nginx后，触发弹窗代码出现以下错误：

ERROR TypeError: c.Subject is not a constructor
    at new e (main.42af73f….js:1:1336551)
    at e.value (main.42af73f….js:1:1340579)
    at e.value (main.42af73f….js:1:1338410)
    at e.sendMail (/9.1239612….js:1:86136)
    at /9.1239612….js:1:136416
    at Xu (main.42af73f….js:1:712642)
    at r (main.42af73f….js:1:712804)
    at HTMLInputElement.<anonymous> (main.42af73f….js:1:1077547)
    at t.invokeTask (polyfills.e071be3….js:1:8982)
    at Object.onInvokeTask (main.42af73f….js:1:814856)

触发报错的相关代码：

if(isInvalid === true){
  this.toaster.error('Please provide the correct email ids. Please separate multiple email ids with a comma (,).','Invalid Email Ids',{
            closeButton:true,
            tapToDismiss: false,
            positionClass: 'toast-top-center'
          });
}

环境版本信息：

Angular CLI: 11.2.0
Node: 14.18.1
OS: win32 x64

Angular: 11.2.1  animations, cdk, common, compiler, compiler-cli, core, forms 
material, platform-browser, platform-browser-dynamic
platform-server, router, upgrade

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.0
@angular-devkit/build-angular   0.1102.0
@angular-devkit/core            11.2.0
@angular-devkit/schematics      11.2.0
@angular/cli                    11.2.0
@angular/http                   7.2.0-beta.2
@schematics/angular             11.2.0
@schematics/update              0.1102.0
rxjs                            6.6.3
typescript                      4.1.5

解决方案 #

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

Angular版本与ngx-toastr版本必须兼容，Angular 11对应ngx-toastr 13.x系列稳定版本，执行以下命令安装适配版本：

npm install ngx-toastr@13.2.0 --save

2. 调整生产构建优化配置 #

生产构建的代码压缩和tree shaking可能误删rxjs的Subject相关代码，修改angular.json中的生产构建配置：

"projects": {
  "你的项目名称": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "buildOptimizer": false,
            "optimization": {
              "scripts": false,
              "styles": true,
              "fonts": true
            },
            "vendorChunk": true
          }
        }
      }
    }
  }
}

修改后重新执行ng build --prod构建部署包。

3. 检查rxjs导入与ngx-toastr配置 #

• 确保所有rxjs相关导入都来自rxjs根目录，避免使用内部路径：

  // 正确写法
  import { Subject } from "rxjs";
  // 错误写法（禁止使用）
  import { Subject } from "rxjs/internal/Subject";
  

• 确认app.module.ts中正确导入并配置ToastrModule：

  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { ToastrModule } from 'ngx-toastr';
  
  @NgModule({
    imports: [
      BrowserAnimationsModule,
      ToastrModule.forRoot({
        positionClass: 'toast-top-center',
        closeButton: true
      })
    ]
  })
  export class AppModule { }
  

4. 清理缓存重新构建 #

缓存可能导致依赖打包异常，执行以下步骤清理后重新构建：

# 删除依赖文件夹和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 清理Angular构建缓存
ng clean
# 重新执行生产构建
ng build --prod

问题原因 #

该错误本质是生产构建的优化机制（如tree shaking、代码压缩）导致rxjs的Subject类未被正确打包到生产代码中，或者ngx-toastr与当前Angular/rxjs版本不兼容，导致运行时无法找到Subject的构造函数。

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