@angular-devkit/build-angular 14.1.3 → 14.2.0-next.2

package/package.json

@@ -1,35 +1,35 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "14.1.3",
+  "version": "14.2.0-next.2",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.0",
-    "@angular-devkit/architect": "0.1401.3",
-    "@angular-devkit/build-webpack": "0.1401.3",
-    "@angular-devkit/core": "14.1.3",
-    "@babel/core": "7.18.6",
-    "@babel/generator": "7.18.7",
+    "@angular-devkit/architect": "0.1402.0-next.2",
+    "@angular-devkit/build-webpack": "0.1402.0-next.2",
+    "@angular-devkit/core": "14.2.0-next.2",
+    "@babel/core": "7.18.10",
+    "@babel/generator": "7.18.12",
     "@babel/helper-annotate-as-pure": "7.18.6",
-    "@babel/plugin-proposal-async-generator-functions": "7.18.6",
+    "@babel/plugin-proposal-async-generator-functions": "7.18.10",
     "@babel/plugin-transform-async-to-generator": "7.18.6",
-    "@babel/plugin-transform-runtime": "7.18.6",
-    "@babel/preset-env": "7.18.6",
-    "@babel/runtime": "7.18.6",
-    "@babel/template": "7.18.6",
+    "@babel/plugin-transform-runtime": "7.18.10",
+    "@babel/preset-env": "7.18.10",
+    "@babel/runtime": "7.18.9",
+    "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "14.1.3",
+    "@ngtools/webpack": "14.2.0-next.2",
     "ansi-colors": "4.1.3",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.9.1",
-    "cacache": "16.1.1",
+    "cacache": "16.1.2",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
     "css-loader": "6.7.1",
-    "esbuild-wasm": "0.14.49",
+    "esbuild-wasm": "0.15.5",
     "glob": "8.0.3",
     "https-proxy-agent": "5.0.1",
     "inquirer": "8.2.4",
@@ -45,39 +45,39 @@
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.2.0",
-    "postcss": "8.4.14",
+    "postcss": "8.4.16",
     "postcss-import": "14.1.0",
     "postcss-loader": "7.0.1",
-    "postcss-preset-env": "7.7.2",
+    "postcss-preset-env": "7.8.0",
     "regenerator-runtime": "0.13.9",
     "resolve-url-loader": "5.0.0",
     "rxjs": "6.6.7",
-    "sass": "1.53.0",
+    "sass": "1.54.4",
     "sass-loader": "13.0.2",
     "semver": "7.3.7",
     "source-map-loader": "4.0.0",
     "source-map-support": "0.5.21",
-    "stylus": "0.58.1",
+    "stylus": "0.59.0",
     "stylus-loader": "7.0.0",
     "terser": "5.14.2",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.4.0",
-    "webpack": "5.73.0",
+    "webpack": "5.74.0",
     "webpack-dev-middleware": "5.3.3",
-    "webpack-dev-server": "4.9.3",
+    "webpack-dev-server": "4.10.0",
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.14.49"
+    "esbuild": "0.15.5"
   },
   "peerDependencies": {
-    "@angular/compiler-cli": "^14.0.0",
-    "@angular/localize": "^14.0.0",
-    "@angular/service-worker": "^14.0.0",
+    "@angular/compiler-cli": "^14.0.0 || ^14.0.0-next || ^14.1.0-next",
+    "@angular/localize": "^14.0.0 || ^14.0.0-next || ^14.1.0-next",
+    "@angular/service-worker": "^14.0.0 || ^14.0.0-next || ^14.1.0-next",
     "karma": "^6.3.0",
-    "ng-packagr": "^14.0.0",
+    "ng-packagr": "^14.0.0 || ^14.0.0-next || ^14.1.0-next",
     "protractor": "^7.0.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",
     "typescript": ">=4.6.2 <4.8"

package/src/builders/browser-esbuild/compiler-plugin.js

@@ -208,7 +208,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // Create the Angular specific program that contains the Angular compiler
                 const angularProgram = new compilerCli.NgtscProgram(rootNames, compilerOptions, host);
                 const angularCompiler = angularProgram.compiler;
-                const { ignoreForDiagnostics, ignoreForEmit } = angularCompiler;
+                const { ignoreForDiagnostics } = angularCompiler;
                 const typeScriptProgram = angularProgram.getTsProgram();
                 const builder = typescript_1.default.createAbstractBuilder(typeScriptProgram, host);
                 await angularCompiler.analyzeAsync();

package/src/builders/browser-esbuild/sass-plugin.d.ts

@@ -8,5 +8,5 @@
 import type { Plugin } from 'esbuild';
 export declare function createSassPlugin(options: {
     sourcemap: boolean;
-    includePaths?: string[];
+    loadPaths?: string[];
 }): Plugin;

package/src/builders/browser-esbuild/sass-plugin.js

@@ -6,47 +6,90 @@
  * 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.createSassPlugin = void 0;
-const sass_service_1 = require("../../sass/sass-service");
+const url_1 = require("url");
 function createSassPlugin(options) {
     return {
         name: 'angular-sass',
         setup(build) {
             let sass;
-            build.onStart(() => {
-                sass = new sass_service_1.SassWorkerImplementation();
+            build.onStart(async () => {
+                // Lazily load Sass
+                sass = await Promise.resolve().then(() => __importStar(require('sass')));
             });
-            build.onEnd(() => {
-                sass === null || sass === void 0 ? void 0 : sass.close();
-            });
-            build.onLoad({ filter: /\.s[ac]ss$/ }, async (args) => {
-                const result = await new Promise((resolve, reject) => {
-                    sass.render({
-                        file: args.path,
-                        includePaths: options.includePaths,
-                        indentedSyntax: args.path.endsWith('.sass'),
-                        outputStyle: 'expanded',
+            build.onLoad({ filter: /\.s[ac]ss$/ }, (args) => {
+                try {
+                    const warnings = [];
+                    // Use sync version as async version is slower.
+                    const { css, sourceMap, loadedUrls } = sass.compile(args.path, {
+                        style: 'expanded',
+                        loadPaths: options.loadPaths,
                         sourceMap: options.sourcemap,
-                        sourceMapContents: options.sourcemap,
-                        sourceMapEmbed: options.sourcemap,
+                        sourceMapIncludeSources: options.sourcemap,
                         quietDeps: true,
-                    }, (error, result) => {
-                        if (error) {
-                            reject(error);
-                        }
-                        if (result) {
-                            resolve(result);
-                        }
+                        logger: {
+                            warn: (text, _options) => {
+                                warnings.push({
+                                    text,
+                                });
+                            },
+                        },
                     });
-                });
-                return {
-                    contents: result.css,
-                    loader: 'css',
-                    watchFiles: result.stats.includedFiles,
-                };
+                    return {
+                        loader: 'css',
+                        contents: `${css}\n${sourceMapToUrlComment(sourceMap)}`,
+                        watchFiles: loadedUrls.map((url) => (0, url_1.fileURLToPath)(url)),
+                        warnings,
+                    };
+                }
+                catch (error) {
+                    if (error instanceof sass.Exception) {
+                        const file = error.span.url ? (0, url_1.fileURLToPath)(error.span.url) : undefined;
+                        return {
+                            loader: 'css',
+                            errors: [
+                                {
+                                    text: error.toString(),
+                                },
+                            ],
+                            watchFiles: file ? [file] : undefined,
+                        };
+                    }
+                    throw error;
+                }
             });
         },
     };
 }
 exports.createSassPlugin = createSassPlugin;
+function sourceMapToUrlComment(sourceMap) {
+    if (!sourceMap) {
+        return '';
+    }
+    const urlSourceMap = Buffer.from(JSON.stringify(sourceMap), 'utf-8').toString('base64');
+    return `/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${urlSourceMap} */`;
+}

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

@@ -36,14 +36,17 @@ const css_resource_plugin_1 = require("./css-resource-plugin");
 const esbuild_1 = require("./esbuild");
 const sass_plugin_1 = require("./sass-plugin");
 async function bundleStylesheet(entry, options) {
-    var _a, _b;
+    var _a, _b, _c;
+    const loadPaths = (_a = options.includePaths) !== null && _a !== void 0 ? _a : [];
+    // Needed to resolve node packages.
+    loadPaths.push(path.join(options.workspaceRoot, 'node_modules'));
     // 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,
+        entryNames: (_b = options.outputNames) === null || _b === void 0 ? void 0 : _b.bundles,
+        assetNames: (_c = options.outputNames) === null || _c === void 0 ? void 0 : _c.media,
         logLevel: 'silent',
         minify: options.optimization,
         sourcemap: options.sourcemap,
@@ -55,7 +58,7 @@ async function bundleStylesheet(entry, options) {
         conditions: ['style', 'sass'],
         mainFields: ['style', 'sass'],
         plugins: [
-            (0, sass_plugin_1.createSassPlugin)({ sourcemap: !!options.sourcemap, includePaths: options.includePaths }),
+            (0, sass_plugin_1.createSassPlugin)({ sourcemap: !!options.sourcemap, loadPaths }),
             (0, css_resource_plugin_1.createCssResourcePlugin)(),
         ],
     });

package/src/builders/dev-server/index.js

@@ -51,6 +51,7 @@ const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const configs_1 = require("../../webpack/configs");
 const index_html_webpack_plugin_1 = require("../../webpack/plugins/index-html-webpack-plugin");
+const service_worker_plugin_1 = require("../../webpack/plugins/service-worker-plugin");
 const stats_1 = require("../../webpack/utils/stats");
 const schema_1 = require("../browser/schema");
 /**
@@ -160,6 +161,7 @@ function serveWebpackBrowser(options, context, transforms = {}) {
         if (transforms.webpackConfiguration) {
             webpackConfig = await transforms.webpackConfiguration(webpackConfig);
         }
+        (_c = webpackConfig.plugins) !== null && _c !== void 0 ? _c : (webpackConfig.plugins = []);
         if (browserOptions.index) {
             const { scripts = [], styles = [], baseHref } = browserOptions;
             const entrypoints = (0, package_chunk_sort_1.generateEntryPoints)({
@@ -168,9 +170,8 @@ function serveWebpackBrowser(options, context, transforms = {}) {
                 // The below is needed as otherwise HMR for CSS will break.
                 // styles.js and runtime.js needs to be loaded as a non-module scripts as otherwise `document.currentScript` will be null.
                 // https://github.com/webpack-contrib/mini-css-extract-plugin/blob/90445dd1d81da0c10b9b0e8a17b417d0651816b8/src/hmr/hotModuleReplacement.js#L39
-                isHMREnabled: !!((_c = webpackConfig.devServer) === null || _c === void 0 ? void 0 : _c.hot),
+                isHMREnabled: !!((_d = webpackConfig.devServer) === null || _d === void 0 ? void 0 : _d.hot),
             });
-            (_d = webpackConfig.plugins) !== null && _d !== void 0 ? _d : (webpackConfig.plugins = []);
             webpackConfig.plugins.push(new index_html_webpack_plugin_1.IndexHtmlWebpackPlugin({
                 indexPath: path.resolve(workspaceRoot, (0, webpack_browser_config_1.getIndexInputFile)(browserOptions.index)),
                 outputPath: (0, webpack_browser_config_1.getIndexOutputFile)(browserOptions.index),
@@ -185,6 +186,15 @@ function serveWebpackBrowser(options, context, transforms = {}) {
                 lang: locale,
             }));
         }
+        if (browserOptions.serviceWorker) {
+            webpackConfig.plugins.push(new service_worker_plugin_1.ServiceWorkerPlugin({
+                baseHref: browserOptions.baseHref,
+                root: context.workspaceRoot,
+                projectRoot,
+                outputPath: path.join(context.workspaceRoot, browserOptions.outputPath),
+                ngswConfigPath: browserOptions.ngswConfigPath,
+            }));
+        }
         return {
             browserOptions,
             webpackConfig,

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

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

package/src/utils/service-worker.js

@@ -34,40 +34,42 @@ exports.augmentAppWithServiceWorker = void 0;
 const crypto = __importStar(require("crypto"));
 const fs_1 = require("fs");
 const path = __importStar(require("path"));
-const stream_1 = require("stream");
 const error_1 = require("./error");
 const load_esm_1 = require("./load-esm");
 class CliFilesystem {
-    constructor(base) {
+    constructor(fs, base) {
+        this.fs = fs;
         this.base = base;
     }
     list(dir) {
         return this._recursiveList(this._resolve(dir), []);
     }
     read(file) {
-        return fs_1.promises.readFile(this._resolve(file), 'utf-8');
+        return this.fs.readFile(this._resolve(file), 'utf-8');
     }
-    hash(file) {
-        return new Promise((resolve, reject) => {
-            const hash = crypto.createHash('sha1').setEncoding('hex');
-            (0, stream_1.pipeline)((0, fs_1.createReadStream)(this._resolve(file)), hash, (error) => error ? reject(error) : resolve(hash.read()));
-        });
+    async hash(file) {
+        return crypto
+            .createHash('sha1')
+            .update(await this.fs.readFile(this._resolve(file)))
+            .digest('hex');
     }
-    write(file, content) {
-        return fs_1.promises.writeFile(this._resolve(file), content);
+    write(_file, _content) {
+        throw new Error('This should never happen.');
     }
     _resolve(file) {
         return path.join(this.base, file);
     }
     async _recursiveList(dir, items) {
         const subdirectories = [];
-        for await (const entry of await fs_1.promises.opendir(dir)) {
-            if (entry.isFile()) {
+        for (const entry of await this.fs.readdir(dir)) {
+            const entryPath = path.join(dir, entry);
+            const stats = await this.fs.stat(entryPath);
+            if (stats.isFile()) {
                 // Uses posix paths since the service worker expects URLs
-                items.push('/' + path.relative(this.base, path.join(dir, entry.name)).replace(/\\/g, '/'));
+                items.push('/' + path.relative(this.base, entryPath).replace(/\\/g, '/'));
             }
-            else if (entry.isDirectory()) {
-                subdirectories.push(path.join(dir, entry.name));
+            else if (stats.isDirectory()) {
+                subdirectories.push(entryPath);
             }
         }
         for (const subdirectory of subdirectories) {
@@ -76,7 +78,7 @@ class CliFilesystem {
         return items;
     }
 }
-async function augmentAppWithServiceWorker(appRoot, workspaceRoot, outputPath, baseHref, ngswConfigPath) {
+async function augmentAppWithServiceWorker(appRoot, workspaceRoot, outputPath, baseHref, ngswConfigPath, inputputFileSystem = fs_1.promises, outputFileSystem = fs_1.promises) {
     // Determine the configuration file path
     const configPath = ngswConfigPath
         ? path.join(workspaceRoot, ngswConfigPath)
@@ -84,7 +86,7 @@ async function augmentAppWithServiceWorker(appRoot, workspaceRoot, outputPath, b
     // Read the configuration file
     let config;
     try {
-        const configurationData = await fs_1.promises.readFile(configPath, 'utf-8');
+        const configurationData = await inputputFileSystem.readFile(configPath, 'utf-8');
         config = JSON.parse(configurationData);
     }
     catch (error) {
@@ -103,20 +105,28 @@ async function augmentAppWithServiceWorker(appRoot, workspaceRoot, outputPath, b
     // changed to a direct dynamic import.
     const GeneratorConstructor = (await (0, load_esm_1.loadEsmModule)('@angular/service-worker/config')).Generator;
     // Generate the manifest
-    const generator = new GeneratorConstructor(new CliFilesystem(outputPath), baseHref);
+    const generator = new GeneratorConstructor(new CliFilesystem(outputFileSystem, outputPath), baseHref);
     const output = await generator.process(config);
     // Write the manifest
     const manifest = JSON.stringify(output, null, 2);
-    await fs_1.promises.writeFile(path.join(outputPath, 'ngsw.json'), manifest);
+    await outputFileSystem.writeFile(path.join(outputPath, 'ngsw.json'), manifest);
     // Find the service worker package
     const workerPath = require.resolve('@angular/service-worker/ngsw-worker.js');
+    const copy = async (src, dest) => {
+        const resolvedDest = path.join(outputPath, dest);
+        return inputputFileSystem === outputFileSystem
+            ? // Native FS (Builder).
+                inputputFileSystem.copyFile(workerPath, resolvedDest, fs_1.constants.COPYFILE_FICLONE)
+            : // memfs (Webpack): Read the file from the input FS (disk) and write it to the output FS (memory).
+                outputFileSystem.writeFile(resolvedDest, await inputputFileSystem.readFile(src));
+    };
     // Write the worker code
-    await fs_1.promises.copyFile(workerPath, path.join(outputPath, 'ngsw-worker.js'), fs_1.constants.COPYFILE_FICLONE);
+    await copy(workerPath, 'ngsw-worker.js');
     // If present, write the safety worker code
-    const safetyPath = path.join(path.dirname(workerPath), 'safety-worker.js');
     try {
-        await fs_1.promises.copyFile(safetyPath, path.join(outputPath, 'worker-basic.min.js'), fs_1.constants.COPYFILE_FICLONE);
-        await fs_1.promises.copyFile(safetyPath, path.join(outputPath, 'safety-worker.js'), fs_1.constants.COPYFILE_FICLONE);
+        const safetyPath = path.join(path.dirname(workerPath), 'safety-worker.js');
+        await copy(safetyPath, 'worker-basic.min.js');
+        await copy(safetyPath, 'safety-worker.js');
     }
     catch (error) {
         (0, error_1.assertIsError)(error);

package/src/webpack/configs/dev-server.js

@@ -98,23 +98,6 @@ async function getDevServerConfig(wco) {
                 publicPath: servePath,
                 stats: false,
             },
-            setupMiddlewares: (middlewares, _devServer) => {
-                // Temporary workaround for https://github.com/webpack/webpack-dev-server/issues/4180
-                middlewares.push({
-                    name: 'options-request-response',
-                    path: '*',
-                    middleware: (req, res, next) => {
-                        if (req.method === 'OPTIONS') {
-                            res.statusCode = 204;
-                            res.setHeader('Content-Length', 0);
-                            res.end();
-                            return;
-                        }
-                        next();
-                    },
-                });
-                return middlewares;
-            },
             liveReload,
             hot: hmr && !liveReload ? 'only' : hmr,
             proxy: await addProxyConfig(root, proxyConfig),

package/src/webpack/plugins/esbuild-executor.d.ts

@@ -41,6 +41,6 @@ export declare class EsbuildExecutor implements Pick<typeof import('esbuild'), '
      * Transitions an executor instance to use the WASM-variant of esbuild.
      */
     private useWasm;
-    transform(input: string, options?: TransformOptions): Promise<TransformResult>;
+    transform(input: string | Uint8Array, options?: TransformOptions): Promise<TransformResult>;
     formatMessages(messages: PartialMessage[], options: FormatMessagesOptions): Promise<string[]>;
 }

package/src/webpack/plugins/service-worker-plugin.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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 ServiceWorkerPluginOptions {
+    projectRoot: string;
+    root: string;
+    outputPath: string;
+    baseHref?: string;
+    ngswConfigPath?: string;
+}
+export declare class ServiceWorkerPlugin {
+    private readonly options;
+    constructor(options: ServiceWorkerPluginOptions);
+    apply(compiler: Compiler): void;
+}

package/src/webpack/plugins/service-worker-plugin.js

@@ -0,0 +1,27 @@
+"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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServiceWorkerPlugin = void 0;
+const service_worker_1 = require("../../utils/service-worker");
+class ServiceWorkerPlugin {
+    constructor(options) {
+        this.options = options;
+    }
+    apply(compiler) {
+        compiler.hooks.done.tapPromise('angular-service-worker', async (_compilation) => {
+            const { projectRoot, root, baseHref = '', ngswConfigPath, outputPath } = this.options;
+            await (0, service_worker_1.augmentAppWithServiceWorker)(projectRoot, root, outputPath, baseHref, ngswConfigPath, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            compiler.inputFileSystem.promises, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            compiler.outputFileSystem.promises);
+        });
+    }
+}
+exports.ServiceWorkerPlugin = ServiceWorkerPlugin;