@angular-devkit/build-angular 14.2.1 → 14.2.2

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "14.2.1",
+  "version": "14.2.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.1402.1",
-    "@angular-devkit/build-webpack": "0.1402.1",
-    "@angular-devkit/core": "14.2.1",
+    "@angular-devkit/architect": "0.1402.2",
+    "@angular-devkit/build-webpack": "0.1402.2",
+    "@angular-devkit/core": "14.2.2",
     "@babel/core": "7.18.10",
     "@babel/generator": "7.18.12",
     "@babel/helper-annotate-as-pure": "7.18.6",
@@ -20,7 +20,7 @@
     "@babel/runtime": "7.18.9",
     "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "14.2.1",
+    "@ngtools/webpack": "14.2.2",
     "ansi-colors": "4.1.3",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
@@ -46,7 +46,7 @@
     "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",
     "regenerator-runtime": "0.13.9",
@@ -65,7 +65,7 @@
     "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"
   },

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

@@ -176,8 +176,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);

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/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}`));
+            }
         });
     }
 }