@angular-devkit/build-angular 18.0.0-next.2 → 18.0.0-next.3

package/src/utils/i18n-webpack.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @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 { BuilderContext } from '@angular-devkit/architect';
+import { Schema as BrowserBuilderSchema } from '../builders/browser/schema';
+import { Schema as ServerBuilderSchema } from '../builders/server/schema';
+import { I18nOptions, loadTranslations } from './i18n-options';
+export { I18nOptions, loadTranslations };
+export declare function configureI18nBuild<T extends BrowserBuilderSchema | ServerBuilderSchema>(context: BuilderContext, options: T): Promise<{
+    buildOptions: T;
+    i18n: I18nOptions;
+}>;

package/src/utils/i18n-webpack.js

@@ -0,0 +1,108 @@
+"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
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configureI18nBuild = exports.loadTranslations = void 0;
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_module_1 = require("node:module");
+const node_os_1 = __importDefault(require("node:os"));
+const node_path_1 = __importDefault(require("node:path"));
+const read_tsconfig_1 = require("../utils/read-tsconfig");
+const i18n_options_1 = require("./i18n-options");
+Object.defineProperty(exports, "loadTranslations", { enumerable: true, get: function () { return i18n_options_1.loadTranslations; } });
+const load_translations_1 = require("./load-translations");
+/**
+ * The base module location used to search for locale specific data.
+ */
+const LOCALE_DATA_BASE_MODULE = '@angular/common/locales/global';
+async function configureI18nBuild(context, options) {
+    if (!context.target) {
+        throw new Error('The builder requires a target.');
+    }
+    const buildOptions = { ...options };
+    const tsConfig = await (0, read_tsconfig_1.readTsconfig)(buildOptions.tsConfig, context.workspaceRoot);
+    const metadata = await context.getProjectMetadata(context.target);
+    const i18n = (0, i18n_options_1.createI18nOptions)(metadata, buildOptions.localize);
+    // No additional processing needed if no inlining requested and no source locale defined.
+    if (!i18n.shouldInline && !i18n.hasDefinedSourceLocale) {
+        return { buildOptions, i18n };
+    }
+    const projectRoot = node_path_1.default.join(context.workspaceRoot, metadata.root || '');
+    // The trailing slash is required to signal that the path is a directory and not a file.
+    const projectRequire = (0, node_module_1.createRequire)(projectRoot + '/');
+    const localeResolver = (locale) => projectRequire.resolve(node_path_1.default.join(LOCALE_DATA_BASE_MODULE, locale));
+    // Load locale data and translations (if present)
+    let loader;
+    const usedFormats = new Set();
+    for (const [locale, desc] of Object.entries(i18n.locales)) {
+        if (!i18n.inlineLocales.has(locale) && locale !== i18n.sourceLocale) {
+            continue;
+        }
+        let localeDataPath = findLocaleDataPath(locale, localeResolver);
+        if (!localeDataPath) {
+            const [first] = locale.split('-');
+            if (first) {
+                localeDataPath = findLocaleDataPath(first.toLowerCase(), localeResolver);
+                if (localeDataPath) {
+                    context.logger.warn(`Locale data for '${locale}' cannot be found. Using locale data for '${first}'.`);
+                }
+            }
+        }
+        if (!localeDataPath) {
+            context.logger.warn(`Locale data for '${locale}' cannot be found. No locale data will be included for this locale.`);
+        }
+        else {
+            desc.dataPath = localeDataPath;
+        }
+        if (!desc.files.length) {
+            continue;
+        }
+        loader ??= await (0, load_translations_1.createTranslationLoader)();
+        (0, i18n_options_1.loadTranslations)(locale, desc, context.workspaceRoot, loader, {
+            warn(message) {
+                context.logger.warn(message);
+            },
+            error(message) {
+                throw new Error(message);
+            },
+        }, usedFormats, buildOptions.i18nDuplicateTranslation);
+        if (usedFormats.size > 1 && tsConfig.options.enableI18nLegacyMessageIdFormat !== false) {
+            // This limitation is only for legacy message id support (defaults to true as of 9.0)
+            throw new Error('Localization currently only supports using one type of translation file format for the entire application.');
+        }
+    }
+    // If inlining store the output in a temporary location to facilitate post-processing
+    if (i18n.shouldInline) {
+        // TODO: we should likely save these in the .angular directory in the next major version.
+        // We'd need to do a migration to add the temp directory to gitignore.
+        const tempPath = node_fs_1.default.mkdtempSync(node_path_1.default.join(node_fs_1.default.realpathSync(node_os_1.default.tmpdir()), 'angular-cli-i18n-'));
+        buildOptions.outputPath = tempPath;
+        process.on('exit', () => {
+            try {
+                node_fs_1.default.rmSync(tempPath, { force: true, recursive: true, maxRetries: 3 });
+            }
+            catch { }
+        });
+    }
+    return { buildOptions, i18n };
+}
+exports.configureI18nBuild = configureI18nBuild;
+function findLocaleDataPath(locale, resolver) {
+    // Remove private use subtags
+    const scrubbedLocale = locale.replace(/-x(-[a-zA-Z0-9]{1,8})+$/, '');
+    try {
+        return resolver(scrubbedLocale);
+    }
+    catch {
+        // fallback to known existing en-US locale data as of 14.0
+        return scrubbedLocale === 'en-US' ? findLocaleDataPath('en', resolver) : null;
+    }
+}

package/src/utils/index-file/add-event-dispatch-contract.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @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
+ */
+export declare function addEventDispatchContract(html: string): Promise<string>;

package/src/utils/index-file/add-event-dispatch-contract.js

@@ -0,0 +1,28 @@
+"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.addEventDispatchContract = void 0;
+const promises_1 = require("node:fs/promises");
+const html_rewriting_stream_1 = require("./html-rewriting-stream");
+let jsActionContractScript;
+async function addEventDispatchContract(html) {
+    const { rewriter, transformedContent } = await (0, html_rewriting_stream_1.htmlRewritingStream)(html);
+    jsActionContractScript ??=
+        '<script type="text/javascript" id="ng-event-dispatch-contract">' +
+            (await (0, promises_1.readFile)(require.resolve('@angular/core/event-dispatch-contract.min.js'), 'utf-8')) +
+            '</script>';
+    rewriter.on('startTag', (tag) => {
+        rewriter.emitStartTag(tag);
+        if (tag.tagName === 'body') {
+            rewriter.emitRaw(jsActionContractScript);
+        }
+    });
+    return transformedContent();
+}
+exports.addEventDispatchContract = addEventDispatchContract;

package/src/utils/index-file/augment-index-html.js

@@ -152,6 +152,7 @@ async function augmentIndexHtml(params) {
                         foundPreconnects.add(href);
                     }
                 }
+                break;
         }
         rewriter.emitStartTag(tag);
     })

package/src/utils/index-file/index-html-generator.d.ts

@@ -30,18 +30,28 @@ export interface IndexHtmlGeneratorOptions {
     optimization?: NormalizedOptimizationOptions;
     cache?: NormalizedCachedOptions;
     imageDomains?: string[];
+    generateDedicatedSSRContent?: boolean;
 }
 export type IndexHtmlTransform = (content: string) => Promise<string>;
-export interface IndexHtmlTransformResult {
+export interface IndexHtmlPluginTransformResult {
     content: string;
     warnings: string[];
     errors: string[];
 }
+export interface IndexHtmlProcessResult {
+    csrContent: string;
+    ssrContent?: string;
+    warnings: string[];
+    errors: string[];
+}
 export declare class IndexHtmlGenerator {
     readonly options: IndexHtmlGeneratorOptions;
     private readonly plugins;
+    private readonly csrPlugins;
+    private readonly ssrPlugins;
     constructor(options: IndexHtmlGeneratorOptions);
-    process(options: IndexHtmlGeneratorProcessOptions): Promise<IndexHtmlTransformResult>;
+    process(options: IndexHtmlGeneratorProcessOptions): Promise<IndexHtmlProcessResult>;
+    private runPlugins;
     readAsset(path: string): Promise<string>;
     protected readIndex(path: string): Promise<string>;
 }

package/src/utils/index-file/index-html-generator.js

@@ -10,36 +10,53 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IndexHtmlGenerator = void 0;
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
+const add_event_dispatch_contract_1 = require("./add-event-dispatch-contract");
 const augment_index_html_1 = require("./augment-index-html");
 const inline_critical_css_1 = require("./inline-critical-css");
 const inline_fonts_1 = require("./inline-fonts");
-const style_nonce_1 = require("./style-nonce");
+const nonce_1 = require("./nonce");
 class IndexHtmlGenerator {
     options;
     plugins;
+    csrPlugins = [];
+    ssrPlugins = [];
     constructor(options) {
         this.options = options;
-        const extraPlugins = [];
-        if (this.options.optimization?.fonts.inline) {
-            extraPlugins.push(inlineFontsPlugin(this));
+        const extraCommonPlugins = [];
+        if (options?.optimization?.fonts.inline) {
+            extraCommonPlugins.push(inlineFontsPlugin(this), nonce_1.addNonce);
         }
-        if (this.options.optimization?.styles.inlineCritical) {
-            extraPlugins.push(inlineCriticalCssPlugin(this));
+        // Common plugins
+        this.plugins = [augmentIndexHtmlPlugin(this), ...extraCommonPlugins, postTransformPlugin(this)];
+        // CSR plugins
+        if (options?.optimization?.styles?.inlineCritical) {
+            this.csrPlugins.push(inlineCriticalCssPlugin(this));
+        }
+        // SSR plugins
+        if (options.generateDedicatedSSRContent) {
+            this.ssrPlugins.push(addEventDispatchContractPlugin(), addNoncePlugin());
         }
-        this.plugins = [
-            augmentIndexHtmlPlugin(this),
-            ...extraPlugins,
-            // Runs after the `extraPlugins` to capture any nonce or
-            // `style` tags that might've been added by them.
-            addStyleNoncePlugin(),
-            postTransformPlugin(this),
-        ];
     }
     async process(options) {
         let content = await this.readIndex(this.options.indexPath);
         const warnings = [];
         const errors = [];
-        for (const plugin of this.plugins) {
+        content = await this.runPlugins(content, this.plugins, options, warnings, errors);
+        const [csrContent, ssrContent] = await Promise.all([
+            this.runPlugins(content, this.csrPlugins, options, warnings, errors),
+            this.ssrPlugins.length
+                ? this.runPlugins(content, this.ssrPlugins, options, warnings, errors)
+                : undefined,
+        ]);
+        return {
+            ssrContent,
+            csrContent,
+            warnings,
+            errors,
+        };
+    }
+    async runPlugins(content, plugins, options, warnings, errors) {
+        for (const plugin of plugins) {
             const result = await plugin(content, options);
             if (typeof result === 'string') {
                 content = result;
@@ -54,11 +71,7 @@ class IndexHtmlGenerator {
                 }
             }
         }
-        return {
-            content,
-            warnings,
-            errors,
-        };
+        return content;
     }
     async readAsset(path) {
         try {
@@ -111,9 +124,12 @@ function inlineCriticalCssPlugin(generator) {
     });
     return async (html, options) => inlineCriticalCssProcessor.process(html, { outputPath: options.outputPath });
 }
-function addStyleNoncePlugin() {
-    return (html) => (0, style_nonce_1.addStyleNonce)(html);
+function addNoncePlugin() {
+    return (html) => (0, nonce_1.addNonce)(html);
 }
 function postTransformPlugin({ options }) {
     return async (html) => (options.postTransform ? options.postTransform(html) : html);
 }
+function addEventDispatchContractPlugin() {
+    return (html) => (0, add_event_dispatch_contract_1.addEventDispatchContract)(html);
+}

package/src/utils/index-file/inline-fonts.js

@@ -143,7 +143,7 @@ class InlineFontsProcessor {
                     if (hrefAttr) {
                         const href = hrefAttr.value;
                         const cssContent = hrefsContent.get(href);
-                        rewriter.emitRaw(`<style type="text/css">${cssContent}</style>`);
+                        rewriter.emitRaw(`<style>${cssContent}</style>`);
                     }
                     else {
                         rewriter.emitStartTag(tag);

package/src/utils/index-file/{style-nonce.d.ts → nonce.d.ts}

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 /**
- * Finds the `ngCspNonce` value and copies it to all inline `<style>` tags.
+ * Finds the `ngCspNonce` value and copies it to all inline `<style>` and `<script> `tags.
  * @param html Markup that should be processed.
  */
-export declare function addStyleNonce(html: string): Promise<string>;
+export declare function addNonce(html: string): Promise<string>;

package/src/utils/index-file/{style-nonce.js → nonce.js}

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addStyleNonce = void 0;
+exports.addNonce = void 0;
 const html_rewriting_stream_1 = require("./html-rewriting-stream");
 /**
  * Pattern matching the name of the Angular nonce attribute. Note that this is
@@ -15,24 +15,26 @@ const html_rewriting_stream_1 = require("./html-rewriting-stream");
  */
 const NONCE_ATTR_PATTERN = /ngCspNonce/i;
 /**
- * Finds the `ngCspNonce` value and copies it to all inline `<style>` tags.
+ * Finds the `ngCspNonce` value and copies it to all inline `<style>` and `<script> `tags.
  * @param html Markup that should be processed.
  */
-async function addStyleNonce(html) {
+async function addNonce(html) {
     const nonce = await findNonce(html);
     if (!nonce) {
         return html;
     }
     const { rewriter, transformedContent } = await (0, html_rewriting_stream_1.htmlRewritingStream)(html);
     rewriter.on('startTag', (tag) => {
-        if (tag.tagName === 'style' && !tag.attrs.some((attr) => attr.name === 'nonce')) {
+        if ((tag.tagName === 'style' ||
+            (tag.tagName === 'script' && !tag.attrs.some((attr) => attr.name === 'src'))) &&
+            !tag.attrs.some((attr) => attr.name === 'nonce')) {
             tag.attrs.push({ name: 'nonce', value: nonce });
         }
         rewriter.emitStartTag(tag);
     });
     return transformedContent();
 }
-exports.addStyleNonce = addStyleNonce;
+exports.addNonce = addNonce;
 /** Finds the Angular nonce in an HTML string. */
 async function findNonce(html) {
     // Inexpensive check to avoid parsing the HTML when we're sure there's no nonce.

package/src/utils/load-proxy-config.d.ts

@@ -5,4 +5,4 @@
  * 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 loadProxyConfiguration(root: string, proxyConfig: string | undefined, normalize?: boolean): Promise<any>;
+export declare function loadProxyConfiguration(root: string, proxyConfig: string | undefined): Promise<Record<string, object> | undefined>;

package/src/utils/load-proxy-config.js

@@ -39,7 +39,7 @@ const node_url_1 = require("node:url");
 const picomatch_1 = require("picomatch");
 const error_1 = require("./error");
 const load_esm_1 = require("./load-esm");
-async function loadProxyConfiguration(root, proxyConfig, normalize = false) {
+async function loadProxyConfiguration(root, proxyConfig) {
     if (!proxyConfig) {
         return undefined;
     }
@@ -94,10 +94,7 @@ async function loadProxyConfiguration(root, proxyConfig, normalize = false) {
                 throw e;
             }
     }
-    if (normalize) {
-        proxyConfiguration = normalizeProxyConfiguration(proxyConfiguration);
-    }
-    return proxyConfiguration;
+    return normalizeProxyConfiguration(proxyConfiguration);
 }
 exports.loadProxyConfiguration = loadProxyConfiguration;
 /**

package/src/utils/normalize-cache.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeCacheOptions = void 0;
 const node_path_1 = require("node:path");
 /** Version placeholder is replaced during the build process with actual package version */
-const VERSION = '18.0.0-next.2';
+const VERSION = '18.0.0-next.3';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&

package/src/utils/output-paths.d.ts

@@ -5,5 +5,5 @@
  * 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 { I18nOptions } from './i18n-options';
+import { I18nOptions } from './i18n-webpack';
 export declare function ensureOutputPaths(baseOutputPath: string, i18n: I18nOptions): Map<string, string>;

package/src/utils/resolve-assets.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @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
+ */
+export declare function resolveAssets(entries: {
+    glob: string;
+    ignore?: string[];
+    input: string;
+    output: string;
+    flatten?: boolean;
+    followSymlinks?: boolean;
+}[], root: string): Promise<{
+    source: string;
+    destination: string;
+}[]>;

package/src/utils/resolve-assets.js

@@ -0,0 +1,35 @@
+"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
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveAssets = void 0;
+const fast_glob_1 = __importDefault(require("fast-glob"));
+const node_path_1 = __importDefault(require("node:path"));
+async function resolveAssets(entries, root) {
+    const defaultIgnore = ['.gitkeep', '**/.DS_Store', '**/Thumbs.db'];
+    const outputFiles = [];
+    for (const entry of entries) {
+        const cwd = node_path_1.default.resolve(root, entry.input);
+        const files = await (0, fast_glob_1.default)(entry.glob, {
+            cwd,
+            dot: true,
+            ignore: entry.ignore ? defaultIgnore.concat(entry.ignore) : defaultIgnore,
+            followSymbolicLinks: entry.followSymlinks,
+        });
+        for (const file of files) {
+            const src = node_path_1.default.join(cwd, file);
+            const filePath = entry.flatten ? node_path_1.default.basename(file) : file;
+            outputFiles.push({ source: src, destination: node_path_1.default.join(entry.output, filePath) });
+        }
+    }
+    return outputFiles;
+}
+exports.resolveAssets = resolveAssets;

package/src/utils/stats-table.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 { BudgetCalculatorResult } from './bundle-calculator';
+export type BundleStatsData = [
+    files: string,
+    names: string,
+    rawSize: number | string,
+    estimatedTransferSize: number | string
+];
+export interface BundleStats {
+    initial: boolean;
+    stats: BundleStatsData;
+}
+export declare function generateEsbuildBuildStatsTable([browserStats, serverStats]: [browserStats: BundleStats[], serverStats: BundleStats[]], colors: boolean, showTotalSize: boolean, showEstimatedTransferSize: boolean, budgetFailures?: BudgetCalculatorResult[], verbose?: boolean): string;
+export declare function generateBuildStatsTable(data: BundleStats[], colors: boolean, showTotalSize: boolean, showEstimatedTransferSize: boolean, budgetFailures?: BudgetCalculatorResult[]): string;