refactor(@angular-devkit/build-angular): remove resourcesOutputPath option from application builder.

This `resourcesOutputPath` option is removed from the application builder. Instead the CSS resources will always be emitted in a directory named `media`. This is preparation to output server and browser bundles in different directories.

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/application/options.ts

@@ -94,13 +94,11 @@ export async function normalizeOptions(
         ? '[name].[hash]'
         : '[name]',
     media:
-      options.outputHashing === OutputHashing.All || options.outputHashing === OutputHashing.Media
+      'media/' +
+      (options.outputHashing === OutputHashing.All || options.outputHashing === OutputHashing.Media
         ? '[name].[hash]'
-        : '[name]',
+        : '[name]'),
   };
-  if (options.resourcesOutputPath) {
-    outputNames.media = path.join(options.resourcesOutputPath, outputNames.media);
-  }
 
   let fileReplacements: Record<string, string> | undefined;
   if (options.fileReplacements) {

packages/angular_devkit/build_angular/src/builders/application/schema.json

@@ -220,10 +220,6 @@
       "type": "string",
       "description": "The full path for the new output directory, relative to the current workspace.\nBy default, writes output to a folder named dist/ in the current project."
     },
-    "resourcesOutputPath": {
-      "type": "string",
-      "description": "The path where style resources will be placed, relative to outputPath."
-    },
     "aot": {
       "type": "boolean",
       "description": "Build using Ahead of Time compilation.",

packages/angular_devkit/build_angular/src/builders/application/tests/options/output-hashing_spec.ts

@@ -34,7 +34,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeTrue();
       expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeTrue();
       expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeTrue();
-      expect(harness.hasFileMatch('dist', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeTrue();
+      expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeTrue();
     });
 
     it(`doesn't hash any filenames when not set`, async () => {
@@ -52,7 +52,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeFalse();
       expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeFalse();
       expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse();
     });
 
     it(`doesn't hash any filenames when set to "none"`, async () => {
@@ -71,7 +71,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeFalse();
       expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeFalse();
       expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse();
     });
 
     it(`hashes CSS resources filenames only when set to "media"`, async () => {
@@ -90,7 +90,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeFalse();
       expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeFalse();
       expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeFalse();
-      expect(harness.hasFileMatch('dist', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeTrue();
+      expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeTrue();
     });
 
     it(`hashes bundles filenames only when set to "bundles"`, async () => {
@@ -109,11 +109,10 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeTrue();
       expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeTrue();
       expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeTrue();
-      expect(harness.hasFileMatch('dist', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse();
+      expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse();
     });
 
-    // TODO: Re-enable once implemented in the esbuild builder
-    xit('does not hash non injected styles', async () => {
+    it('does not hash non injected styles', async () => {
       harness.useTarget('build', {
         ...BASE_OPTIONS,
         outputHashing: OutputHashing.All,
@@ -159,8 +158,8 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       const { result } = await harness.executeOnce();
       expect(result?.success).toBe(true);
 
-      harness.expectFile('dist/test.svg').toExist();
-      harness.expectFile('dist/small-test.svg').toExist();
+      harness.expectFile('dist/media/test.svg').toExist();
+      harness.expectFile('dist/media/small-test.svg').toExist();
     });
   });
 });

packages/angular_devkit/build_angular/src/builders/browser-esbuild/builder-status-warnings.ts

@@ -56,6 +56,7 @@ export function logBuilderStatusWarnings(options: BrowserBuilderOptions, context
     if (
       unsupportedOption === 'namedChunks' ||
       unsupportedOption === 'vendorChunk' ||
+      unsupportedOption === 'resourcesOutputPath' ||
       unsupportedOption === 'deployUrl'
     ) {
       context.logger.warn(

packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/bundle-options.ts

@@ -27,7 +27,7 @@ export interface BundleStylesheetOptions {
   optimization: boolean;
   preserveSymlinks?: boolean;
   sourcemap: boolean | 'external' | 'inline';
-  outputNames?: { bundles?: string; media?: string };
+  outputNames: { bundles: string; media: string };
   includePaths?: string[];
   externalDependencies?: string[];
   target: string[];
@@ -57,8 +57,8 @@ export function createStylesheetBundleOptions(
   return {
     absWorkingDir: options.workspaceRoot,
     bundle: true,
-    entryNames: options.outputNames?.bundles,
-    assetNames: options.outputNames?.media,
+    entryNames: options.outputNames.bundles,
+    assetNames: options.outputNames.media,
     logLevel: 'silent',
     minify: options.optimization,
     metafile: true,