@angular-devkit/build-angular 14.2.0 → 15.0.0-next.0

package/package.json

@@ -1,39 +1,39 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "14.2.0",
+  "version": "15.0.0-next.0",
   "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.1402.0",
-    "@angular-devkit/build-webpack": "0.1402.0",
-    "@angular-devkit/core": "14.2.0",
-    "@babel/core": "7.18.10",
-    "@babel/generator": "7.18.12",
+    "@angular-devkit/architect": "0.1500.0-next.0",
+    "@angular-devkit/build-webpack": "0.1500.0-next.0",
+    "@angular-devkit/core": "15.0.0-next.0",
+    "@babel/core": "7.19.0",
+    "@babel/generator": "7.19.0",
     "@babel/helper-annotate-as-pure": "7.18.6",
-    "@babel/plugin-proposal-async-generator-functions": "7.18.10",
+    "@babel/plugin-proposal-async-generator-functions": "7.19.0",
     "@babel/plugin-transform-async-to-generator": "7.18.6",
     "@babel/plugin-transform-runtime": "7.18.10",
-    "@babel/preset-env": "7.18.10",
-    "@babel/runtime": "7.18.9",
+    "@babel/preset-env": "7.19.0",
+    "@babel/runtime": "7.19.0",
     "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "14.2.0",
+    "@ngtools/webpack": "15.0.0-next.0",
     "ansi-colors": "4.1.3",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.9.1",
-    "cacache": "16.1.2",
+    "cacache": "16.1.3",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
     "css-loader": "6.7.1",
-    "esbuild-wasm": "0.15.5",
+    "esbuild-wasm": "0.15.7",
     "glob": "8.0.3",
     "https-proxy-agent": "5.0.1",
     "inquirer": "8.2.4",
-    "jsonc-parser": "3.1.0",
+    "jsonc-parser": "3.2.0",
     "karma-source-map-support": "1.4.0",
     "less": "4.1.3",
     "less-loader": "11.0.0",
@@ -46,38 +46,38 @@
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.2.0",
     "postcss": "8.4.16",
-    "postcss-import": "14.1.0",
+    "postcss-import": "15.0.0",
     "postcss-loader": "7.0.1",
-    "postcss-preset-env": "7.8.0",
+    "postcss-preset-env": "7.8.1",
     "regenerator-runtime": "0.13.9",
     "resolve-url-loader": "5.0.0",
     "rxjs": "6.6.7",
-    "sass": "1.54.4",
+    "sass": "1.54.9",
     "sass-loader": "13.0.2",
     "semver": "7.3.7",
     "source-map-loader": "4.0.0",
     "source-map-support": "0.5.21",
     "stylus": "0.59.0",
     "stylus-loader": "7.0.0",
-    "terser": "5.14.2",
+    "terser": "5.15.0",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.4.0",
     "webpack": "5.74.0",
     "webpack-dev-middleware": "5.3.3",
-    "webpack-dev-server": "4.10.0",
+    "webpack-dev-server": "4.11.0",
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.15.5"
+    "esbuild": "0.15.7"
   },
   "peerDependencies": {
-    "@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",
+    "@angular/compiler-cli": "^15.0.0-next",
+    "@angular/localize": "^15.0.0-next",
+    "@angular/service-worker": "^15.0.0-next",
     "karma": "^6.3.0",
-    "ng-packagr": "^14.0.0 || ^14.0.0-next || ^14.1.0-next",
+    "ng-packagr": "^15.0.0-next",
     "protractor": "^7.0.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",
     "typescript": ">=4.6.2 <4.9"

package/src/builders/browser/index.js

@@ -105,12 +105,26 @@ function buildWebpackBrowser(options, context, transforms = {}) {
     // Check Angular version.
     (0, version_1.assertCompatibleAngularVersion)(context.workspaceRoot);
     return (0, rxjs_1.from)(context.getProjectMetadata(projectName)).pipe((0, operators_1.switchMap)(async (projectMetadata) => {
+        var _a;
+        var _b;
         // Purge old build disk cache.
         await (0, purge_cache_1.purgeStaleBuildCache)(context);
         // Initialize builder
         const initialization = await initialize(options, context, transforms.webpackConfiguration);
         // Check and warn about IE browser support
         checkInternetExplorerSupport(initialization.projectRoot, context.logger);
+        // Add index file to watched files.
+        if (options.watch) {
+            const indexInputFile = path.join(context.workspaceRoot, (0, webpack_browser_config_1.getIndexInputFile)(options.index));
+            (_a = (_b = initialization.config).plugins) !== null && _a !== void 0 ? _a : (_b.plugins = []);
+            initialization.config.plugins.push({
+                apply: (compiler) => {
+                    compiler.hooks.thisCompilation.tap('build-angular', (compilation) => {
+                        compilation.fileDependencies.add(indexInputFile);
+                    });
+                },
+            });
+        }
         return {
             ...initialization,
             cacheOptions: (0, normalize_cache_1.normalizeCacheOptions)(projectMetadata, context.workspaceRoot),

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

@@ -134,7 +134,6 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             // The tsconfig is loaded in setup instead of in start to allow the esbuild target build option to be modified.
             // esbuild build options can only be modified in setup prior to starting the build.
             const { options: compilerOptions, rootNames, errors: configurationDiagnostics, } = compilerCli.readConfiguration(pluginOptions.tsconfig, {
-                enableIvy: true,
                 noEmitOnError: false,
                 suppressOutputPathCheck: true,
                 outDir: undefined,
@@ -176,8 +175,8 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // Once the AOT compiler allows only a transformResource hook, this can be reevaluated.
                 host.readResource = async function (fileName) {
                     var _a, _b, _c;
-                    // Template resources (.html) files are not bundled or transformed
-                    if (fileName.endsWith('.html')) {
+                    // Template resources (.html/.svg) files are not bundled or transformed
+                    if (fileName.endsWith('.html') || fileName.endsWith('.svg')) {
                         return (_a = this.readFile(fileName)) !== null && _a !== void 0 ? _a : '';
                     }
                     const { contents, resourceFiles, errors, warnings } = await (0, stylesheets_1.bundleStylesheetFile)(fileName, styleOptions);
@@ -270,7 +269,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     };
                 }
                 const data = (_a = typescriptResult.content) !== null && _a !== void 0 ? _a : '';
-                const forceAsyncTransformation = /for\s+await\s*\(|async\s+function\s*\*/.test(data);
+                const forceAsyncTransformation = /async\s+function\s*\*/.test(data);
                 const useInputSourcemap = pluginOptions.sourcemap &&
                     (!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
                 // If no additional transformations are needed, return the TypeScript output directly
@@ -310,8 +309,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
                 var _a;
                 const data = await fs_1.promises.readFile(args.path, 'utf-8');
-                const forceAsyncTransformation = !/[\\/][_f]?esm2015[\\/]/.test(args.path) &&
-                    /for\s+await\s*\(|async\s+function\s*\*/.test(data);
+                const forceAsyncTransformation = !/[\\/][_f]?esm2015[\\/]/.test(args.path) && /async\s+function\s*\*/.test(data);
                 const shouldLink = await (0, webpack_loader_1.requiresLinking)(args.path, data);
                 const useInputSourcemap = pluginOptions.sourcemap &&
                     (!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));

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

@@ -72,20 +72,20 @@ async function buildEsbuildBrowser(options, context) {
         context.logger.error(`The 'browser-esbuild' builder requires a target to be specified.`);
         return { success: false };
     }
-    const { projectRoot, workspaceRoot, mainEntryPoint, polyfillsEntryPoint, optimizationOptions, outputPath, sourcemapOptions, tsconfig, assets, outputNames, } = await (0, options_1.normalizeOptions)(context, projectName, options);
+    const { projectRoot, workspaceRoot, entryPoints, entryPointNameLookup, optimizationOptions, outputPath, sourcemapOptions, tsconfig, assets, outputNames, } = await (0, options_1.normalizeOptions)(context, projectName, options);
     // Clean output path if enabled
     if (options.deleteOutputPath) {
         (0, utils_1.deleteOutputDir)(workspaceRoot, options.outputPath);
     }
-    // Setup bundler entry points
-    const entryPoints = {
-        main: mainEntryPoint,
-    };
-    if (polyfillsEntryPoint) {
-        entryPoints['polyfills'] = polyfillsEntryPoint;
+    // Create output directory if needed
+    try {
+        await fs_1.promises.mkdir(outputPath, { recursive: true });
+    }
+    catch (e) {
+        (0, error_1.assertIsError)(e);
+        context.logger.error('Unable to create output directory: ' + e.message);
+        return { success: false };
     }
-    // Create reverse lookup used during index HTML generation
-    const entryPointNameLookup = new Map(Object.entries(entryPoints).map(([name, filePath]) => [path.relative(workspaceRoot, filePath), name]));
     const [codeResults, styleResults] = await Promise.all([
         // Execute esbuild to bundle the application code
         bundleCode(workspaceRoot, entryPoints, outputNames, options, optimizationOptions, sourcemapOptions, tsconfig),
@@ -126,15 +126,6 @@ async function buildEsbuildBrowser(options, context) {
     if (styleResults.errors.length) {
         return { success: false };
     }
-    // Create output directory if needed
-    try {
-        await fs_1.promises.mkdir(outputPath, { recursive: true });
-    }
-    catch (e) {
-        (0, error_1.assertIsError)(e);
-        context.logger.error('Unable to create output directory: ' + e.message);
-        return { success: false };
-    }
     // Generate index HTML file
     if (options.index) {
         const entrypoints = (0, package_chunk_sort_1.generateEntryPoints)({
@@ -216,15 +207,11 @@ async function bundleCode(workspaceRoot, entryPoints, outputNames, options, opti
         target: 'es2020',
         supported: {
             // Native async/await is not supported with Zone.js. Disabling support here will cause
-            // esbuild to downlevel async/await to a Zone.js supported form.
+            // esbuild to downlevel async/await and for await...of to a Zone.js supported form. However, esbuild
+            // does not currently support downleveling async generators. Instead babel is used within the JS/TS
+            // loader to perform the downlevel transformation.
+            // NOTE: If esbuild adds support in the future, the babel support for async generators can be disabled.
             'async-await': false,
-            // Zone.js also does not support async generators or async iterators. However, esbuild does
-            // not currently support downleveling either of them. Instead babel is used within the JS/TS
-            // loader to perform the downlevel transformation. They are both disabled here to allow
-            // esbuild to handle them in the future if support is ever added.
-            // NOTE: If esbuild adds support in the future, the babel support for these can be disabled.
-            'async-generator': false,
-            'for-await': false,
         },
         mainFields: ['es2020', 'browser', 'module', 'main'],
         conditions: ['es2020', 'es2015', 'module'],

package/src/builders/browser-esbuild/options.d.ts

@@ -19,8 +19,8 @@ import { Schema as BrowserBuilderOptions } from '../browser/schema';
  */
 export declare function normalizeOptions(context: BuilderContext, projectName: string, options: BrowserBuilderOptions): Promise<{
     workspaceRoot: string;
-    mainEntryPoint: string;
-    polyfillsEntryPoint: string | undefined;
+    entryPoints: Record<string, string>;
+    entryPointNameLookup: ReadonlyMap<string, string>;
     optimizationOptions: import("../../utils").NormalizedOptimizationOptions;
     outputPath: string;
     sourcemapOptions: import("../browser/schema").SourceMapClass;

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

@@ -71,10 +71,19 @@ async function normalizeOptions(context, projectName, options) {
     if (options.resourcesOutputPath) {
         outputNames.media = path.join(options.resourcesOutputPath, outputNames.media);
     }
+    // Setup bundler entry points
+    const entryPoints = {
+        main: mainEntryPoint,
+    };
+    if (polyfillsEntryPoint) {
+        entryPoints['polyfills'] = polyfillsEntryPoint;
+    }
+    // Create reverse lookup used during index HTML generation
+    const entryPointNameLookup = new Map(Object.entries(entryPoints).map(([name, filePath]) => [path.relative(workspaceRoot, filePath), name]));
     return {
         workspaceRoot,
-        mainEntryPoint,
-        polyfillsEntryPoint,
+        entryPoints,
+        entryPointNameLookup,
         optimizationOptions,
         outputPath,
         sourcemapOptions,

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

@@ -191,7 +191,6 @@ function serveWebpackBrowser(options, context, transforms = {}) {
                 baseHref: browserOptions.baseHref,
                 root: context.workspaceRoot,
                 projectRoot,
-                outputPath: path.join(context.workspaceRoot, browserOptions.outputPath),
                 ngswConfigPath: browserOptions.ngswConfigPath,
             }));
         }

package/src/utils/load-translations.js

@@ -40,8 +40,10 @@ async function createTranslationLoader() {
         const content = fs.readFileSync(path, 'utf8');
         const unusedParsers = new Map();
         for (const [format, parser] of Object.entries(parsers)) {
-            const analysis = analyze(parser, path, content);
+            const analysis = parser.analyze(path, content);
             if (analysis.canParse) {
+                // Types don't overlap here so we need to use any.
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const { locale, translations } = parser.parse(path, content, analysis.hint);
                 const integrity = 'sha256-' + (0, crypto_1.createHash)('sha256').update(content).digest('base64');
                 return { format, locale, translations, diagnostics, integrity };
@@ -57,17 +59,6 @@ async function createTranslationLoader() {
         throw new Error(`Unsupported translation file format in ${path}. The following parsers were tried:\n` +
             messages.join('\n'));
     };
-    // TODO: `parser.canParse()` is deprecated; remove this polyfill once we are sure all parsers provide the `parser.analyze()` method.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function analyze(parser, path, content) {
-        if (parser.analyze !== undefined) {
-            return parser.analyze(path, content);
-        }
-        else {
-            const hint = parser.canParse(path, content);
-            return { canParse: hint !== false, hint, diagnostics };
-        }
-    }
 }
 exports.createTranslationLoader = createTranslationLoader;
 async function importParsers() {

package/src/webpack/configs/styles.js

@@ -37,6 +37,7 @@ 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"));
+const webpack_1 = require("webpack");
 const sass_service_1 = require("../../sass/sass-service");
 const plugins_1 = require("../plugins");
 const css_optimizer_plugin_1 = require("../plugins/css-optimizer-plugin");
@@ -103,11 +104,18 @@ function getStylesConfig(wco) {
             'To opt-out of the deprecated behaviour, please migrate to another stylesheet language.');
     }
     const sassImplementation = new sass_service_1.SassWorkerImplementation();
+    const sassTildeUsageMessage = new Set();
     extraPlugins.push({
         apply(compiler) {
             compiler.hooks.shutdown.tap('sass-worker', () => {
                 sassImplementation.close();
             });
+            compiler.hooks.afterCompile.tap('sass-worker', (compilation) => {
+                for (const message of sassTildeUsageMessage) {
+                    compilation.warnings.push(new webpack_1.WebpackError(message));
+                }
+                sassTildeUsageMessage.clear();
+            });
         },
     });
     const assetNameTemplate = (0, helpers_1.assetNameTemplateFactory)(hashFormat);
@@ -245,6 +253,12 @@ function getStylesConfig(wco) {
                         implementation: sassImplementation,
                         sourceMap: true,
                         sassOptions: {
+                            importer: (url, from) => {
+                                if (url.charAt(0) === '~') {
+                                    sassTildeUsageMessage.add(`'${from}' imports '${url}' with a tilde. Usage of '~' in imports is deprecated.`);
+                                }
+                                return null;
+                            },
                             // Prevent use of `fibers` package as it no longer works in newer Node.js versions
                             fiber: false,
                             // bootstrap-sass requires a minimum precision of 8
@@ -277,6 +291,12 @@ function getStylesConfig(wco) {
                         implementation: sassImplementation,
                         sourceMap: true,
                         sassOptions: {
+                            importer: (url, from) => {
+                                if (url.charAt(0) === '~') {
+                                    sassTildeUsageMessage.add(`'${from}' imports '${url}' with a tilde. Usage of '~' in imports is deprecated.`);
+                                }
+                                return null;
+                            },
                             // Prevent use of `fibers` package as it no longer works in newer Node.js versions
                             fiber: false,
                             indentedSyntax: true,

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

@@ -9,7 +9,6 @@ import type { Compiler } from 'webpack';
 export interface ServiceWorkerPluginOptions {
     projectRoot: string;
     root: string;
-    outputPath: string;
     baseHref?: string;
     ngswConfigPath?: string;
 }

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

@@ -14,13 +14,31 @@ class ServiceWorkerPlugin {
         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);
+        compiler.hooks.done.tapPromise('angular-service-worker', async (stats) => {
+            if (stats.hasErrors()) {
+                // Don't generate a service worker if the compilation has errors.
+                // When there are errors some files will not be emitted which would cause other errors down the line such as readdir failures.
+                return;
+            }
+            const { projectRoot, root, baseHref = '', ngswConfigPath } = this.options;
+            const { compilation } = stats;
+            // We use the output path from the compilation instead of build options since during
+            // localization the output path is modified to a temp directory.
+            // See: https://github.com/angular/angular-cli/blob/7e64b1537d54fadb650559214fbb12707324cd75/packages/angular_devkit/build_angular/src/utils/i18n-options.ts#L251-L252
+            const outputPath = compilation.outputOptions.path;
+            if (!outputPath) {
+                throw new Error('Compilation output path cannot be empty.');
+            }
+            try {
+                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);
+            }
+            catch (error) {
+                compilation.errors.push(new compilation.compiler.webpack.WebpackError(`Failed to generate service worker - ${error instanceof Error ? error.message : error}`));
+            }
         });
     }
 }

package/src/webpack/plugins/typescript.js

@@ -10,20 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createIvyPlugin = void 0;
 const webpack_1 = require("@ngtools/webpack");
 const typescript_1 = require("typescript");
-function ensureIvy(wco) {
-    if (wco.tsConfig.options.enableIvy !== false) {
-        return;
-    }
-    wco.logger.warn('Project is attempting to disable the Ivy compiler. ' +
-        'Angular versions 12 and higher do not support the deprecated View Engine compiler for applications. ' +
-        'The Ivy compiler will be used to build this project. ' +
-        '\nFor additional information or if the build fails, please see https://angular.io/guide/ivy');
-    wco.tsConfig.options.enableIvy = true;
-}
 function createIvyPlugin(wco, aot, tsconfig) {
-    if (aot) {
-        ensureIvy(wco);
-    }
     const { buildOptions } = wco;
     const optimize = buildOptions.optimization.scripts;
     const compilerOptions = {