fix(@angular-devkit/build-angular): styles CSS files not available in unit tests

With this change we force styles to be extracted in css files during unit tests.

Closes #21054

(cherry picked from commit dc5a585)

Author: alan-agius4

packages/angular_devkit/build_angular/src/karma/index.ts

@@ -43,7 +43,7 @@ async function initialize(
     // * `outputPath` which is fixed for tests
     // * `budgets` which might be incorrect due to extra dev libs
     {
-      ...((options as unknown) as BrowserBuilderOptions),
+      ...(options as unknown as BrowserBuilderOptions),
       outputPath: '',
       budgets: undefined,
       optimization: false,
@@ -58,6 +58,7 @@ async function initialize(
       // https://github.com/webpack/webpack-dev-middleware/blob/698c9ae5e9bb9a013985add6189ff21c1a1ec185/src/index.js#L65
       // https://github.com/webpack/webpack/blob/cde1b73e12eb8a77eb9ba42e7920c9ec5d29c2c9/lib/Compiler.js#L379-L388
       watch: true,
+      extractCss: true,
     },
     context,
     (wco) => [

packages/angular_devkit/build_angular/src/karma/tests/options/code-coverage_spec.ts

@@ -141,8 +141,8 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
         codeCoverage: true,
       });
 
-      const result = await harness.execute();
-      await result
+      await harness
+        .execute()
         .pipe(
           // In incremental mode, karma-coverage does not have the ability to mark a
           // run as failed if code coverage does not pass. This is because it does

packages/angular_devkit/build_angular/src/karma/tests/options/styles_spec.ts

@@ -11,7 +11,7 @@ import { BASE_OPTIONS, KARMA_BUILDER_INFO, describeBuilder } from '../setup';
 
 describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
   describe('Option: "styles"', () => {
-    it('includes unnamed styles in compilation', async () => {
+    it(`processes 'styles.css' styles`, async () => {
       await harness.writeFiles({
         'src/styles.css': 'p {display: none}',
         'src/app/app.component.ts': `
@@ -54,5 +54,80 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
       expect(result?.success).toBeTrue();
     });
+
+    it('processes style with bundleName', async () => {
+      await harness.writeFiles({
+        'src/dark-theme.css': '',
+        'src/app/app.module.ts': `
+        import { BrowserModule } from '@angular/platform-browser';
+        import { NgModule } from '@angular/core';
+        import { HttpClientModule } from '@angular/common/http';
+        import { AppComponent } from './app.component';
+        @NgModule({
+          declarations: [
+            AppComponent
+          ],
+          imports: [
+            BrowserModule,
+            HttpClientModule
+          ],
+          providers: [],
+          bootstrap: [AppComponent]
+        })
+        export class AppModule { }
+      `,
+        'src/app/app.component.ts': `
+        import { Component } from '@angular/core';
+        import { HttpClient } from '@angular/common/http';
+        @Component({
+          selector: 'app-root',
+          template: '<p *ngFor="let asset of css">{{ asset.content }}</p>'
+        })
+        export class AppComponent {
+          public assets = [
+            { path: './dark-theme.css', content: '' },
+          ];
+          constructor(private http: HttpClient) {
+            this.assets.forEach(asset => http.get(asset.path, { responseType: 'text' })
+              .subscribe(res => asset.content = res));
+          }
+        }`,
+        'src/app/app.component.spec.ts': `
+        import { TestBed } from '@angular/core/testing';
+        import { HttpClientModule } from '@angular/common/http';
+        import { AppComponent } from './app.component';
+        describe('AppComponent', () => {
+          beforeEach(async () => {
+            await TestBed.configureTestingModule({
+              imports: [
+                HttpClientModule
+              ],
+              declarations: [
+                AppComponent
+              ]
+            }).compileComponents();
+          });
+          it('should create the app', () => {
+            const fixture = TestBed.createComponent(AppComponent);
+            const app = fixture.debugElement.componentInstance;
+            expect(app).toBeTruthy();
+          });
+        });`,
+      });
+
+      harness.useTarget('test', {
+        ...BASE_OPTIONS,
+        styles: [
+          {
+            inject: false,
+            input: 'src/dark-theme.css',
+            bundleName: 'dark-theme',
+          },
+        ],
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+    });
   });
 });

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

@@ -9,6 +9,7 @@
     <title></title>
     <base href="/" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet" href="_karma_webpack_/styles.css" crossorigin="anonymous" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
@@ -34,7 +35,6 @@
     <script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
     <!-- Dynamically replaced with <script> tags -->
     %SCRIPTS%
-    <script src="_karma_webpack_/styles.js" crossorigin="anonymous"></script>
     <script src="_karma_webpack_/scripts.js" crossorigin="anonymous"></script>
     <script src="_karma_webpack_/vendor.js" crossorigin="anonymous"></script>
     <script src="_karma_webpack_/main.js" crossorigin="anonymous"></script>

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

@@ -10,6 +10,7 @@
     <title>Karma DEBUG RUNNER</title>
     <base href="/" />
     <link href="favicon.ico" rel="icon" type="image/x-icon" />
+    <link rel="stylesheet" href="_karma_webpack_/styles.css" crossorigin="anonymous" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta
       name="viewport"
@@ -36,7 +37,6 @@
     <script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
     <!-- Dynamically replaced with <script> tags -->
     %SCRIPTS%
-    <script src="_karma_webpack_/styles.js" crossorigin="anonymous"></script>
     <script src="_karma_webpack_/scripts.js" crossorigin="anonymous"></script>
     <script src="_karma_webpack_/vendor.js" crossorigin="anonymous"></script>
     <script src="_karma_webpack_/main.js" crossorigin="anonymous"></script>

packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma.ts

@@ -301,7 +301,7 @@ function fallbackMiddleware() {
           `/${KARMA_APPLICATION_PATH}/polyfills.js`,
           `/${KARMA_APPLICATION_PATH}/polyfills-es5.js`,
           `/${KARMA_APPLICATION_PATH}/scripts.js`,
-          `/${KARMA_APPLICATION_PATH}/styles.js`,
+          `/${KARMA_APPLICATION_PATH}/styles.css`,
           `/${KARMA_APPLICATION_PATH}/vendor.js`,
         ];
         if (request.url && alwaysServe.includes(request.url)) {