fix(@angular-devkit/build-angular): enable custom es2015 conditiona…

…l exports

By adding the `es2015` condition name, the build process will now use ES2015 specific files if a package's exports entries contain files for this condition. This allows packages to provide multiple variants of the code that the bundler can then use based on the bundler's configuration. For Angular v12, ES2015 code is preferred. However, some packages may prefer to export other variants by default but provide an `es2015` condition to allow other variants if requested.
The server configuration is intentional not altered since the server output executes on Node.js and should use the `node` condition which is automatically added by Webpack based on the output target.

package.json

@@ -206,6 +206,7 @@
     "regenerator-runtime": "0.13.9",
     "resolve-url-loader": "4.0.0",
     "rxjs": "6.6.7",
+    "rxjs-7": "npm:rxjs@7.4.0",
     "sass": "1.36.0",
     "sass-loader": "12.1.0",
     "sauce-connect-proxy": "https://saucelabs.com/downloads/sc-4.6.4-linux.tar.gz",

packages/angular_devkit/build_angular/BUILD.bazel

@@ -354,6 +354,7 @@ LARGE_SPECS = {
             "@npm//font-awesome",
             "@npm//jquery",
             "@npm//popper.js",
+            "@npm//rxjs-7",
         ],
     },
 }

packages/angular_devkit/build_angular/src/browser/tests/behavior/rxjs-export-conditions_spec.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { buildWebpackBrowser } from '../../index';
+import { BASE_OPTIONS, BROWSER_BUILDER_INFO, describeBuilder } from '../setup';
+
+describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
+  describe('Behavior: "RxJS ES2015 exports condition"', () => {
+    it('uses the rxjs ES2015 distribution files with rxjs 7.x', async () => {
+      // The `es2015` export condition is enabled by the browser webpack configuration partial.
+      // This should cause the application output to contain the ES2015 code and not the ES5 code.
+
+      // Add rxjs usage to ensure it is present in the application output
+      // The `rxjs-7` module specifier (and accompanying root package.json entry) is required to
+      // support testing rxjs 7 while the actual CLI dependencies are still using rxjs 6 since
+      // bazel unit test setup uses the main package.json dependencies during test.
+      await harness.modifyFile(
+        'src/main.ts',
+        (content) => `import { of } from 'rxjs-7';\n` + content + '\nof(1, 2, 3);',
+      );
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        vendorChunk: true,
+      });
+
+      const { result } = await harness.executeOnce();
+
+      expect(result?.success).toBe(true);
+      harness
+        .expectFile('dist/vendor.js')
+        .content.not.toContain('./node_modules/rxjs-7/dist/esm5/');
+      harness.expectFile('dist/vendor.js').content.toContain('./node_modules/rxjs-7/dist/esm/');
+      harness.expectFile('dist/vendor.js').content.not.toContain('var Observable');
+      harness.expectFile('dist/vendor.js').content.toContain('class Observable');
+    });
+  });
+});

packages/angular_devkit/build_angular/src/webpack/configs/browser.ts

@@ -65,6 +65,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
     devtool: false,
     resolve: {
       mainFields: ['es2015', 'browser', 'module', 'main'],
+      conditionNames: ['es2015', '...'],
     },
     output: {
       crossOriginLoading,

packages/angular_devkit/build_angular/src/webpack/configs/test.ts

@@ -55,6 +55,7 @@ export function getTestConfig(
     target: wco.tsConfig.options.target === ScriptTarget.ES5 ? ['web', 'es5'] : 'web',
     resolve: {
       mainFields: ['es2015', 'browser', 'module', 'main'],
+      conditionNames: ['es2015', '...'],
     },
     devtool: false,
     entry: {

yarn.lock

@@ -10261,6 +10261,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+"rxjs-7@npm:rxjs@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.4.0.tgz#a12a44d7eebf016f5ff2441b87f28c9a51cebc68"
+  integrity sha512-7SQDi7xeTMCJpqViXh8gL/lebcwlp3d831F05+9B44A4B0WfsEwUQHR64gsH1kvJ+Ep/J9K2+n1hVl1CsGN23w==
+  dependencies:
+    tslib "~2.1.0"
+
 rxjs@6.6.7, rxjs@^6.4.0, rxjs@^6.5.0, rxjs@^6.5.3:
   version "6.6.7"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"