fix(@angular-devkit/build-angular): handle conditional exports in scripts and styles option

With this change scripts and styles options better support Yarn PNP resolution.

Closes #23568

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts

@@ -21,7 +21,7 @@ import { generateEntryPoints } from '../../utils/package-chunk-sort';
 import { augmentAppWithServiceWorker } from '../../utils/service-worker';
 import { getSupportedBrowsers } from '../../utils/supported-browsers';
 import { getIndexInputFile, getIndexOutputFile } from '../../utils/webpack-browser-config';
-import { resolveGlobalStyles } from '../../webpack/configs';
+import { normalizeGlobalStyles } from '../../webpack/utils/helpers';
 import { createCompilerPlugin } from './compiler-plugin';
 import { bundle, logMessages } from './esbuild';
 import { logExperimentalWarnings } from './experimental-warnings';
@@ -347,13 +347,8 @@ async function bundleGlobalStylesheets(
   const warnings: Message[] = [];
 
   // resolveGlobalStyles is temporarily reused from the Webpack builder code
-  const { entryPoints: stylesheetEntrypoints, noInjectNames } = resolveGlobalStyles(
+  const { entryPoints: stylesheetEntrypoints, noInjectNames } = normalizeGlobalStyles(
     options.styles || [],
-    workspaceRoot,
-    // preserveSymlinks is always true here to allow the bundler to handle the option
-    true,
-    // skipResolution to leverage the bundler's more comprehensive resolution
-    true,
   );
 
   for (const [name, files] of Object.entries(stylesheetEntrypoints)) {

packages/angular_devkit/build_angular/src/builders/browser/specs/scripts-array_spec.ts

@@ -151,6 +151,6 @@ describe('Browser Builder scripts array', () => {
       browserBuild(architect, host, target, {
         scripts: ['./invalid.js'],
       }),
-    ).toBeRejectedWithError(`Script file ./invalid.js does not exist.`);
+    ).toBeRejectedWithError(/Can't resolve '\.\/invalid\.js'/);
   });
 });

packages/angular_devkit/build_angular/src/builders/browser/tests/options/scripts_spec.ts

@@ -104,7 +104,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
         expect(result).toBeUndefined();
         expect(error).toEqual(
           jasmine.objectContaining({
-            message: jasmine.stringMatching(`Script file src/test-script-a.js does not exist.`),
+            message: jasmine.stringMatching(`Can't resolve 'src/test-script-a.js'`),
           }),
         );
 

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

@@ -147,10 +147,7 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
 
   // process global scripts
   // Add a new asset for each entry.
-  for (const { bundleName, inject, paths } of globalScriptsByBundleName(
-    root,
-    buildOptions.scripts,
-  )) {
+  for (const { bundleName, inject, paths } of globalScriptsByBundleName(buildOptions.scripts)) {
     // Lazy scripts don't get a hash, otherwise they can't be loaded by name.
     const hash = inject ? hashFormat.script : '';
 
@@ -160,7 +157,7 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
         sourceMap: scriptsSourceMap,
         scripts: paths,
         filename: `${path.basename(bundleName)}${hash}.js`,
-        basePath: projectRoot,
+        basePath: root,
       }),
     );
   }

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

@@ -22,58 +22,36 @@ import {
   SuppressExtractedTextChunksWebpackPlugin,
 } from '../plugins';
 import { CssOptimizerPlugin } from '../plugins/css-optimizer-plugin';
+import { StylesWebpackPlugin } from '../plugins/styles-webpack-plugin';
 import {
   assetNameTemplateFactory,
   getOutputHashFormat,
   normalizeExtraEntryPoints,
 } from '../utils/helpers';
 
-export function resolveGlobalStyles(
-  styleEntrypoints: StyleElement[],
-  root: string,
-  preserveSymlinks: boolean,
-  skipResolution = false,
-): { entryPoints: Record<string, string[]>; noInjectNames: string[]; paths: string[] } {
+export function normalizeGlobalStyles(styleEntrypoints: StyleElement[]): {
+  entryPoints: Record<string, string[]>;
+  noInjectNames: string[];
+} {
   const entryPoints: Record<string, string[]> = {};
   const noInjectNames: string[] = [];
-  const paths: string[] = [];
 
   if (styleEntrypoints.length === 0) {
-    return { entryPoints, noInjectNames, paths };
+    return { entryPoints, noInjectNames };
   }
 
   for (const style of normalizeExtraEntryPoints(styleEntrypoints, 'styles')) {
-    let stylesheetPath = style.input;
-    if (!skipResolution) {
-      stylesheetPath = path.resolve(root, stylesheetPath);
-      if (!fs.existsSync(stylesheetPath)) {
-        try {
-          stylesheetPath = require.resolve(style.input, { paths: [root] });
-        } catch {}
-      }
-    }
-
-    if (!preserveSymlinks) {
-      stylesheetPath = fs.realpathSync(stylesheetPath);
-    }
-
     // Add style entry points.
-    if (entryPoints[style.bundleName]) {
-      entryPoints[style.bundleName].push(stylesheetPath);
-    } else {
-      entryPoints[style.bundleName] = [stylesheetPath];
-    }
+    entryPoints[style.bundleName] ??= [];
+    entryPoints[style.bundleName].push(style.input);
 
     // Add non injected styles to the list.
     if (!style.inject) {
       noInjectNames.push(style.bundleName);
     }
-
-    // Add global css paths.
-    paths.push(stylesheetPath);
   }
 
-  return { entryPoints, noInjectNames, paths };
+  return { entryPoints, noInjectNames };
 }
 
 // eslint-disable-next-line max-lines-per-function
@@ -93,14 +71,20 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
     buildOptions.stylePreprocessorOptions?.includePaths?.map((p) => path.resolve(root, p)) ?? [];
 
   // Process global styles.
-  const {
-    entryPoints,
-    noInjectNames,
-    paths: globalStylePaths,
-  } = resolveGlobalStyles(buildOptions.styles, root, !!buildOptions.preserveSymlinks);
-  if (noInjectNames.length > 0) {
-    // Add plugin to remove hashes from lazy styles.
-    extraPlugins.push(new RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
+  if (buildOptions.styles.length > 0) {
+    const { entryPoints, noInjectNames } = normalizeGlobalStyles(buildOptions.styles);
+    extraPlugins.push(
+      new StylesWebpackPlugin({
+        root,
+        entryPoints,
+        preserveSymlinks: buildOptions.preserveSymlinks,
+      }),
+    );
+
+    if (noInjectNames.length > 0) {
+      // Add plugin to remove hashes from lazy styles.
+      extraPlugins.push(new RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
+    }
   }
 
   const sassImplementation = useLegacySass
@@ -317,7 +301,6 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
   ];
 
   return {
-    entry: entryPoints,
     module: {
       rules: styleLanguages.map(({ extensions, use }) => ({
         test: new RegExp(`\\.(?:${extensions.join('|')})$`, 'i'),
@@ -328,8 +311,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
               // Global styles are only defined global styles
               {
                 use: globalStyleLoaders,
-                include: globalStylePaths,
-                resourceQuery: { not: [/\?ngResource/] },
+                resourceQuery: /\?ngGlobalStyle/,
               },
               // Component styles are all styles except defined global styles
               {

packages/angular_devkit/build_angular/src/webpack/plugins/scripts-webpack-plugin.ts

@@ -35,6 +35,7 @@ function addDependencies(compilation: Compilation, scripts: string[]): void {
     compilation.fileDependencies.add(script);
   }
 }
+
 export class ScriptsWebpackPlugin {
   private _lastBuildTime?: number;
   private _cachedOutput?: ScriptOutput;
@@ -94,13 +95,19 @@ export class ScriptsWebpackPlugin {
   }
 
   apply(compiler: Compiler): void {
-    if (!this.options.scripts || this.options.scripts.length === 0) {
+    if (!this.options.scripts.length) {
       return;
     }
 
-    const scripts = this.options.scripts
-      .filter((script) => !!script)
-      .map((script) => path.resolve(this.options.basePath || '', script));
+    const resolver = compiler.resolverFactory.get('normal', {
+      preferRelative: true,
+      useSyncFileSystemCalls: true,
+      fileSystem: compiler.inputFileSystem,
+    });
+
+    const scripts = this.options.scripts.map(
+      (script) => resolver.resolveSync({}, this.options.basePath, script) || script,
+    );
 
     compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
       compilation.hooks.additionalAssets.tapPromise(PLUGIN_NAME, async () => {

packages/angular_devkit/build_angular/src/webpack/plugins/styles-webpack-plugin.ts

@@ -0,0 +1,51 @@
+/**
+ * @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 type { Compiler } from 'webpack';
+
+export interface StylesWebpackPluginOptions {
+  preserveSymlinks?: boolean;
+  root: string;
+  entryPoints: Record<string, string[]>;
+}
+
+export class StylesWebpackPlugin {
+  constructor(private readonly options: StylesWebpackPluginOptions) {}
+
+  apply(compiler: Compiler): void {
+    const { entryPoints, preserveSymlinks, root } = this.options;
+    const webpackOptions = compiler.options;
+    const entry =
+      typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
+
+    const resolver = compiler.resolverFactory.get('global-styles', {
+      conditionNames: ['sass', 'less', 'style'],
+      mainFields: ['sass', 'less', 'style', 'main', '...'],
+      extensions: ['.scss', '.sass', '.less', '.css'],
+      restrictions: [/\.((le|sa|sc|c)ss)$/i],
+      preferRelative: true,
+      useSyncFileSystemCalls: true,
+      symlinks: !preserveSymlinks,
+      fileSystem: compiler.inputFileSystem,
+    });
+
+    const normalizedEntryPoint: typeof entry = {};
+    for (const [bundleName, paths] of Object.entries(entryPoints)) {
+      normalizedEntryPoint[bundleName] = {
+        import: paths.map((p) => `${resolver.resolveSync({}, root, p) || p}?ngGlobalStyle`),
+      };
+    }
+
+    webpackOptions.entry = async () => {
+      return {
+        ...(await entry),
+        ...normalizedEntryPoint,
+      };
+    };
+  }
+}

packages/angular_devkit/build_angular/src/webpack/utils/helpers.ts

@@ -176,21 +176,11 @@ export function getCacheSettings(
 }
 
 export function globalScriptsByBundleName(
-  root: string,
   scripts: ScriptElement[],
 ): { bundleName: string; inject: boolean; paths: string[] }[] {
   return normalizeExtraEntryPoints(scripts, 'scripts').reduce(
     (prev: { bundleName: string; paths: string[]; inject: boolean }[], curr) => {
       const { bundleName, inject, input } = curr;
-      let resolvedPath = path.resolve(root, input);
-
-      if (!existsSync(resolvedPath)) {
-        try {
-          resolvedPath = require.resolve(input, { paths: [root] });
-        } catch {
-          throw new Error(`Script file ${input} does not exist.`);
-        }
-      }
 
       const existingEntry = prev.find((el) => el.bundleName === bundleName);
       if (existingEntry) {
@@ -199,12 +189,12 @@ export function globalScriptsByBundleName(
           throw new Error(`The ${bundleName} bundle is mixing injected and non-injected scripts.`);
         }
 
-        existingEntry.paths.push(resolvedPath);
+        existingEntry.paths.push(input);
       } else {
         prev.push({
           bundleName,
           inject,
-          paths: [resolvedPath],
+          paths: [input],
         });
       }
 
@@ -214,6 +204,31 @@ export function globalScriptsByBundleName(
   );
 }
 
+export function normalizeGlobalStyles(styleEntrypoints: StyleElement[]): {
+  entryPoints: Record<string, string[]>;
+  noInjectNames: string[];
+} {
+  const entryPoints: Record<string, string[]> = {};
+  const noInjectNames: string[] = [];
+
+  if (styleEntrypoints.length === 0) {
+    return { entryPoints, noInjectNames };
+  }
+
+  for (const style of normalizeExtraEntryPoints(styleEntrypoints, 'styles')) {
+    // Add style entry points.
+    entryPoints[style.bundleName] ??= [];
+    entryPoints[style.bundleName].push(style.input);
+
+    // Add non injected styles to the list.
+    if (!style.inject) {
+      noInjectNames.push(style.bundleName);
+    }
+  }
+
+  return { entryPoints, noInjectNames };
+}
+
 export function assetPatterns(root: string, assets: AssetPatternClass[]) {
   return assets.map((asset: AssetPatternClass, index: number): ObjectPattern => {
     // Resolve input paths relative to workspace root and add slash at the end.