Angular-cli: rxjs-compat usage appears broken in v10 when building with "optimization": true

[qstarin]

🐞 Bug report

Command (mark with an x)

• [ X ] build

Affected Package

rxjs-compat ~6.5.0

Is this a regression?

Yes, the previous version in which this bug was not present was: 9.1.11

Following the exact same reproduction steps using @angular ~9.1.0 works as expected and without errors. I encountered this issue upgrading a long-lived production app from @angular v9 to v10; this app has a variety of older rxjs usages using rxjs-compat since @angular v6.

Description

rxjs-compat usage appears to no longer work when building with "optimization": true in angular.json (it _does_ work when optimization is false).

🔬 Minimal Reproduction

ng new
npm install --save rxjs-compat

Edit app.component.ts to import Observable from rxjs/Rx and then create a new Observable in a constructor, final file should look like:

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angtest10';

  constructor() {
    const a = new Observable();
  }
}

Run a build that has "optimization": true in angular.json.

ng serve --prod

Navigate to the application in a browser: http://localhost:4200

🔥 Exception or Error

Chrome (v83) throws the following exception when attempting to load the application at http://localhost:4200

main.c6d1cf7c07add2e9604d.js:1 ERROR TypeError: Po.Observable is not a constructor
    at new e (main.c6d1cf7c07add2e9604d.js:1)
    at gt.e.ɵfac [as factory] (main.c6d1cf7c07add2e9604d.js:1)
    at Ht (main.c6d1cf7c07add2e9604d.js:1)
    at main.c6d1cf7c07add2e9604d.js:1
    at main.c6d1cf7c07add2e9604d.js:1
    at Ks.create (main.c6d1cf7c07add2e9604d.js:1)
    at e.bootstrap (main.c6d1cf7c07add2e9604d.js:1)
    at main.c6d1cf7c07add2e9604d.js:1
    at Array.forEach ()
    at e._moduleDoBootstrap (main.c6d1cf7c07add2e9604d.js:1)
Zt @ main.c6d1cf7c07add2e9604d.js:1
handleError @ main.c6d1cf7c07add2e9604d.js:1
(anonymous) @ main.c6d1cf7c07add2e9604d.js:1
invoke @ polyfills.a4021de53358bb0fec14.js:1
run @ polyfills.a4021de53358bb0fec14.js:1
runOutsideAngular @ main.c6d1cf7c07add2e9604d.js:1
(anonymous) @ main.c6d1cf7c07add2e9604d.js:1
invoke @ polyfills.a4021de53358bb0fec14.js:1
onInvoke @ main.c6d1cf7c07add2e9604d.js:1
invoke @ polyfills.a4021de53358bb0fec14.js:1
run @ polyfills.a4021de53358bb0fec14.js:1
(anonymous) @ polyfills.a4021de53358bb0fec14.js:1
invokeTask @ polyfills.a4021de53358bb0fec14.js:1
onInvokeTask @ main.c6d1cf7c07add2e9604d.js:1
invokeTask @ polyfills.a4021de53358bb0fec14.js:1
runTask @ polyfills.a4021de53358bb0fec14.js:1
m @ polyfills.a4021de53358bb0fec14.js:1
Promise.then (async)
k @ polyfills.a4021de53358bb0fec14.js:1
scheduleTask @ polyfills.a4021de53358bb0fec14.js:1
scheduleTask @ polyfills.a4021de53358bb0fec14.js:1
scheduleMicroTask @ polyfills.a4021de53358bb0fec14.js:1
Z @ polyfills.a4021de53358bb0fec14.js:1
then @ polyfills.a4021de53358bb0fec14.js:1
bootstrapModule @ main.c6d1cf7c07add2e9604d.js:1
zUnb @ main.c6d1cf7c07add2e9604d.js:1
l @ runtime.e227d1a0e31cbccbf8ec.js:1
0 @ main.c6d1cf7c07add2e9604d.js:1
l @ runtime.e227d1a0e31cbccbf8ec.js:1
t @ runtime.e227d1a0e31cbccbf8ec.js:1
r @ runtime.e227d1a0e31cbccbf8ec.js:1
(anonymous) @ main.c6d1cf7c07add2e9604d.js:1

🌍 Your Environment

Angular CLI: 10.0.0
Node: 12.14.0
OS: win32 x64

Angular: 10.0.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.0
@angular-devkit/build-angular     0.1000.0
@angular-devkit/build-optimizer   0.1000.0
@angular-devkit/build-webpack     0.1000.0
@angular-devkit/core              10.0.0
@angular-devkit/schematics        10.0.0
@angular/cli                      10.0.0
@ngtools/webpack                  10.0.0
@schematics/angular               10.0.0
@schematics/update                0.1000.0
rxjs                              6.5.5
typescript                        3.9.5
webpack                           4.43.0

Anything else relevant?

If I set "optimization": false in the production configuration in the angular.json file, then the application works as expected without error.

The build outputs the following warning that was not present in @angular ~9.1.0:

WARNING in C:\dev\angtest10\src\app\app.component.ts depends on rxjs/Rx. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Following that link advises adding the dependencies to the "allowedCommonJsDependencies" property under build.options in the angular.json file. I have added rxjs-compat as directed to no effect.

Here are zips of a broken v10 and working v9 repro both created using the steps outlined above.

rxjs-compat-angular-v9-works.zip
rxjs-compat-angular-v10-errors.zip

[alan-agius4]

Hi @qstarin,

In version 10, we removed the out-of-the-box support for RxJs compat, RxJs compat was used during the transition from RxJs 5 to 6 in Angular 6. By now libraries and applications should be have completed this migration.

Angular version 10, requires a minimum of RxJs version 6.5.3+. If your application still used RxJs 5 style imports you can use the autofixer provided by the RxJs team: https://github.com/ReactiveX/rxjs-tslint

[hugoebarboza]

Hi @alan-agius4,

I have "rxjs": "^6.5.5" and "rxjs-compat": "^6.5.5", but I get the below issue #18035.

Uncaught TypeError: Q.Subject is not a constructor at Object.vWu4

Sincerely,
Hugo

[qstarin]

@alan-agius4 Thanks, guess I missed that change for v10 along the way.

@hugoebarboza You'll have to switch any places using old-style RxJs imports and chained functions to use new-style imports and functions passed to the .pipe etc. and stop using rxjs-compat.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}