test: refactor bundle tests to not directly access CommonJS module.exports (#46642)

The test apps are bundled using their production ESM JS output using
`esbuild`. ESBuild warns about any CJS usages, like `module.exports.`

```
INFO: From Bundling Javascript packages/core/test/bundling/todo_i18n/index.ts [esbuild]:
▲ [WARNING] The CommonJS "module" variable is treated as a global variable in an ECMAScript module and may not work as expected

    bazel-out/k8-fastbuild/bin/packages/core/test/bundling/todo_i18n/index.mjs:494:0:
      494 │ module.exports = {
          ╵ ~~~~~~

  This file is considered to be an ECMAScript module because the file name ends in ".mjs".
```

Some bundling tests currently use `module.exports` to make
functions/symbols available to specs later requiring the bundle (in
order to run the bundle). Instead of using the CJS global here, the
logic can be attached consistently to `window` (there is currently a
mismatch of window vs. module.exports anyway..).

PR Close #46642

packages/core/test/bundling/forms_reactive/forms_e2e_spec.ts

@@ -18,7 +18,11 @@ describe('functional test for reactive forms', () => {
   BUNDLES.forEach((bundle) => {
     describe(`using ${bundle} bundle`, () => {
       it('should render template form', withBody('<app-root></app-root>', async () => {
-           const {whenRendered, bootstrapApp} = require(path.join(PACKAGE, bundle));
+           // load the bundle
+           require(path.join(PACKAGE, bundle));
+           // the bundle attaches the following fields to the `window` global.
+           const {bootstrapApp, whenRendered} = window as any;
+
            await bootstrapApp();
 
            // Reactive forms

packages/core/test/bundling/forms_reactive/index.ts

@@ -101,7 +101,5 @@ function bootstrapApp() {
 // This bundle includes `@angular/core` within it which means that the test asserting
 // against it will load a different core bundle. These symbols are exposed so that they
 // can interact with the correct `@angular/core` instance.
-module.exports = {
-  whenRendered,
-  bootstrapApp
-};
+(window as any).whenRendered = whenRendered;
+(window as any).bootstrapApp = bootstrapApp;

packages/core/test/bundling/forms_template_driven/forms_e2e_spec.ts

@@ -18,7 +18,11 @@ describe('functional test for forms', () => {
   BUNDLES.forEach((bundle) => {
     describe(`using ${bundle} bundle`, () => {
       it('should render template form', withBody('<app-root></app-root>', async () => {
-           const {bootstrapApp, whenRendered} = require(path.join(PACKAGE, bundle));
+           // load the bundle
+           require(path.join(PACKAGE, bundle));
+           // the bundle attaches the following fields to the `window` global.
+           const {bootstrapApp, whenRendered} = window as any;
+
            await bootstrapApp();
 
            // Template forms

packages/core/test/bundling/forms_template_driven/index.ts

@@ -78,7 +78,5 @@ function bootstrapApp() {
 // This bundle includes `@angular/core` within it which means that the test asserting
 // against it will load a different core bundle. These symbols are exposed so that they
 // can interact with the correct `@angular/core` instance.
-module.exports = {
-  whenRendered,
-  bootstrapApp
-};
+(window as any).whenRendered = whenRendered;
+(window as any).bootstrapApp = bootstrapApp;

packages/core/test/bundling/todo/index.ts

@@ -203,7 +203,5 @@ function bootstrapApp() {
 // This bundle includes `@angular/core` within it which means that the test asserting
 // against it will load a different core bundle. These symbols are exposed so that they
 // can interact with the correct `@angular/core` instance.
-module.exports = {
-  whenRendered,
-  bootstrapApp
-};
+(window as any).whenRendered = whenRendered;
+(window as any).bootstrapApp = bootstrapApp;

packages/core/test/bundling/todo/todo_e2e_spec.ts

@@ -19,7 +19,11 @@ describe('functional test for todo', () => {
     describe(bundle, () => {
       it('should place styles on the elements within the component',
          withBody('<todo-app></todo-app>', async () => {
-           const {bootstrapApp, whenRendered} = require(path.join(PACKAGE, bundle));
+           // load the bundle
+           require(path.join(PACKAGE, bundle));
+           // the bundle attaches the following fields to the `window` global.
+           const {bootstrapApp, whenRendered} = window as any;
+
            await bootstrapApp();
            const toDoAppComponent = (window as any).toDoAppComponent;
            await whenRendered(toDoAppComponent);

packages/core/test/bundling/todo_i18n/index.ts

@@ -209,4 +209,4 @@ loadTranslations(translations);
 // This bundle includes `@angular/core` within it which means that the test asserting
 // against it will load a different core bundle. These symbols are exposed so that they
 // can interact with the correct `@angular/core` instance.
-module.exports = {whenRendered};
+(window as any).whenRendered = whenRendered;

packages/core/test/bundling/todo_i18n/todo_e2e_spec.ts

@@ -20,8 +20,11 @@ describe('functional test for todo i18n', () => {
     describe(bundle, () => {
       it('should render todo i18n', withBody('<todo-app></todo-app>', async () => {
            clearTranslations();
-           const {whenRendered} = require(path.join(PACKAGE, bundle));
-           await (window as any).appReady;
+           // load the bundle
+           require(path.join(PACKAGE, bundle));
+           // the bundle attaches the following fields to the `window` global.
+           const {appReady, whenRendered} = window as any;
+           await appReady;
            expect(document.body.textContent).toContain('liste de tâches');
            expect(document.body.textContent).toContain('Démontrer les components');
            expect(document.body.textContent).toContain('Démontrer NgModules');