Ошибка создания объекта в Angular 10

Question

У меня есть приложение Angular, которое отлично работает через ng serve. Приложение также правильно строится через ng build --prod, но когда я запускаю сгенерированные источники в браузере, я получаю следующую ошибку:

TypeError: $m.Subject is not a constructor
    at new e (error-handling.service.ts:8)
    at core.js:21140
    at Rs (core.js:21136)
    at Os (core.js:21075)
    at Gs.get (core.js:21628)
    at pu (core.js:21997)
    at du (core.js:21876)
    at su (core.js:21753)
    at Xd (core.js:30266)
    at Yd (core.js:30175)
    at Object.dh [as createRootView] (core.js:30688)
    at Ns.create (core.js:21357)
    at io.create (core.js:19158)
    at e.bootstrap (core.js:28031)
    at core.js:27742
    at Array.forEach (<anonymous>)
    at e._moduleDoBootstrap (core.js:27742)
    at core.js:27712
    at l.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:27149)
    at l.invoke (zone-evergreen.js:363)
    at i.run (zone-evergreen.js:123)
    at zone-evergreen.js:857
    at l.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27137)
    at l.invokeTask (zone-evergreen.js:398)
    at i.runTask (zone-evergreen.js:167)
    at m (zone-evergreen.js:569)

error-handling.service.ts выглядит следующим образом:

import { Injectable } from "@angular/core";
import { Subject } from "rxjs/Subject";

@Injectable({
  providedIn: "root",
})
export class ErrorHandlingService {
  private errors: Subject<string[]> = new Subject(); // <-- error in this line

  constructor() {}

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

  public getErrors = () => this.errors.asObservable();
}

Код работал нормально на Angular 9 после того, как я обновил проект до 10 (который также обновил TypeScript), он перестал работать. Немного сбивает с толку, почему он работает через ng serve и вылетает при запуске в продакшене. Кроме того, почему эта ошибка не обнаруживается во время компиляции?

Ivy отключен для моего проекта.

Answer 1

Проблема определенно в вашем импорте. Subject необходимо импортировать из rxjs.

import { Subject } from "rxjs";

Был целый модуль rxjs-compat, даже который позволял что-то вроде этого. Я почти уверен, что вся эта поддержка обратной совместимости больше не поддерживается. Это в основном пришло из rx js v5. Я предполагаю, что вы сейчас как-то используете rx js v7, и они определенно бросают его туда.

Подробнее об этом можно прочитать здесь . Как видите, Subject необходимо импортировать напрямую из rxjs. Если ваши линтеры жалуются, эти правила действительно нужно обновить, потому что rx js v6 выпускается более 2 лет a go