@angular-devkit/build-angular 15.0.0-next.3 → 15.0.0-next.4

package/src/builders/karma/index.js

@@ -32,6 +32,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.execute = void 0;
 const architect_1 = require("@angular-devkit/architect");
+const core_1 = require("@angular-devkit/core");
+const karma_1 = require("karma");
+const module_1 = require("module");
 const path = __importStar(require("path"));
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
@@ -81,9 +84,15 @@ function execute(options, context, transforms = {}) {
     }
     return (0, rxjs_1.from)(initialize(options, context, transforms.webpackConfiguration)).pipe((0, operators_1.switchMap)(async ([karma, webpackConfig]) => {
         var _a, _b, _c, _d, _e;
-        const karmaOptions = {
-            singleRun,
-        };
+        // Determine project name from builder context target
+        const projectName = (_a = context.target) === null || _a === void 0 ? void 0 : _a.project;
+        if (!projectName) {
+            throw new Error(`The 'karma' builder requires a target to be specified.`);
+        }
+        const karmaOptions = options.karmaConfig
+            ? {}
+            : getBuiltInKarmaConfig(context.workspaceRoot, projectName);
+        karmaOptions.singleRun = singleRun;
         // Convert browsers from a string to an array
         if (options.browsers) {
             karmaOptions.browsers = options.browsers.split(',');
@@ -97,10 +106,6 @@ function execute(options, context, transforms = {}) {
                 karmaOptions.reporters = reporters;
             }
         }
-        const projectName = (_a = context.target) === null || _a === void 0 ? void 0 : _a.project;
-        if (!projectName) {
-            throw new Error('The builder requires a target.');
-        }
         if (!options.main) {
             (_b = webpackConfig.entry) !== null && _b !== void 0 ? _b : (webpackConfig.entry = {});
             if (typeof webpackConfig.entry === 'object' && !Array.isArray(webpackConfig.entry)) {
@@ -125,8 +130,8 @@ function execute(options, context, transforms = {}) {
             webpackConfig,
             logger: context.logger,
         };
-        const config = await karma.config.parseConfig(path.resolve(context.workspaceRoot, options.karmaConfig), transforms.karmaOptions ? transforms.karmaOptions(karmaOptions) : karmaOptions, { promiseConfig: true, throwErrors: true });
-        return [karma, config];
+        const parsedKarmaConfig = await karma_1.config.parseConfig(options.karmaConfig && path.resolve(context.workspaceRoot, options.karmaConfig), transforms.karmaOptions ? transforms.karmaOptions(karmaOptions) : karmaOptions, { promiseConfig: true, throwErrors: true });
+        return [karma, parsedKarmaConfig];
     }), (0, operators_1.switchMap)(([karma, karmaConfig]) => new rxjs_1.Observable((subscriber) => {
         var _a, _b, _c;
         var _d, _e;
@@ -149,6 +154,42 @@ function execute(options, context, transforms = {}) {
     })), (0, operators_1.defaultIfEmpty)({ success: false }));
 }
 exports.execute = execute;
+function getBuiltInKarmaConfig(workspaceRoot, projectName) {
+    let coverageFolderName = projectName.charAt(0) === '@' ? projectName.slice(1) : projectName;
+    if (/[A-Z]/.test(coverageFolderName)) {
+        coverageFolderName = core_1.strings.dasherize(coverageFolderName);
+    }
+    const workspaceRootRequire = (0, module_1.createRequire)(workspaceRoot + '/');
+    return {
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
+            'karma-jasmine',
+            'karma-chrome-launcher',
+            'karma-jasmine-html-reporter',
+            'karma-coverage',
+            '@angular-devkit/build-angular/plugins/karma',
+        ].map((p) => workspaceRootRequire(p)),
+        client: {
+            clearContext: false, // leave Jasmine Spec Runner output visible in browser
+        },
+        jasmineHtmlReporter: {
+            suppressAll: true, // removes the duplicated traces
+        },
+        coverageReporter: {
+            dir: path.join(workspaceRoot, 'coverage', coverageFolderName),
+            subdir: '.',
+            reporters: [{ type: 'html' }, { type: 'text-summary' }],
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: karma_1.constants.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        restartOnFileChange: true,
+    };
+}
 exports.default = (0, architect_1.createBuilder)(execute);
 function getBuiltInMainFile() {
     const content = Buffer.from(`

package/src/builders/karma/schema.d.ts

@@ -38,7 +38,7 @@ export interface Schema {
     /**
      * The name of the Karma configuration file.
      */
-    karmaConfig: string;
+    karmaConfig?: string;
     /**
      * The name of the main entry-point file.
      */

package/src/builders/karma/schema.json

@@ -255,7 +255,7 @@
     }
   },
   "additionalProperties": false,
-  "required": ["tsConfig", "karmaConfig"],
+  "required": ["tsConfig"],
   "definitions": {
     "assetPattern": {
       "oneOf": [

package/src/utils/process-bundle.js

@@ -115,7 +115,7 @@ async function inlineLocales(options) {
         ast = (0, core_1.parseSync)(options.code, {
             babelrc: false,
             configFile: false,
-            sourceType: 'script',
+            sourceType: 'unambiguous',
             filename: options.filename,
         });
     }

package/src/utils/service-worker.d.ts

@@ -6,5 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 /// <reference types="node" />
+import type { Config } from '@angular/service-worker/config';
 import { promises as fsPromises } from 'fs';
 export declare function augmentAppWithServiceWorker(appRoot: string, workspaceRoot: string, outputPath: string, baseHref: string, ngswConfigPath?: string, inputputFileSystem?: typeof fsPromises, outputFileSystem?: typeof fsPromises): Promise<void>;
+export declare function augmentAppWithServiceWorkerEsbuild(workspaceRoot: string, configPath: string, outputPath: string, baseHref: string): Promise<void>;
+export declare function augmentAppWithServiceWorkerCore(config: Config, outputPath: string, baseHref: string, inputputFileSystem?: typeof fsPromises, outputFileSystem?: typeof fsPromises): Promise<void>;

package/src/utils/service-worker.js

@@ -30,7 +30,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.augmentAppWithServiceWorker = void 0;
+exports.augmentAppWithServiceWorkerCore = exports.augmentAppWithServiceWorkerEsbuild = exports.augmentAppWithServiceWorker = void 0;
 const crypto = __importStar(require("crypto"));
 const fs_1 = require("fs");
 const path = __importStar(require("path"));
@@ -100,6 +100,33 @@ async function augmentAppWithServiceWorker(appRoot, workspaceRoot, outputPath, b
             throw error;
         }
     }
+    return augmentAppWithServiceWorkerCore(config, outputPath, baseHref, inputputFileSystem, outputFileSystem);
+}
+exports.augmentAppWithServiceWorker = augmentAppWithServiceWorker;
+// This is currently used by the esbuild-based builder
+async function augmentAppWithServiceWorkerEsbuild(workspaceRoot, configPath, outputPath, baseHref) {
+    // Read the configuration file
+    let config;
+    try {
+        const configurationData = await fs_1.promises.readFile(configPath, 'utf-8');
+        config = JSON.parse(configurationData);
+    }
+    catch (error) {
+        (0, error_1.assertIsError)(error);
+        if (error.code === 'ENOENT') {
+            // TODO: Generate an error object that can be consumed by the esbuild-based builder
+            const message = `Service worker configuration file "${path.relative(workspaceRoot, configPath)}" could not be found.`;
+            throw new Error(message);
+        }
+        else {
+            throw error;
+        }
+    }
+    // TODO: Return the output files and any errors/warnings
+    return augmentAppWithServiceWorkerCore(config, outputPath, baseHref);
+}
+exports.augmentAppWithServiceWorkerEsbuild = augmentAppWithServiceWorkerEsbuild;
+async function augmentAppWithServiceWorkerCore(config, outputPath, baseHref, inputputFileSystem = fs_1.promises, outputFileSystem = fs_1.promises) {
     // Load ESM `@angular/service-worker/config` using the TypeScript dynamic import workaround.
     // Once TypeScript provides support for keeping the dynamic import this workaround can be
     // changed to a direct dynamic import.
@@ -135,4 +162,4 @@ async function augmentAppWithServiceWorker(appRoot, workspaceRoot, outputPath, b
         }
     }
 }
-exports.augmentAppWithServiceWorker = augmentAppWithServiceWorker;
+exports.augmentAppWithServiceWorkerCore = augmentAppWithServiceWorkerCore;

package/src/webpack/configs/common.js

@@ -114,7 +114,7 @@ async function getCommonConfig(wco) {
     }
     // process global scripts
     // Add a new asset for each entry.
-    for (const { bundleName, inject, paths } of (0, helpers_1.globalScriptsByBundleName)(root, buildOptions.scripts)) {
+    for (const { bundleName, inject, paths } of (0, helpers_1.globalScriptsByBundleName)(buildOptions.scripts)) {
         // Lazy scripts don't get a hash, otherwise they can't be loaded by name.
         const hash = inject ? hashFormat.script : '';
         extraPlugins.push(new plugins_1.ScriptsWebpackPlugin({
@@ -122,7 +122,7 @@ async function getCommonConfig(wco) {
             sourceMap: scriptsSourceMap,
             scripts: paths,
             filename: `${path.basename(bundleName)}${hash}.js`,
-            basePath: projectRoot,
+            basePath: root,
         }));
     }
     // process asset entries

package/src/webpack/configs/styles.d.ts

@@ -5,12 +5,6 @@
  * 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 { Configuration } from 'webpack';
-import { StyleElement } from '../../builders/browser/schema';
+import type { Configuration } from 'webpack';
 import { WebpackConfigOptions } from '../../utils/build-options';
-export declare function resolveGlobalStyles(styleEntrypoints: StyleElement[], root: string, preserveSymlinks: boolean, skipResolution?: boolean): {
-    entryPoints: Record<string, string[]>;
-    noInjectNames: string[];
-    paths: string[];
-};
 export declare function getStylesConfig(wco: WebpackConfigOptions): Configuration;

package/src/webpack/configs/styles.js

@@ -33,54 +33,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStylesConfig = exports.resolveGlobalStyles = void 0;
+exports.getStylesConfig = void 0;
 const fs = __importStar(require("fs"));
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 const path = __importStar(require("path"));
+const url_1 = require("url");
 const sass_service_1 = require("../../sass/sass-service");
 const sass_service_legacy_1 = require("../../sass/sass-service-legacy");
 const environment_options_1 = require("../../utils/environment-options");
 const plugins_1 = require("../plugins");
 const css_optimizer_plugin_1 = require("../plugins/css-optimizer-plugin");
+const styles_webpack_plugin_1 = require("../plugins/styles-webpack-plugin");
 const helpers_1 = require("../utils/helpers");
-function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks, skipResolution = false) {
-    const entryPoints = {};
-    const noInjectNames = [];
-    const paths = [];
-    if (styleEntrypoints.length === 0) {
-        return { entryPoints, noInjectNames, paths };
-    }
-    for (const style of (0, helpers_1.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];
-        }
-        // 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 };
-}
-exports.resolveGlobalStyles = resolveGlobalStyles;
 // eslint-disable-next-line max-lines-per-function
 function getStylesConfig(wco) {
     var _a, _b, _c;
@@ -93,10 +57,17 @@ function getStylesConfig(wco) {
     // use includePaths from appConfig
     const includePaths = (_c = (_b = (_a = buildOptions.stylePreprocessorOptions) === null || _a === void 0 ? void 0 : _a.includePaths) === null || _b === void 0 ? void 0 : _b.map((p) => path.resolve(root, p))) !== null && _c !== void 0 ? _c : [];
     // 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 plugins_1.RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
+    if (buildOptions.styles.length > 0) {
+        const { entryPoints, noInjectNames } = (0, helpers_1.normalizeGlobalStyles)(buildOptions.styles);
+        extraPlugins.push(new styles_webpack_plugin_1.StylesWebpackPlugin({
+            root,
+            entryPoints,
+            preserveSymlinks: buildOptions.preserveSymlinks,
+        }));
+        if (noInjectNames.length > 0) {
+            // Add plugin to remove hashes from lazy styles.
+            extraPlugins.push(new plugins_1.RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
+        }
     }
     const sassImplementation = environment_options_1.useLegacySass
         ? new sass_service_legacy_1.SassLegacyWorkerImplementation()
@@ -238,7 +209,7 @@ function getStylesConfig(wco) {
                 },
                 {
                     loader: require.resolve('sass-loader'),
-                    options: getSassLoaderOptions(root, projectRoot, sassImplementation, includePaths, false, !buildOptions.verbose),
+                    options: getSassLoaderOptions(root, sassImplementation, includePaths, false, !buildOptions.verbose, !!buildOptions.preserveSymlinks),
                 },
             ],
         },
@@ -253,7 +224,7 @@ function getStylesConfig(wco) {
                 },
                 {
                     loader: require.resolve('sass-loader'),
-                    options: getSassLoaderOptions(root, projectRoot, sassImplementation, includePaths, true, !buildOptions.verbose),
+                    options: getSassLoaderOptions(root, sassImplementation, includePaths, true, !buildOptions.verbose, !!buildOptions.preserveSymlinks),
                 },
             ],
         },
@@ -275,7 +246,6 @@ function getStylesConfig(wco) {
         },
     ];
     return {
-        entry: entryPoints,
         module: {
             rules: styleLanguages.map(({ extensions, use }) => ({
                 test: new RegExp(`\\.(?:${extensions.join('|')})$`, 'i'),
@@ -286,8 +256,7 @@ function getStylesConfig(wco) {
                             // 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
                             {
@@ -330,24 +299,18 @@ function getTailwindConfigPath({ projectRoot, root }) {
     }
     return undefined;
 }
-function getSassLoaderOptions(root, projectRoot, implementation, includePaths, indentedSyntax, verbose) {
+function getSassLoaderOptions(root, implementation, includePaths, indentedSyntax, verbose, preserveSymlinks) {
     return implementation instanceof sass_service_1.SassWorkerImplementation
         ? {
             sourceMap: true,
             api: 'modern',
             implementation,
-            // Webpack importer is only implemented in the legacy API.
+            // Webpack importer is only implemented in the legacy API and we have our own custom Webpack importer.
             // See: https://github.com/webpack-contrib/sass-loader/blob/997f3eb41d86dd00d5fa49c395a1aeb41573108c/src/utils.js#L642-L651
             webpackImporter: false,
-            sassOptions: {
-                loadPaths: [
-                    ...includePaths,
-                    // Needed to resolve node packages and retain the same behaviour of with the legacy API as sass-loader resolves
-                    // scss also from the cwd and project root.
-                    // See: https://github.com/webpack-contrib/sass-loader/blob/997f3eb41d86dd00d5fa49c395a1aeb41573108c/src/utils.js#L307
-                    projectRoot,
-                    path.join(root, 'node_modules'),
-                ],
+            sassOptions: (loaderContext) => ({
+                importers: [getSassResolutionImporter(loaderContext, root, preserveSymlinks)],
+                loadPaths: includePaths,
                 // Use expanded as otherwise sass will remove comments that are needed for autoprefixer
                 // Ex: /* autoprefixer grid: autoplace */
                 // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
@@ -356,7 +319,7 @@ function getSassLoaderOptions(root, projectRoot, implementation, includePaths, i
                 quietDeps: !verbose,
                 verbose,
                 syntax: indentedSyntax ? 'indented' : 'scss',
-            },
+            }),
         }
         : {
             sourceMap: true,
@@ -385,3 +348,33 @@ function getSassLoaderOptions(root, projectRoot, implementation, includePaths, i
             },
         };
 }
+function getSassResolutionImporter(loaderContext, root, preserveSymlinks) {
+    const commonResolverOptions = {
+        conditionNames: ['sass', 'style'],
+        mainFields: ['sass', 'style', 'main', '...'],
+        extensions: ['.scss', '.sass', '.css'],
+        restrictions: [/\.((sa|sc|c)ss)$/i],
+        preferRelative: true,
+        symlinks: !preserveSymlinks,
+    };
+    // Sass also supports import-only files. If you name a file <name>.import.scss, it will only be loaded for imports, not for @uses.
+    // See: https://sass-lang.com/documentation/at-rules/import#import-only-files
+    const resolveImport = loaderContext.getResolve({
+        ...commonResolverOptions,
+        dependencyType: 'sass-import',
+        mainFiles: ['_index.import', '_index', 'index.import', 'index', '...'],
+    });
+    const resolveModule = loaderContext.getResolve({
+        ...commonResolverOptions,
+        dependencyType: 'sass-module',
+        mainFiles: ['_index', 'index', '...'],
+    });
+    return {
+        findFileUrl: (url, { fromImport }) => {
+            const resolve = fromImport ? resolveImport : resolveModule;
+            return resolve(root, url)
+                .then((file) => (0, url_1.pathToFileURL)(file))
+                .catch(() => null);
+        },
+    };
+}

package/src/webpack/plugins/scripts-webpack-plugin.js

@@ -34,6 +34,8 @@ exports.ScriptsWebpackPlugin = void 0;
 const loader_utils_1 = require("loader-utils");
 const path = __importStar(require("path"));
 const webpack_1 = require("webpack");
+const error_1 = require("../../utils/error");
+const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const Entrypoint = require('webpack/lib/Entrypoint');
 /**
  * The name of the plugin provided to Webpack when tapping Webpack compiler hooks.
@@ -81,18 +83,35 @@ class ScriptsWebpackPlugin {
         chunk.addGroup(entrypoint);
         compilation.entrypoints.set(this.options.name, entrypoint);
         compilation.chunks.add(chunk);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         compilation.assets[filename] = source;
         compilation.hooks.chunkAsset.call(chunk, filename);
     }
     apply(compiler) {
-        if (!this.options.scripts || this.options.scripts.length === 0) {
+        if (this.options.scripts.length === 0) {
             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,
+        });
         compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            const scripts = [];
+            for (const script of this.options.scripts) {
+                try {
+                    const resolvedPath = resolver.resolveSync({}, this.options.basePath, script);
+                    if (resolvedPath) {
+                        scripts.push(resolvedPath);
+                    }
+                    else {
+                        (0, webpack_diagnostics_1.addError)(compilation, `Cannot resolve '${script}'.`);
+                    }
+                }
+                catch (error) {
+                    (0, error_1.assertIsError)(error);
+                    (0, webpack_diagnostics_1.addError)(compilation, error.message);
+                }
+            }
             compilation.hooks.additionalAssets.tapPromise(PLUGIN_NAME, async () => {
                 if (await this.shouldSkip(compilation, scripts)) {
                     if (this._cachedOutput) {

package/src/webpack/plugins/styles-webpack-plugin.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @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 declare class StylesWebpackPlugin {
+    private readonly options;
+    private compilation;
+    constructor(options: StylesWebpackPluginOptions);
+    apply(compiler: Compiler): void;
+}

package/src/webpack/plugins/styles-webpack-plugin.js

@@ -0,0 +1,71 @@
+"use strict";
+/**
+ * @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
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StylesWebpackPlugin = void 0;
+const assert_1 = __importDefault(require("assert"));
+const error_1 = require("../../utils/error");
+const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
+/**
+ * The name of the plugin provided to Webpack when tapping Webpack compiler hooks.
+ */
+const PLUGIN_NAME = 'styles-webpack-plugin';
+class StylesWebpackPlugin {
+    constructor(options) {
+        this.options = options;
+    }
+    apply(compiler) {
+        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,
+        });
+        webpackOptions.entry = async () => {
+            var _a, _b;
+            var _c;
+            const entrypoints = await entry;
+            for (const [bundleName, paths] of Object.entries(entryPoints)) {
+                (_a = entrypoints[bundleName]) !== null && _a !== void 0 ? _a : (entrypoints[bundleName] = {});
+                const entryImport = ((_b = (_c = entrypoints[bundleName]).import) !== null && _b !== void 0 ? _b : (_c.import = []));
+                for (const path of paths) {
+                    try {
+                        const resolvedPath = resolver.resolveSync({}, root, path);
+                        if (resolvedPath) {
+                            entryImport.push(`${resolvedPath}?ngGlobalStyle`);
+                        }
+                        else {
+                            (0, assert_1.default)(this.compilation, 'Compilation cannot be undefined.');
+                            (0, webpack_diagnostics_1.addError)(this.compilation, `Cannot resolve '${path}'.`);
+                        }
+                    }
+                    catch (error) {
+                        (0, assert_1.default)(this.compilation, 'Compilation cannot be undefined.');
+                        (0, error_1.assertIsError)(error);
+                        (0, webpack_diagnostics_1.addError)(this.compilation, error.message);
+                    }
+                }
+            }
+            return entrypoints;
+        };
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            this.compilation = compilation;
+        });
+    }
+}
+exports.StylesWebpackPlugin = StylesWebpackPlugin;

package/src/webpack/utils/helpers.d.ts

@@ -21,8 +21,12 @@ export declare type NormalizedEntryPoint = Required<Exclude<ScriptElement | Styl
 export declare function normalizeExtraEntryPoints(extraEntryPoints: (ScriptElement | StyleElement)[], defaultBundleName: string): NormalizedEntryPoint[];
 export declare function assetNameTemplateFactory(hashFormat: HashFormat): (resourcePath: string) => string;
 export declare function getInstrumentationExcludedPaths(root: string, excludedPaths: string[]): Set<string>;
+export declare function normalizeGlobalStyles(styleEntrypoints: StyleElement[]): {
+    entryPoints: Record<string, string[]>;
+    noInjectNames: string[];
+};
 export declare function getCacheSettings(wco: WebpackConfigOptions, angularVersion: string): WebpackOptionsNormalized['cache'];
-export declare function globalScriptsByBundleName(root: string, scripts: ScriptElement[]): {
+export declare function globalScriptsByBundleName(scripts: ScriptElement[]): {
     bundleName: string;
     inject: boolean;
     paths: string[];

package/src/webpack/utils/helpers.js

@@ -33,9 +33,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStatsOptions = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
+exports.getStatsOptions = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.normalizeGlobalStyles = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
 const crypto_1 = require("crypto");
-const fs_1 = require("fs");
 const glob_1 = __importDefault(require("glob"));
 const path = __importStar(require("path"));
 const schema_1 = require("../../builders/browser/schema");
@@ -130,6 +129,26 @@ function getInstrumentationExcludedPaths(root, excludedPaths) {
     return excluded;
 }
 exports.getInstrumentationExcludedPaths = getInstrumentationExcludedPaths;
+function normalizeGlobalStyles(styleEntrypoints) {
+    var _a;
+    var _b;
+    const entryPoints = {};
+    const noInjectNames = [];
+    if (styleEntrypoints.length === 0) {
+        return { entryPoints, noInjectNames };
+    }
+    for (const style of normalizeExtraEntryPoints(styleEntrypoints, 'styles')) {
+        // Add style entry points.
+        (_a = entryPoints[_b = style.bundleName]) !== null && _a !== void 0 ? _a : (entryPoints[_b] = []);
+        entryPoints[style.bundleName].push(style.input);
+        // Add non injected styles to the list.
+        if (!style.inject) {
+            noInjectNames.push(style.bundleName);
+        }
+    }
+    return { entryPoints, noInjectNames };
+}
+exports.normalizeGlobalStyles = normalizeGlobalStyles;
 function getCacheSettings(wco, angularVersion) {
     const { enabled, path: cacheDirectory } = wco.buildOptions.cache;
     if (enabled) {
@@ -164,31 +183,22 @@ function getCacheSettings(wco, angularVersion) {
     return false;
 }
 exports.getCacheSettings = getCacheSettings;
-function globalScriptsByBundleName(root, scripts) {
+function globalScriptsByBundleName(scripts) {
     return normalizeExtraEntryPoints(scripts, 'scripts').reduce((prev, curr) => {
         const { bundleName, inject, input } = curr;
-        let resolvedPath = path.resolve(root, input);
-        if (!(0, fs_1.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) {
             if (existingEntry.inject && !inject) {
                 // All entries have to be lazy for the bundle to be lazy.
                 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],
             });
         }
         return prev;