Angular 10中Subject实例化错误：生产构建后浏览器运行异常

这个问题的核心是RxJS模块导入路径不正确，生产构建的激进优化导致Subject没有被正确打包，而开发环境（ng serve）因为优化程度较低，暂时掩盖了这个问题。

问题原因 #

你当前使用的是旧版RxJS的深度导入方式：

import { Subject } from "rxjs/Subject";

从RxJS 6开始，官方就推荐从主包入口导入所有操作符和类，而非子路径导入。这种旧导入方式在开发环境中能正常工作，但在生产构建（ng build --prod）时，尤其是禁用了Ivy（使用View Engine）的情况下，webpack的tree-shaking优化会错误地将未被正确引用的Subject模块剔除，最终导致运行时出现TypeError: $m.Subject is not a constructor的错误。

解决方案 #

修改error-handling.service.ts中的导入语句，将Subject从主rxjs包导入：

import { Injectable } from "@angular/core";
import { Subject } from "rxjs"; // 修改此处的导入路径

@Injectable({
  providedIn: "root",
})
export class ErrorHandlingService {
  private errors: Subject<string[]> = new Subject();
  constructor() {}

  public addErrors = (errors: string[]): void => this.errors.next(errors);
  public getErrors = () => this.errors.asObservable();
}

验证步骤 #

1. 保存修改后的文件
2. 重新执行生产构建命令：

ng build --prod

3. 部署或运行生成的生产代码，错误应该会消失。

补充说明 #

• 禁用Ivy后，Angular使用旧的View Engine编译流程，对模块导入的兼容性比Ivy差，所以这种旧导入路径的问题会在生产构建中暴露出来。
• 开发环境的打包没有开启最严格的tree-shaking，模块依赖能被正确解析，因此不会出现报错。

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