@angular-devkit/build-angular 13.0.0-next.6 → 13.0.0-next.7

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "13.0.0-next.6",
+  "version": "13.0.0-next.7",
   "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.1300.0-next.6",
-    "@angular-devkit/build-webpack": "0.1300.0-next.6",
-    "@angular-devkit/core": "13.0.0-next.6",
+    "@angular-devkit/architect": "0.1300.0-next.7",
+    "@angular-devkit/build-webpack": "0.1300.0-next.7",
+    "@angular-devkit/core": "13.0.0-next.7",
     "@babel/core": "7.15.5",
     "@babel/generator": "7.15.4",
     "@babel/helper-annotate-as-pure": "7.15.4",
@@ -21,7 +21,7 @@
     "@babel/template": "7.15.4",
     "@discoveryjs/json-ext": "0.5.5",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "13.0.0-next.6",
+    "@ngtools/webpack": "13.0.0-next.7",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.2",
     "browserslist": "^4.9.1",
@@ -29,12 +29,12 @@
     "caniuse-lite": "^1.0.30001032",
     "circular-dependency-plugin": "5.2.2",
     "copy-webpack-plugin": "9.0.1",
-    "core-js": "3.18.0",
+    "core-js": "3.18.1",
     "critters": "0.0.10",
     "css-loader": "6.3.0",
-    "esbuild-wasm": "0.12.29",
+    "esbuild-wasm": "0.13.3",
     "find-cache-dir": "3.3.2",
-    "glob": "7.1.7",
+    "glob": "7.2.0",
     "https-proxy-agent": "5.0.0",
     "inquirer": "8.1.5",
     "karma-source-map-support": "1.4.0",
@@ -48,7 +48,7 @@
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.1.0",
-    "postcss": "8.3.7",
+    "postcss": "8.3.8",
     "postcss-import": "14.0.2",
     "postcss-loader": "6.1.1",
     "postcss-preset-env": "6.7.0",
@@ -66,14 +66,14 @@
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.3.1",
-    "webpack": "5.53.0",
-    "webpack-dev-middleware": "5.1.0",
-    "webpack-dev-server": "4.2.1",
+    "webpack": "5.55.1",
+    "webpack-dev-middleware": "5.2.1",
+    "webpack-dev-server": "4.3.0",
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "5.0.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.12.28"
+    "esbuild": "0.13.3"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^13.0.0 || ^13.0.0-next",
@@ -83,7 +83,7 @@
     "ng-packagr": "^13.0.0 || ^13.0.0-next",
     "protractor": "^7.0.0",
     "tailwindcss": "^2.0.0",
-    "typescript": "~4.2.3 || ~4.3.2"
+    "typescript": "~4.4.3"
   },
   "peerDependenciesMeta": {
     "@angular/localize": {

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

@@ -208,7 +208,7 @@ function default_1() {
                     core_1.types.returnStatement(core_1.types.cloneNode(classNode.id)),
                 ]));
                 const replacementInitializer = core_1.types.callExpression(core_1.types.parenthesizedExpression(container), []);
-                helper_annotate_as_pure_1.default(replacementInitializer);
+                (0, helper_annotate_as_pure_1.default)(replacementInitializer);
                 // Replace class with IIFE wrapped class
                 const declaration = core_1.types.variableDeclaration('let', [
                     core_1.types.variableDeclarator(core_1.types.cloneNode(classNode.id), replacementInitializer),
@@ -264,7 +264,7 @@ function default_1() {
                     core_1.types.returnStatement(core_1.types.cloneNode(classNode.id)),
                 ]));
                 const replacementInitializer = core_1.types.callExpression(core_1.types.parenthesizedExpression(container), []);
-                helper_annotate_as_pure_1.default(replacementInitializer);
+                (0, helper_annotate_as_pure_1.default)(replacementInitializer);
                 // Add the wrapped class directly to the variable declaration
                 parentPath.get('init').replaceWith(replacementInitializer);
             },

package/src/babel/plugins/adjust-typescript-enums.js

@@ -68,9 +68,15 @@ function default_1() {
                 if (!enumCallee.isFunctionExpression() || enumCallee.node.params.length !== 1) {
                     return;
                 }
+                const enumCalleeParam = enumCallee.node.params[0];
+                const isEnumCalleeMatching = core_1.types.isIdentifier(enumCalleeParam) && enumCalleeParam.name === declarationId.name;
                 // Loose mode rewrites the enum to a shorter but less TypeScript-like form
+                // Note: We only can apply the `loose` mode transformation if the callee parameter matches
+                // with the declaration identifier name. This is necessary in case the the declaration id has
+                // been renamed to avoid collisions, as the loose transform would then break the enum assignments
+                // which rely on the differently-named callee identifier name.
                 let enumAssignments;
-                if (loose) {
+                if (loose && isEnumCalleeMatching) {
                     enumAssignments = [];
                 }
                 // Check if all enum member values are pure.
@@ -113,7 +119,7 @@ function default_1() {
                     core_1.types.returnStatement(core_1.types.cloneNode(declarationId)),
                 ]));
                 const replacementInitializer = core_1.types.callExpression(core_1.types.parenthesizedExpression(container), []);
-                helper_annotate_as_pure_1.default(replacementInitializer);
+                (0, helper_annotate_as_pure_1.default)(replacementInitializer);
                 // Add the wrapped enum initializer directly to the variable declaration
                 declaration.get('init').replaceWith(replacementInitializer);
             },

package/src/babel/plugins/pure-toplevel-functions.js

@@ -72,12 +72,12 @@ function default_1() {
                 if (core_1.types.isIdentifier(callee) && isTslibHelperName(callee.name)) {
                     return;
                 }
-                helper_annotate_as_pure_1.default(path);
+                (0, helper_annotate_as_pure_1.default)(path);
             },
             NewExpression(path) {
                 // If the expression has a function parent, it is not top-level
                 if (!path.getFunctionParent()) {
-                    helper_annotate_as_pure_1.default(path);
+                    (0, helper_annotate_as_pure_1.default)(path);
                 }
             },
         },

package/src/babel/presets/application.d.ts

@@ -6,15 +6,29 @@
  * found in the LICENSE file at https://angular.io/license
  */
 export declare type DiagnosticReporter = (type: 'error' | 'warning' | 'info', message: string) => void;
+/**
+ * An interface representing the factory functions for the `@angular/localize` translation Babel plugins.
+ * This must be provided for the ESM imports since dynamic imports are required to be asynchronous and
+ * Babel presets currently can only be synchronous.
+ *
+ * TODO_ESM: Remove all deep imports once `@angular/localize` is published with the `tools` entry point
+ */
+export interface I18nPluginCreators {
+    makeEs2015TranslatePlugin: typeof import('@angular/localize/src/tools/src/translate/source_files/es2015_translate_plugin').makeEs2015TranslatePlugin;
+    makeEs5TranslatePlugin: typeof import('@angular/localize/src/tools/src/translate/source_files/es5_translate_plugin').makeEs5TranslatePlugin;
+    makeLocalePlugin: typeof import('@angular/localize/src/tools/src/translate/source_files/locale_plugin').makeLocalePlugin;
+}
 export interface ApplicationPresetOptions {
     i18n?: {
         locale: string;
         missingTranslationBehavior?: 'error' | 'warning' | 'ignore';
         translation?: unknown;
+        pluginCreators?: I18nPluginCreators;
     };
     angularLinker?: {
         shouldLink: boolean;
         jitMode: boolean;
+        linkerPluginCreator: typeof import('@angular/compiler-cli/linker/babel').createEs2015LinkerPlugin;
     };
     forceES5?: boolean;
     forceAsyncTransformation?: boolean;

package/src/babel/presets/application.js

@@ -26,54 +26,62 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const assert_1 = require("assert");
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 function createI18nDiagnostics(reporter) {
-    // Babel currently is synchronous so import cannot be used
-    const diagnostics = new (require('@angular/localize/src/tools/src/diagnostics').Diagnostics)();
-    if (!reporter) {
-        return diagnostics;
-    }
-    const baseAdd = diagnostics.add;
-    diagnostics.add = function (type, message, ...args) {
-        if (type !== 'ignore') {
-            baseAdd.call(diagnostics, type, message, ...args);
-            reporter(type, message);
+    const diagnostics = new (class {
+        constructor() {
+            this.messages = [];
+            this.hasErrors = false;
         }
-    };
-    const baseError = diagnostics.error;
-    diagnostics.error = function (message, ...args) {
-        baseError.call(diagnostics, message, ...args);
-        reporter('error', message);
-    };
-    const baseWarn = diagnostics.warn;
-    diagnostics.warn = function (message, ...args) {
-        baseWarn.call(diagnostics, message, ...args);
-        reporter('warning', message);
-    };
-    const baseMerge = diagnostics.merge;
-    diagnostics.merge = function (other, ...args) {
-        baseMerge.call(diagnostics, other, ...args);
-        for (const diagnostic of other.messages) {
-            reporter(diagnostic.type, diagnostic.message);
+        add(type, message) {
+            if (type === 'ignore') {
+                return;
+            }
+            this.messages.push({ type, message });
+            this.hasErrors || (this.hasErrors = type === 'error');
+            reporter === null || reporter === void 0 ? void 0 : reporter(type, message);
         }
-    };
+        error(message) {
+            this.add('error', message);
+        }
+        warn(message) {
+            this.add('warning', message);
+        }
+        merge(other) {
+            for (const diagnostic of other.messages) {
+                this.add(diagnostic.type, diagnostic.message);
+            }
+        }
+        formatDiagnostics() {
+            assert_1.strict.fail('@angular/localize Diagnostics formatDiagnostics should not be called from within babel.');
+        }
+    })();
     return diagnostics;
 }
-function createI18nPlugins(locale, translation, missingTranslationBehavior, diagnosticReporter) {
+function createI18nPlugins(locale, translation, missingTranslationBehavior, diagnosticReporter, 
+// TODO_ESM: Make `pluginCreators` required once `@angular/localize` is published with the `tools` entry point
+pluginCreators) {
     const diagnostics = createI18nDiagnostics(diagnosticReporter);
     const plugins = [];
     if (translation) {
-        const { makeEs2015TranslatePlugin, } = require('@angular/localize/src/tools/src/translate/source_files/es2015_translate_plugin');
+        const { makeEs2015TranslatePlugin,
+        // TODO_ESM: Remove all deep imports once `@angular/localize` is published with the `tools` entry point
+         } = pluginCreators !== null && pluginCreators !== void 0 ? pluginCreators : require('@angular/localize/src/tools/src/translate/source_files/es2015_translate_plugin');
         plugins.push(makeEs2015TranslatePlugin(diagnostics, translation, {
             missingTranslation: missingTranslationBehavior,
         }));
-        const { makeEs5TranslatePlugin, } = require('@angular/localize/src/tools/src/translate/source_files/es5_translate_plugin');
+        const { makeEs5TranslatePlugin,
+        // TODO_ESM: Remove all deep imports once `@angular/localize` is published with the `tools` entry point
+         } = pluginCreators !== null && pluginCreators !== void 0 ? pluginCreators : require('@angular/localize/src/tools/src/translate/source_files/es5_translate_plugin');
         plugins.push(makeEs5TranslatePlugin(diagnostics, translation, {
             missingTranslation: missingTranslationBehavior,
         }));
     }
-    const { makeLocalePlugin, } = require('@angular/localize/src/tools/src/translate/source_files/locale_plugin');
+    const { makeLocalePlugin,
+    // TODO_ESM: Remove all deep imports once `@angular/localize` is published with the `tools` entry point
+     } = pluginCreators !== null && pluginCreators !== void 0 ? pluginCreators : require('@angular/localize/src/tools/src/translate/source_files/locale_plugin');
     plugins.push(makeLocalePlugin(locale));
     return plugins;
 }
@@ -98,9 +106,7 @@ function default_1(api, options) {
     const plugins = [];
     let needRuntimeTransform = false;
     if ((_a = options.angularLinker) === null || _a === void 0 ? void 0 : _a.shouldLink) {
-        // Babel currently is synchronous so import cannot be used
-        const { createEs2015LinkerPlugin } = require('@angular/compiler-cli/linker/babel');
-        plugins.push(createEs2015LinkerPlugin({
+        plugins.push(options.angularLinker.linkerPluginCreator({
             linkerJitMode: options.angularLinker.jitMode,
             // This is a workaround until https://github.com/angular/angular/issues/42769 is fixed.
             sourceMapping: false,
@@ -130,8 +136,8 @@ function default_1(api, options) {
         needRuntimeTransform = true;
     }
     if (options.i18n) {
-        const { locale, missingTranslationBehavior, translation } = options.i18n;
-        const i18nPlugins = createI18nPlugins(locale, translation, missingTranslationBehavior || 'ignore', options.diagnosticReporter);
+        const { locale, missingTranslationBehavior, pluginCreators, translation } = options.i18n;
+        const i18nPlugins = createI18nPlugins(locale, translation, missingTranslationBehavior || 'ignore', options.diagnosticReporter, pluginCreators);
         plugins.push(...i18nPlugins);
     }
     if (options.forceAsyncTransformation) {

package/src/babel/webpack-loader.js

@@ -7,18 +7,37 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-const linker_1 = require("@angular/compiler-cli/linker");
 const babel_loader_1 = require("babel-loader");
 const typescript_1 = require("typescript");
-function requiresLinking(path, source) {
+const load_esm_1 = require("../utils/load-esm");
+/**
+ * Cached instance of the compiler-cli linker's needsLinking function.
+ */
+let needsLinking;
+/**
+ * Cached instance of the compiler-cli linker's Babel plugin factory function.
+ */
+let linkerPluginCreator;
+/**
+ * Cached instance of the localize Babel plugins factory functions.
+ */
+let i18nPluginCreators;
+async function requiresLinking(path, source) {
     // @angular/core and @angular/compiler will cause false positives
     // Also, TypeScript files do not require linking
     if (/[\\/]@angular[\\/](?:compiler|core)|\.tsx?$/.test(path)) {
         return false;
     }
-    return linker_1.needsLinking(path, source);
+    if (!needsLinking) {
+        // Load ESM `@angular/compiler-cli/linker` using the TypeScript dynamic import workaround.
+        // Once TypeScript provides support for keeping the dynamic import this workaround can be
+        // changed to a direct dynamic import.
+        const linkerModule = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli/linker');
+        needsLinking = linkerModule.needsLinking;
+    }
+    return needsLinking(path, source);
 }
-exports.default = babel_loader_1.custom(() => {
+exports.default = (0, babel_loader_1.custom)(() => {
     const baseOptions = Object.freeze({
         babelrc: false,
         configFile: false,
@@ -40,9 +59,17 @@ exports.default = babel_loader_1.custom(() => {
             };
             // Analyze file for linking
             if (await requiresLinking(this.resourcePath, source)) {
+                if (!linkerPluginCreator) {
+                    // Load ESM `@angular/compiler-cli/linker/babel` using the TypeScript dynamic import workaround.
+                    // Once TypeScript provides support for keeping the dynamic import this workaround can be
+                    // changed to a direct dynamic import.
+                    const linkerBabelModule = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli/linker/babel');
+                    linkerPluginCreator = linkerBabelModule.createEs2015LinkerPlugin;
+                }
                 customOptions.angularLinker = {
                     shouldLink: true,
                     jitMode: aot !== true,
+                    linkerPluginCreator,
                 };
                 shouldProcess = true;
             }
@@ -66,7 +93,25 @@ exports.default = babel_loader_1.custom(() => {
             if (i18n &&
                 !/[\\/]@angular[\\/](?:compiler|localize)/.test(this.resourcePath) &&
                 source.includes('$localize')) {
-                customOptions.i18n = i18n;
+                // Load the i18n plugin creators from the new `@angular/localize/tools` entry point.
+                // This may fail during the transition to ESM due to the entry point not yet existing.
+                // During the transition, this will always attempt to load the entry point for each file.
+                // This will only occur during prerelease and will be automatically corrected once the new
+                // entry point exists.
+                // TODO_ESM: Make import failure an error once the `tools` entry point exists.
+                if (i18nPluginCreators === undefined) {
+                    // Load ESM `@angular/localize/tools` using the TypeScript dynamic import workaround.
+                    // Once TypeScript provides support for keeping the dynamic import this workaround can be
+                    // changed to a direct dynamic import.
+                    try {
+                        i18nPluginCreators = await (0, load_esm_1.loadEsmModule)('@angular/localize/tools');
+                    }
+                    catch { }
+                }
+                customOptions.i18n = {
+                    ...i18n,
+                    pluginCreators: i18nPluginCreators,
+                };
                 shouldProcess = true;
             }
             if (optimize) {

package/src/builders/app-shell/index.js

@@ -36,7 +36,7 @@ const service_worker_1 = require("../../utils/service-worker");
 const spinner_1 = require("../../utils/spinner");
 async function _renderUniversal(options, context, browserResult, serverResult, spinner) {
     // Get browser target options.
-    const browserTarget = architect_1.targetFromTargetString(options.browserTarget);
+    const browserTarget = (0, architect_1.targetFromTargetString)(options.browserTarget);
     const rawBrowserOptions = (await context.getTargetOptions(browserTarget));
     const browserBuilderName = await context.getBuilderNameForTarget(browserTarget);
     const browserOptions = await context.validateOptions(rawBrowserOptions, browserBuilderName);
@@ -49,8 +49,8 @@ async function _renderUniversal(options, context, browserResult, serverResult, s
         throw new Error('The builder requires a target.');
     }
     const projectMetadata = await context.getProjectMetadata(projectName);
-    const projectRoot = core_1.resolve(core_1.normalize(root), core_1.normalize(projectMetadata.root || ''));
-    const { styles } = utils_1.normalizeOptimization(browserOptions.optimization);
+    const projectRoot = (0, core_1.resolve)((0, core_1.normalize)(root), (0, core_1.normalize)(projectMetadata.root || ''));
+    const { styles } = (0, utils_1.normalizeOptimization)(browserOptions.optimization);
     const inlineCriticalCssProcessor = styles.inlineCritical
         ? new inline_critical_css_1.InlineCriticalCssProcessor({
             minify: styles.minify,
@@ -91,7 +91,7 @@ async function _renderUniversal(options, context, browserResult, serverResult, s
         }
         await fs.promises.writeFile(outputIndexPath, html);
         if (browserOptions.serviceWorker) {
-            await service_worker_1.augmentAppWithServiceWorker(core_1.normalize(root), projectRoot, core_1.normalize(outputPath), browserOptions.baseHref || '/', browserOptions.ngswConfigPath);
+            await (0, service_worker_1.augmentAppWithServiceWorker)((0, core_1.normalize)(root), projectRoot, (0, core_1.normalize)(outputPath), browserOptions.baseHref || '/', browserOptions.ngswConfigPath);
         }
     }
     return browserResult;
@@ -105,7 +105,7 @@ async function _getServerModuleBundlePath(options, context, serverResult, browse
     if (!fs.existsSync(outputPath)) {
         throw new Error(`Could not find server output directory: ${outputPath}.`);
     }
-    const re = /^main\.(?:[a-zA-Z0-9]{20}\.)?js$/;
+    const re = /^main\.(?:[a-zA-Z0-9]{16}\.)?js$/;
     const maybeMain = fs.readdirSync(outputPath).find((x) => re.test(x));
     if (!maybeMain) {
         throw new Error('Could not find the main bundle.');
@@ -113,12 +113,12 @@ async function _getServerModuleBundlePath(options, context, serverResult, browse
     return path.join(outputPath, maybeMain);
 }
 async function _appShellBuilder(options, context) {
-    const browserTarget = architect_1.targetFromTargetString(options.browserTarget);
-    const serverTarget = architect_1.targetFromTargetString(options.serverTarget);
+    const browserTarget = (0, architect_1.targetFromTargetString)(options.browserTarget);
+    const serverTarget = (0, architect_1.targetFromTargetString)(options.serverTarget);
     // Never run the browser target in watch mode.
     // If service worker is needed, it will be added in _renderUniversal();
     const browserOptions = (await context.getTargetOptions(browserTarget));
-    const optimization = utils_1.normalizeOptimization(browserOptions.optimization);
+    const optimization = (0, utils_1.normalizeOptimization)(browserOptions.optimization);
     optimization.styles.inlineCritical = false;
     const browserTargetRun = await context.scheduleTarget(browserTarget, {
         watch: false,
@@ -154,4 +154,4 @@ async function _appShellBuilder(options, context) {
         await Promise.all([browserTargetRun.stop(), serverTargetRun.stop()]);
     }
 }
-exports.default = architect_1.createBuilder(_appShellBuilder);
+exports.default = (0, architect_1.createBuilder)(_appShellBuilder);