@angular-devkit/build-angular 12.2.0-next.2 → 12.2.1

package/package.json

@@ -1,28 +1,28 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "12.2.0-next.2",
+  "version": "12.2.1",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "1.0.1",
-    "@angular-devkit/architect": "0.1202.0-next.2",
-    "@angular-devkit/build-optimizer": "0.1202.0-next.2",
-    "@angular-devkit/build-webpack": "0.1202.0-next.2",
-    "@angular-devkit/core": "12.2.0-next.2",
-    "@babel/core": "7.14.6",
-    "@babel/generator": "7.14.5",
+    "@angular-devkit/architect": "0.1202.1",
+    "@angular-devkit/build-optimizer": "0.1202.1",
+    "@angular-devkit/build-webpack": "0.1202.1",
+    "@angular-devkit/core": "12.2.1",
+    "@babel/core": "7.14.8",
+    "@babel/generator": "7.14.8",
     "@babel/helper-annotate-as-pure": "7.14.5",
     "@babel/plugin-proposal-async-generator-functions": "7.14.7",
     "@babel/plugin-transform-async-to-generator": "7.14.5",
     "@babel/plugin-transform-runtime": "7.14.5",
-    "@babel/preset-env": "7.14.7",
-    "@babel/runtime": "7.14.6",
+    "@babel/preset-env": "7.14.8",
+    "@babel/runtime": "7.14.8",
     "@babel/template": "7.14.5",
     "@discoveryjs/json-ext": "0.5.3",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "12.2.0-next.2",
+    "@ngtools/webpack": "12.2.1",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.2",
     "browserslist": "^4.9.1",
@@ -30,11 +30,11 @@
     "caniuse-lite": "^1.0.30001032",
     "circular-dependency-plugin": "5.2.2",
     "copy-webpack-plugin": "9.0.1",
-    "core-js": "3.15.2",
+    "core-js": "3.16.0",
     "critters": "0.0.10",
-    "css-loader": "5.2.7",
+    "css-loader": "6.2.0",
     "css-minimizer-webpack-plugin": "3.0.2",
-    "esbuild": "0.12.15",
+    "esbuild": "0.12.17",
     "find-cache-dir": "3.3.1",
     "glob": "7.1.7",
     "https-proxy-agent": "5.0.0",
@@ -50,19 +50,19 @@
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.1.0",
-    "postcss": "8.3.5",
+    "postcss": "8.3.6",
     "postcss-import": "14.0.2",
     "postcss-loader": "6.1.1",
     "postcss-preset-env": "6.7.0",
-    "regenerator-runtime": "0.13.7",
+    "regenerator-runtime": "0.13.9",
     "resolve-url-loader": "4.0.0",
     "rxjs": "6.6.7",
-    "sass": "1.35.2",
+    "sass": "1.36.0",
     "sass-loader": "12.1.0",
     "semver": "7.3.5",
     "source-map-loader": "3.0.0",
     "source-map-support": "0.5.19",
-    "style-loader": "3.1.0",
+    "style-loader": "3.2.1",
     "stylus": "0.54.8",
     "stylus-loader": "6.1.0",
     "terser": "5.7.1",
@@ -70,16 +70,16 @@
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.3.0",
-    "webpack": "5.44.0",
+    "webpack": "5.50.0",
     "webpack-dev-middleware": "5.0.0",
     "webpack-dev-server": "3.11.2",
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "1.5.2"
   },
   "peerDependencies": {
-    "@angular/compiler-cli": "^12.0.0 || ^12.1.0-next",
-    "@angular/localize": "^12.0.0 || ^12.1.0-next",
-    "@angular/service-worker": "^12.0.0 || ^12.1.0-next",
+    "@angular/compiler-cli": "^12.0.0 || ^12.2.0-next",
+    "@angular/localize": "^12.0.0 || ^12.2.0-next",
+    "@angular/service-worker": "^12.0.0 || ^12.2.0-next",
     "karma": "^6.3.0",
     "ng-packagr": "^12.0.0 || ^12.1.0-next",
     "protractor": "^7.0.0",

package/src/app-shell/index.js

@@ -130,10 +130,9 @@ async function _appShellBuilder(options, context) {
     });
     let spinner;
     try {
-        // Using `.result` instead of `.output` causes Webpack FS cache not to be created.
         const [browserResult, serverResult] = await Promise.all([
-            browserTargetRun.output.toPromise(),
-            serverTargetRun.output.toPromise(),
+            browserTargetRun.result,
+            serverTargetRun.result,
         ]);
         if (browserResult.success === false || browserResult.baseOutputPath === undefined) {
             return browserResult;
@@ -152,8 +151,7 @@ async function _appShellBuilder(options, context) {
         return { success: false, error: err.message };
     }
     finally {
-        // workaround for [tsetse] All Promises in async functions must either be awaited or used in an expression.
-        const _ = Promise.all([browserTargetRun.stop(), serverTargetRun.stop()]);
+        await Promise.all([browserTargetRun.stop(), serverTargetRun.stop()]);
     }
 }
 exports.default = architect_1.createBuilder(_appShellBuilder);

package/src/babel/plugins/adjust-static-class-members.js

@@ -57,6 +57,29 @@ function getKeywords() {
     return ['class'];
 }
 exports.getKeywords = getKeywords;
+/**
+ * Determines whether a property and its initializer value can be safely wrapped in a pure
+ * annotated IIFE. Values that may cause side effects are not considered safe to wrap.
+ * Wrapping such values may cause runtime errors and/or incorrect runtime behavior.
+ *
+ * @param propertyName The name of the property to analyze.
+ * @param assignmentValue The initializer value that will be assigned to the property.
+ * @returns If the property can be safely wrapped, then true; otherwise, false.
+ */
+function canWrapProperty(propertyName, assignmentValue) {
+    if (angularStaticsToWrap.has(propertyName)) {
+        return true;
+    }
+    const { leadingComments } = assignmentValue.node;
+    if (leadingComments === null || leadingComments === void 0 ? void 0 : leadingComments.some(
+    // `@pureOrBreakMyCode` is used by closure and is present in Angular code
+    ({ value }) => value.includes('@__PURE__') ||
+        value.includes('#__PURE__') ||
+        value.includes('@pureOrBreakMyCode'))) {
+        return true;
+    }
+    return assignmentValue.isPure();
+}
 /**
  * Analyze the sibling nodes of a class to determine if any downlevel elements should be
  * wrapped in a pure annotated IIFE. Also determines if any elements have potential side
@@ -130,7 +153,7 @@ function analyzeClassSiblings(origin, classIdentifier, allowWrappingDecorators)
             nextStatement.remove();
             --i;
         }
-        else if (angularStaticsToWrap.has(propertyName) || assignmentValue.isPure()) {
+        else if (canWrapProperty(propertyName, assignmentValue)) {
             wrapStatementPaths.push(nextStatement);
         }
         else {

package/src/babel/webpack-loader.js

@@ -53,7 +53,11 @@ exports.default = babel_loader_1.custom(() => {
                     // TypeScript files will have already been downlevelled
                     customOptions.forceES5 = !/\.tsx?$/.test(this.resourcePath);
                 }
-                else if (esTarget >= typescript_1.ScriptTarget.ES2017) {
+                else if (esTarget >= typescript_1.ScriptTarget.ES2017 || /\.[cm]?js$/.test(this.resourcePath)) {
+                    // Application code (TS files) will only contain native async if target is ES2017+.
+                    // However, third-party libraries can regardless of the target option.
+                    // APF packages with code in [f]esm2015 directories is downlevelled to ES2015 and
+                    // will not have native async.
                     customOptions.forceAsyncTransformation =
                         !/[\\\/][_f]?esm2015[\\\/]/.test(this.resourcePath) && source.includes('async');
                 }

package/src/dev-server/index.js

@@ -119,7 +119,7 @@ function serveWebpackBrowser(options, context, transforms = {}) {
 
         Binding this server to an open connection can result in compromising your application or
         computer. Using a different host than the one passed to the "--host" flag might result in
-        websocket connection issues. You might need to use "--disableHostCheck" if that's the
+        websocket connection issues. You might need to use "--disable-host-check" if that's the
         case.
       `);
         }

package/src/webpack/configs/common.js

@@ -171,7 +171,7 @@ function getCommonConfig(wco) {
     }
     // process asset entries
     if (buildOptions.assets.length) {
-        const copyWebpackPluginPatterns = buildOptions.assets.map((asset) => {
+        const copyWebpackPluginPatterns = buildOptions.assets.map((asset, index) => {
             // Resolve input paths relative to workspace root and add slash at the end.
             // eslint-disable-next-line prefer-const
             let { input, output, ignore = [], glob } = asset;
@@ -201,6 +201,7 @@ function getCommonConfig(wco) {
                         ...ignore,
                     ].map((i) => path.posix.join(input, i)),
                 },
+                priority: index,
             };
         });
         extraPlugins.push(new copy_webpack_plugin_1.default({
@@ -249,9 +250,19 @@ function getCommonConfig(wco) {
     if (scriptsSourceMap || stylesSourceMap) {
         extraRules.push({
             test: /\.m?js$/,
-            exclude: vendorSourceMap ? undefined : /[\\\/]node_modules[\\\/]/,
             enforce: 'pre',
             loader: require.resolve('source-map-loader'),
+            options: {
+                filterSourceMappingUrl: (_mapUri, resourcePath) => {
+                    if (vendorSourceMap) {
+                        // Consume all sourcemaps when vendor option is enabled.
+                        return true;
+                    }
+                    // Don't consume sourcemaps in node_modules when vendor is disabled.
+                    // But, do consume local libraries sourcemaps.
+                    return !resourcePath.includes('node_modules');
+                },
+            },
         });
     }
     let buildOptimizerUseRule = [];

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

@@ -49,28 +49,30 @@ class JavaScriptOptimizerPlugin {
                         continue;
                     }
                     const scriptAsset = compilation.getAsset(assetName);
-                    if (scriptAsset && !scriptAsset.info.minimized) {
-                        const { source: scriptAssetSource, name } = scriptAsset;
-                        let cacheItem;
-                        if (cache) {
-                            const eTag = cache.getLazyHashedEtag(scriptAssetSource);
-                            cacheItem = cache.getItemCache(name, eTag);
-                            const cachedOutput = await cacheItem.getPromise();
-                            if (cachedOutput) {
-                                compilation.updateAsset(name, cachedOutput.source, {
-                                    minimized: true,
-                                });
-                                continue;
-                            }
+                    // Skip assets that have already been optimized or are verbatim copies (project assets)
+                    if (!scriptAsset || scriptAsset.info.minimized || scriptAsset.info.copied) {
+                        continue;
+                    }
+                    const { source: scriptAssetSource, name } = scriptAsset;
+                    let cacheItem;
+                    if (cache) {
+                        const eTag = cache.getLazyHashedEtag(scriptAssetSource);
+                        cacheItem = cache.getItemCache(name, eTag);
+                        const cachedOutput = await cacheItem.getPromise();
+                        if (cachedOutput) {
+                            compilation.updateAsset(name, cachedOutput.source, {
+                                minimized: true,
+                            });
+                            continue;
                         }
-                        const { source, map } = scriptAssetSource.sourceAndMap();
-                        scriptsToOptimize.push({
-                            name: scriptAsset.name,
-                            code: typeof source === 'string' ? source : source.toString(),
-                            map,
-                            cacheItem,
-                        });
                     }
+                    const { source, map } = scriptAssetSource.sourceAndMap();
+                    scriptsToOptimize.push({
+                        name: scriptAsset.name,
+                        code: typeof source === 'string' ? source : source.toString(),
+                        map,
+                        cacheItem,
+                    });
                 }
                 if (scriptsToOptimize.length === 0) {
                     return;

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

@@ -40,7 +40,9 @@ async function default_1({ asset, options }) {
         if (terserResult.map) {
             partialSourcemaps.unshift(terserResult.map);
         }
-        partialSourcemaps.push(asset.map);
+        if (asset.map) {
+            partialSourcemaps.push(asset.map);
+        }
         fullSourcemap = remapping_1.default(partialSourcemaps, () => null);
     }
     return { name: asset.name, code: terserResult.code, map: fullSourcemap };