@angular-devkit/build-angular 14.0.0-next.9 → 14.0.0-rc.2

package/src/builders/browser-esbuild/stylesheets.js

@@ -0,0 +1,119 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bundleStylesheetText = exports.bundleStylesheetFile = void 0;
+const path = __importStar(require("path"));
+const esbuild_1 = require("./esbuild");
+async function bundleStylesheet(entry, options) {
+    var _a, _b;
+    // Execute esbuild
+    const result = await (0, esbuild_1.bundle)({
+        ...entry,
+        absWorkingDir: options.workspaceRoot,
+        bundle: true,
+        entryNames: (_a = options.outputNames) === null || _a === void 0 ? void 0 : _a.bundles,
+        assetNames: (_b = options.outputNames) === null || _b === void 0 ? void 0 : _b.media,
+        logLevel: 'silent',
+        minify: options.optimization,
+        sourcemap: options.sourcemap,
+        outdir: esbuild_1.DEFAULT_OUTDIR,
+        write: false,
+        platform: 'browser',
+        preserveSymlinks: options.preserveSymlinks,
+        conditions: ['style'],
+        mainFields: ['style'],
+        plugins: [
+        // TODO: preprocessor plugins
+        ],
+    });
+    // Extract the result of the bundling from the output files
+    let contents = '';
+    let map;
+    let outputPath;
+    const resourceFiles = [];
+    if (result.outputFiles) {
+        for (const outputFile of result.outputFiles) {
+            outputFile.path = path.relative(esbuild_1.DEFAULT_OUTDIR, outputFile.path);
+            const filename = path.basename(outputFile.path);
+            if (filename.endsWith('.css')) {
+                outputPath = outputFile.path;
+                contents = outputFile.text;
+            }
+            else if (filename.endsWith('.css.map')) {
+                map = outputFile.text;
+            }
+            else {
+                // The output files could also contain resources (images/fonts/etc.) that were referenced
+                resourceFiles.push(outputFile);
+            }
+        }
+    }
+    return {
+        errors: result.errors,
+        warnings: result.warnings,
+        contents,
+        map,
+        path: outputPath,
+        resourceFiles,
+    };
+}
+/**
+ * Bundle a stylesheet that exists as a file on the filesystem.
+ *
+ * @param filename The path to the file to bundle.
+ * @param options The stylesheet bundling options to use.
+ * @returns The bundle result object.
+ */
+async function bundleStylesheetFile(filename, options) {
+    return bundleStylesheet({ entryPoints: [filename] }, options);
+}
+exports.bundleStylesheetFile = bundleStylesheetFile;
+/**
+ * Bundle stylesheet text data from a string.
+ *
+ * @param data The string content of a stylesheet to bundle.
+ * @param dataOptions The options to use to resolve references and name output of the stylesheet data.
+ * @param bundleOptions  The stylesheet bundling options to use.
+ * @returns The bundle result object.
+ */
+async function bundleStylesheetText(data, dataOptions, bundleOptions) {
+    const result = bundleStylesheet({
+        stdin: {
+            contents: data,
+            sourcefile: dataOptions.virtualName,
+            resolveDir: dataOptions.resolvePath,
+            loader: 'css',
+        },
+    }, bundleOptions);
+    return result;
+}
+exports.bundleStylesheetText = bundleStylesheetText;

package/src/builders/protractor/index.js

@@ -100,67 +100,65 @@ async function execute(options, context) {
     }
     let baseUrl = options.baseUrl;
     let server;
-    if (options.devServerTarget) {
-        const target = (0, architect_1.targetFromTargetString)(options.devServerTarget);
-        const serverOptions = await context.getTargetOptions(target);
-        const overrides = {
-            watch: false,
-            liveReload: false,
-        };
-        if (options.host !== undefined) {
-            overrides.host = options.host;
-        }
-        else if (typeof serverOptions.host === 'string') {
-            options.host = serverOptions.host;
-        }
-        else {
-            options.host = overrides.host = 'localhost';
-        }
-        if (options.port !== undefined) {
-            overrides.port = options.port;
-        }
-        else if (typeof serverOptions.port === 'number') {
-            options.port = serverOptions.port;
-        }
-        server = await context.scheduleTarget(target, overrides);
-        const result = await server.result;
-        if (!result.success) {
-            return { success: false };
-        }
-        if (typeof serverOptions.publicHost === 'string') {
-            let publicHost = serverOptions.publicHost;
-            if (!/^\w+:\/\//.test(publicHost)) {
-                publicHost = `${serverOptions.ssl ? 'https' : 'http'}://${publicHost}`;
+    try {
+        if (options.devServerTarget) {
+            const target = (0, architect_1.targetFromTargetString)(options.devServerTarget);
+            const serverOptions = await context.getTargetOptions(target);
+            const overrides = {
+                watch: false,
+                liveReload: false,
+            };
+            if (options.host !== undefined) {
+                overrides.host = options.host;
+            }
+            else if (typeof serverOptions.host === 'string') {
+                options.host = serverOptions.host;
+            }
+            else {
+                options.host = overrides.host = 'localhost';
+            }
+            if (options.port !== undefined) {
+                overrides.port = options.port;
+            }
+            else if (typeof serverOptions.port === 'number') {
+                options.port = serverOptions.port;
+            }
+            server = await context.scheduleTarget(target, overrides);
+            const result = await server.result;
+            if (!result.success) {
+                return { success: false };
+            }
+            if (typeof serverOptions.publicHost === 'string') {
+                let publicHost = serverOptions.publicHost;
+                if (!/^\w+:\/\//.test(publicHost)) {
+                    publicHost = `${serverOptions.ssl ? 'https' : 'http'}://${publicHost}`;
+                }
+                const clientUrl = url.parse(publicHost);
+                baseUrl = url.format(clientUrl);
+            }
+            else if (typeof result.baseUrl === 'string') {
+                baseUrl = result.baseUrl;
+            }
+            else if (typeof result.port === 'number') {
+                baseUrl = url.format({
+                    protocol: serverOptions.ssl ? 'https' : 'http',
+                    hostname: options.host,
+                    port: result.port.toString(),
+                });
             }
-            const clientUrl = url.parse(publicHost);
-            baseUrl = url.format(clientUrl);
-        }
-        else if (typeof result.baseUrl === 'string') {
-            baseUrl = result.baseUrl;
         }
-        else if (typeof result.port === 'number') {
-            baseUrl = url.format({
-                protocol: serverOptions.ssl ? 'https' : 'http',
-                hostname: options.host,
-                port: result.port.toString(),
-            });
+        // Like the baseUrl in protractor config file when using the API we need to add
+        // a trailing slash when provide to the baseUrl.
+        if (baseUrl && !baseUrl.endsWith('/')) {
+            baseUrl += '/';
         }
-    }
-    // Like the baseUrl in protractor config file when using the API we need to add
-    // a trailing slash when provide to the baseUrl.
-    if (baseUrl && !baseUrl.endsWith('/')) {
-        baseUrl += '/';
-    }
-    try {
         return await runProtractor(context.workspaceRoot, { ...options, baseUrl });
     }
     catch {
         return { success: false };
     }
     finally {
-        if (server) {
-            await server.stop();
-        }
+        await (server === null || server === void 0 ? void 0 : server.stop());
     }
 }
 exports.execute = execute;

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

@@ -5,4 +5,4 @@
  * 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
  */
-export declare function augmentAppWithServiceWorker(appRoot: string, outputPath: string, baseHref: string, ngswConfigPath?: string): Promise<void>;
+export declare function augmentAppWithServiceWorker(appRoot: string, workspaceRoot: string, outputPath: string, baseHref: string, ngswConfigPath?: string): Promise<void>;

package/src/utils/service-worker.js

@@ -75,10 +75,10 @@ class CliFilesystem {
         return items;
     }
 }
-async function augmentAppWithServiceWorker(appRoot, outputPath, baseHref, ngswConfigPath) {
+async function augmentAppWithServiceWorker(appRoot, workspaceRoot, outputPath, baseHref, ngswConfigPath) {
     // Determine the configuration file path
     const configPath = ngswConfigPath
-        ? path.normalize(ngswConfigPath)
+        ? path.join(workspaceRoot, ngswConfigPath)
         : path.join(appRoot, 'ngsw-config.json');
     // Read the configuration file
     let config;

package/src/webpack/configs/common.js

@@ -300,6 +300,7 @@ async function getCommonConfig(wco) {
                                 scriptTarget,
                                 aot: buildOptions.aot,
                                 optimize: buildOptions.buildOptimizer,
+                                supportedBrowsers: buildOptions.supportedBrowsers,
                                 instrumentCode: codeCoverage
                                     ? {
                                         includedBasePath: sourceRoot,

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

@@ -6,5 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { Configuration } from 'webpack';
+import { StyleElement } from '../../builders/browser/schema';
 import { WebpackConfigOptions } from '../../utils/build-options';
+export declare function resolveGlobalStyles(styleEntrypoints: StyleElement[], root: string, preserveSymlinks: boolean): {
+    entryPoints: Record<string, string[]>;
+    noInjectNames: string[];
+    paths: string[];
+};
 export declare function getStylesConfig(wco: WebpackConfigOptions): Configuration;

package/src/webpack/configs/styles.js

@@ -33,7 +33,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStylesConfig = void 0;
+exports.getStylesConfig = exports.resolveGlobalStyles = void 0;
 const fs = __importStar(require("fs"));
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 const path = __importStar(require("path"));
@@ -75,6 +75,7 @@ function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks) {
     }
     return { entryPoints, noInjectNames, paths };
 }
+exports.resolveGlobalStyles = resolveGlobalStyles;
 // eslint-disable-next-line max-lines-per-function
 function getStylesConfig(wco) {
     var _a, _b, _c;

package/src/webpack/plugins/css-optimizer-plugin.js

@@ -30,11 +30,13 @@ class CssOptimizerPlugin {
     apply(compiler) {
         const { OriginalSource, SourceMapSource } = compiler.webpack.sources;
         compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+            const logger = compilation.getLogger('build-angular.CssOptimizerPlugin');
             compilation.hooks.processAssets.tapPromise({
                 name: PLUGIN_NAME,
                 stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
             }, async (compilationAssets) => {
                 const cache = compilation.options.cache && compilation.getCache(PLUGIN_NAME);
+                logger.time('optimize css assets');
                 for (const assetName of Object.keys(compilationAssets)) {
                     if (!/\.(?:css|scss|sass|less|styl)$/.test(assetName)) {
                         continue;
@@ -51,6 +53,7 @@ class CssOptimizerPlugin {
                         cacheItem = cache.getItemCache(name, eTag);
                         const cachedOutput = await cacheItem.getPromise();
                         if (cachedOutput) {
+                            logger.debug(`${name} restored from cache`);
                             await this.addWarnings(compilation, cachedOutput.warnings);
                             compilation.updateAsset(name, cachedOutput.source, (assetInfo) => ({
                                 ...assetInfo,
@@ -61,7 +64,10 @@ class CssOptimizerPlugin {
                     }
                     const { source, map: inputMap } = styleAssetSource.sourceAndMap();
                     const input = typeof source === 'string' ? source : source.toString();
+                    const optimizeAssetLabel = `optimize asset: ${asset.name}`;
+                    logger.time(optimizeAssetLabel);
                     const { code, warnings, map } = await this.optimize(input, asset.name, inputMap, this.targets);
+                    logger.timeEnd(optimizeAssetLabel);
                     await this.addWarnings(compilation, warnings);
                     const optimizedAsset = map
                         ? new SourceMapSource(code, name, map)
@@ -75,6 +81,7 @@ class CssOptimizerPlugin {
                         warnings,
                     }));
                 }
+                logger.timeEnd('optimize css assets');
             });
         });
     }

package/src/webpack/plugins/javascript-optimizer-plugin.js

@@ -38,10 +38,12 @@ class JavaScriptOptimizerPlugin {
     apply(compiler) {
         const { OriginalSource, SourceMapSource } = compiler.webpack.sources;
         compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+            const logger = compilation.getLogger('build-angular.JavaScriptOptimizerPlugin');
             compilation.hooks.processAssets.tapPromise({
                 name: PLUGIN_NAME,
                 stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
             }, async (compilationAssets) => {
+                logger.time('optimize js assets');
                 const scriptsToOptimize = [];
                 const cache = compilation.options.cache && compilation.getCache('JavaScriptOptimizerPlugin');
                 // Analyze the compilation assets for scripts that require optimization
@@ -61,6 +63,7 @@ class JavaScriptOptimizerPlugin {
                         cacheItem = cache.getItemCache(name, eTag);
                         const cachedOutput = await cacheItem.getPromise();
                         if (cachedOutput) {
+                            logger.debug(`${name} restored from cache`);
                             compilation.updateAsset(name, cachedOutput.source, (assetInfo) => ({
                                 ...assetInfo,
                                 minimized: true,
@@ -125,6 +128,7 @@ class JavaScriptOptimizerPlugin {
                 try {
                     const tasks = [];
                     for (const { name, code, map, cacheItem } of scriptsToOptimize) {
+                        logger.time(`optimize asset: ${name}`);
                         tasks.push(workerPool
                             .run({
                             asset: {
@@ -142,6 +146,7 @@ class JavaScriptOptimizerPlugin {
                                 ...assetInfo,
                                 minimized: true,
                             }));
+                            logger.timeEnd(`optimize asset: ${name}`);
                             return cacheItem === null || cacheItem === void 0 ? void 0 : cacheItem.storePromise({
                                 source: optimizedAsset,
                             });
@@ -155,6 +160,7 @@ class JavaScriptOptimizerPlugin {
                 finally {
                     void workerPool.destroy();
                 }
+                logger.timeEnd('optimize js assets');
             });
         });
     }

package/src/webpack/plugins/karma/karma.js

@@ -34,7 +34,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const path = __importStar(require("path"));
-const glob = __importStar(require("glob"));
 const webpack_1 = __importDefault(require("webpack"));
 const webpack_dev_middleware_1 = __importDefault(require("webpack-dev-middleware"));
 const stats_1 = require("../../utils/stats");
@@ -46,27 +45,6 @@ let isBlocked = false;
 let webpackMiddleware;
 let successCb;
 let failureCb;
-// Add files to the Karma files array.
-function addKarmaFiles(files, newFiles, prepend = false) {
-    const defaults = {
-        included: true,
-        served: true,
-        watched: true,
-    };
-    const processedFiles = newFiles
-        // Remove globs that do not match any files, otherwise Karma will show a warning for these.
-        .filter((file) => glob.sync(file.pattern, { nodir: true }).length != 0)
-        // Fill in pattern properties with defaults.
-        .map((file) => ({ ...defaults, ...file }));
-    // It's important to not replace the array, because
-    // karma already has a reference to the existing array.
-    if (prepend) {
-        files.unshift(...processedFiles);
-    }
-    else {
-        files.push(...processedFiles);
-    }
-}
 const init = (config, emitter) => {
     if (!config.buildWebpack) {
         throw new Error(`The '@angular-devkit/build-angular/plugins/karma' karma plugin is meant to` +
@@ -84,10 +62,12 @@ const init = (config, emitter) => {
         // frameworks cannot be added dynamically.
         const smsPath = path.dirname(require.resolve('source-map-support'));
         const ksmsPath = path.dirname(require.resolve('karma-source-map-support'));
-        addKarmaFiles(config.files, [
-            { pattern: path.join(smsPath, 'browser-source-map-support.js'), watched: false },
-            { pattern: path.join(ksmsPath, 'client.js'), watched: false },
-        ], true);
+        config.files.unshift({
+            pattern: path.join(smsPath, 'browser-source-map-support.js'),
+            included: true,
+            served: true,
+            watched: false,
+        }, { pattern: path.join(ksmsPath, 'client.js'), included: true, served: true, watched: false });
     }
     config.reporters.unshift('@angular-devkit/build-angular--event-reporter');
     // When using code-coverage, auto-add karma-coverage.
@@ -162,7 +142,7 @@ const init = (config, emitter) => {
     webpackMiddleware = (0, webpack_dev_middleware_1.default)(compiler, webpackMiddlewareConfig);
     emitter.on('exit', (done) => {
         webpackMiddleware.close();
-        done();
+        compiler.close(() => done());
     });
     function unblock() {
         isBlocked = false;

package/src/webpack/plugins/typescript.js

@@ -20,6 +20,7 @@ function ensureIvy(wco) {
         '\nFor additional information or if the build fails, please see https://angular.io/guide/ivy');
     wco.tsConfig.options.enableIvy = true;
 }
+let es5TargetWarningsShown = false;
 function createIvyPlugin(wco, aot, tsconfig) {
     if (aot) {
         ensureIvy(wco);
@@ -39,6 +40,10 @@ function createIvyPlugin(wco, aot, tsconfig) {
     // as for third-party libraries. This greatly reduces the complexity of static analysis.
     if (wco.scriptTarget < typescript_1.ScriptTarget.ES2015) {
         compilerOptions.target = typescript_1.ScriptTarget.ES2015;
+        if (!es5TargetWarningsShown) {
+            wco.logger.warn('DEPRECATED: ES5 output is deprecated. Please update TypeScript `target` compiler option to ES2015 or later.');
+            es5TargetWarningsShown = true;
+        }
     }
     const fileReplacements = {};
     if (buildOptions.fileReplacements) {