fix(@angular-devkit/build-angular): load polyfills and runtime as scripts instead of modules

This commit updates changes the way polyfills and runtime are loaded from modules to scripts. This is required as otherwise Jasmine will be loaded prior to Zone.js which causes clock patching not to work.

Closes #24651

Author: alan-agius4

packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma-context.html

@@ -30,8 +30,8 @@
       // All served files with the latest timestamps
       %MAPPINGS%
     </script>
-    <script src="_karma_webpack_/runtime.js" crossorigin="anonymous" type="module"></script>
-    <script src="_karma_webpack_/polyfills.js" crossorigin="anonymous" type="module"></script>
+    <script src="_karma_webpack_/runtime.js" crossorigin="anonymous"></script>
+    <script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
     <!-- Dynamically replaced with <script> tags -->
     %SCRIPTS%
     <script src="_karma_webpack_/scripts.js" crossorigin="anonymous" defer></script>

packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma-debug.html

@@ -32,8 +32,8 @@
       // All served files with the latest timestamps
       %MAPPINGS%
     </script>
-    <script src="_karma_webpack_/runtime.js" crossorigin="anonymous" type="module"></script>
-    <script src="_karma_webpack_/polyfills.js" crossorigin="anonymous" type="module"></script>
+    <script src="_karma_webpack_/runtime.js" crossorigin="anonymous"></script>
+    <script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
     <!-- Dynamically replaced with <script> tags -->
     %SCRIPTS%
     <script src="_karma_webpack_/scripts.js" crossorigin="anonymous" defer></script>

tests/legacy-cli/e2e/tests/test/test-jasmine-clock.ts

@@ -0,0 +1,37 @@
+import { ng } from '../../utils/process';
+import { writeFile } from '../../utils/fs';
+
+export default async function () {
+  await writeFile(
+    'src/app/app.component.spec.ts',
+    `
+  import { TestBed } from '@angular/core/testing';
+  import { RouterTestingModule } from '@angular/router/testing';
+  import { AppComponent } from './app.component';
+
+  describe('AppComponent', () => {
+    beforeAll(() => {
+      jasmine.clock().install();
+    });
+
+    afterAll(() => {
+      jasmine.clock().uninstall();
+    });
+
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [RouterTestingModule],
+        declarations: [AppComponent],
+      }).compileComponents();
+    });
+
+    it('should create the app', () => {
+      const fixture = TestBed.createComponent(AppComponent);
+      expect(fixture.componentInstance).toBeTruthy();
+    });
+  });
+  `,
+  );
+
+  await ng('test', '--watch=false');
+}