RxJS v6/7 support in Angular v13 breaking imports

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

According to angular/angular-cli#21795:

With the Angular framework supporting rxjs 7 for Angular 13, new projects (ng new …) can now be created using rxjs 7. rxjs 6 is also still fully supported with Angular 13 allowing existing projects to continue to use rxjs 6 if preferred or required. Support for rxjs 7 within the framework was enabled via #42991

While supporting multiple versions of such direct dependencies can seem to be nice to final users, it can lead to a lot of problems and is not nice to library authors, as they must ensure compatibility with both versions.

For RxJS 7, there is a very important change in v7.2 (from RxJS changelog):

Operators are all exported at the top level, from “rxjs”. From here on out, we encourage top-level imports with RxJS. Importing from rxjs/operators will be deprecated soon

So it means that if a library author uses RxJS 7.2 new imports (for example import { mapTo } from 'rxjs';), then if the lib is used in a user application still with RxJS 6, the compilation will break (error below).

You can reproduce with these steps:

1. git clone https://github.com/cyrilletuzi/ng13-rxjsversionsissue
2. cd ng13-rxjsversionsissue
3. npm install
4. npm start (builds the lib with RxJS 7 then the app with RxJS 6)

The project was just generated with Angular CLI v13 and a library was generated with ng g library demo.

It may not be the only issue (issues already happened in the past where some RxJS classes like Observable were incompatible between different versions).

Also, while I’m not sure, for the opposite scenario, it may lead to performance/bundle size issue. If a user application uses RxJS 7 new imports, and libs are still using RxJS 6 imports (which seems to be the case of Angular itself), won’t it mean that operators will be included twice in the final bundle?

Please provide a link to a minimal reproduction of the bug

https://github.com/cyrilletuzi/ng13-rxjsversionsissue

Please provide the exception or error you saw

./dist/demo/fesm2015/demo.js:9:28-33 - Error: export 'mapTo' (imported as 'mapTo') was not found in 'rxjs'

### Please provide the environment you discovered this bug in

```true
Angular CLI: 13.0.0-next.7
Node: 16.10.0 (Unsupported)
Package Manager: npm 7.24.1
OS: darwin arm64

Angular: 13.0.0-next.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.0-next.7
@angular-devkit/build-angular   13.0.0-next.7
@angular-devkit/core            13.0.0-next.7
@angular-devkit/schematics      13.0.0-next.7
@angular/cli                    13.0.0-next.7
@schematics/angular             13.0.0-next.7
ng-packagr                      13.0.0-next.5
rxjs                            6.6.7
typescript                      4.4.3

Anything else?

No response

[alan-agius4]

Regarding your concern of increase in bundle size. This shouldn’t be a problem at all, because the operators imported directly from rxjs are just a reexport from rxjs/operators, and therefore they are the same symbols.

https://github.com/ReactiveX/rxjs/blob/e57473574a0e4661e7d526db5e261a62f6602d56/src/index.ts#L146

[cyrilletuzi]

@alan-agius4 Oops, fixed.