@angular-devkit/build-angular 13.1.0-next.0 → 13.1.0-rc.0

package/src/utils/i18n-options.js

@@ -10,7 +10,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.configureI18nBuild = exports.createI18nOptions = void 0;
+exports.loadTranslations = exports.configureI18nBuild = exports.createI18nOptions = void 0;
 const core_1 = require("@angular-devkit/core");
 const fs_1 = __importDefault(require("fs"));
 const module_1 = __importDefault(require("module"));
@@ -158,42 +158,18 @@ async function configureI18nBuild(context, options) {
         if (!desc.files.length) {
             continue;
         }
-        if (!loader) {
-            loader = await (0, load_translations_1.createTranslationLoader)();
-        }
-        for (const file of desc.files) {
-            const loadResult = loader(path_1.default.join(context.workspaceRoot, file.path));
-            for (const diagnostics of loadResult.diagnostics.messages) {
-                if (diagnostics.type === 'error') {
-                    throw new Error(`Error parsing translation file '${file.path}': ${diagnostics.message}`);
-                }
-                else {
-                    context.logger.warn(`WARNING [${file.path}]: ${diagnostics.message}`);
-                }
-            }
-            if (loadResult.locale !== undefined && loadResult.locale !== locale) {
-                context.logger.warn(`WARNING [${file.path}]: File target locale ('${loadResult.locale}') does not match configured locale ('${locale}')`);
-            }
-            usedFormats.add(loadResult.format);
-            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.');
-            }
-            file.format = loadResult.format;
-            file.integrity = loadResult.integrity;
-            if (desc.translation) {
-                // Merge translations
-                for (const [id, message] of Object.entries(loadResult.translations)) {
-                    if (desc.translation[id] !== undefined) {
-                        context.logger.warn(`WARNING [${file.path}]: Duplicate translations for message '${id}' when merging`);
-                    }
-                    desc.translation[id] = message;
-                }
-            }
-            else {
-                // First or only translation file
-                desc.translation = loadResult.translations;
-            }
+        loader !== null && loader !== void 0 ? loader : (loader = await (0, load_translations_1.createTranslationLoader)());
+        loadTranslations(locale, desc, context.workspaceRoot, loader, {
+            warn(message) {
+                context.logger.warn(message);
+            },
+            error(message) {
+                throw new Error(message);
+            },
+        }, usedFormats);
+        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
@@ -225,3 +201,36 @@ function findLocaleDataPath(locale, resolver) {
         return null;
     }
 }
+function loadTranslations(locale, desc, workspaceRoot, loader, logger, usedFormats) {
+    for (const file of desc.files) {
+        const loadResult = loader(path_1.default.join(workspaceRoot, file.path));
+        for (const diagnostics of loadResult.diagnostics.messages) {
+            if (diagnostics.type === 'error') {
+                logger.error(`Error parsing translation file '${file.path}': ${diagnostics.message}`);
+            }
+            else {
+                logger.warn(`WARNING [${file.path}]: ${diagnostics.message}`);
+            }
+        }
+        if (loadResult.locale !== undefined && loadResult.locale !== locale) {
+            logger.warn(`WARNING [${file.path}]: File target locale ('${loadResult.locale}') does not match configured locale ('${locale}')`);
+        }
+        usedFormats === null || usedFormats === void 0 ? void 0 : usedFormats.add(loadResult.format);
+        file.format = loadResult.format;
+        file.integrity = loadResult.integrity;
+        if (desc.translation) {
+            // Merge translations
+            for (const [id, message] of Object.entries(loadResult.translations)) {
+                if (desc.translation[id] !== undefined) {
+                    logger.warn(`WARNING [${file.path}]: Duplicate translations for message '${id}' when merging`);
+                }
+                desc.translation[id] = message;
+            }
+        }
+        else {
+            // First or only translation file
+            desc.translation = loadResult.translations;
+        }
+    }
+}
+exports.loadTranslations = loadTranslations;

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

@@ -27,4 +27,8 @@ export interface FileInfo {
     name: string;
     extension: string;
 }
-export declare function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise<string>;
+export declare function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise<{
+    content: string;
+    warnings: string[];
+    errors: string[];
+}>;

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

@@ -9,6 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.augmentIndexHtml = void 0;
 const crypto_1 = require("crypto");
+const load_esm_1 = require("../load-esm");
 const html_rewriting_stream_1 = require("./html-rewriting-stream");
 /*
  * Helper function used by the IndexHtmlWebpackPlugin.
@@ -18,6 +19,8 @@ const html_rewriting_stream_1 = require("./html-rewriting-stream");
  */
 async function augmentIndexHtml(params) {
     const { loadOutputFile, files, entrypoints, sri, deployUrl = '', lang, baseHref, html } = params;
+    const warnings = [];
+    const errors = [];
     let { crossOrigin = 'none' } = params;
     if (sri && crossOrigin === 'none') {
         crossOrigin = 'anonymous';
@@ -72,6 +75,7 @@ async function augmentIndexHtml(params) {
         }
         linkTags.push(`<link ${attrs.join(' ')}>`);
     }
+    const dir = lang ? await getLanguageDirection(lang, warnings) : undefined;
     const { rewriter, transformedContent } = await (0, html_rewriting_stream_1.htmlRewritingStream)(html);
     const baseTagExists = html.includes('<base');
     rewriter
@@ -82,6 +86,9 @@ async function augmentIndexHtml(params) {
                 if (isString(lang)) {
                     updateAttribute(tag, 'lang', lang);
                 }
+                if (dir) {
+                    updateAttribute(tag, 'dir', dir);
+                }
                 break;
             case 'head':
                 // Base href should be added before any link, meta tags
@@ -119,11 +126,14 @@ async function augmentIndexHtml(params) {
         rewriter.emitEndTag(tag);
     });
     const content = await transformedContent;
-    if (linkTags.length || scriptTags.length) {
-        // In case no body/head tags are not present (dotnet partial templates)
-        return linkTags.join('') + scriptTags.join('') + content;
-    }
-    return content;
+    return {
+        content: linkTags.length || scriptTags.length
+            ? // In case no body/head tags are not present (dotnet partial templates)
+                linkTags.join('') + scriptTags.join('') + content
+            : content,
+        warnings,
+        errors,
+    };
 }
 exports.augmentIndexHtml = augmentIndexHtml;
 function generateSriAttributes(content) {
@@ -144,3 +154,26 @@ function updateAttribute(tag, name, value) {
 function isString(value) {
     return typeof value === 'string';
 }
+async function getLanguageDirection(locale, warnings) {
+    const dir = await getLanguageDirectionFromLocales(locale);
+    if (!dir) {
+        warnings.push(`Locale data for '${locale}' cannot be found. 'dir' attribute will not be set for this locale.`);
+    }
+    return dir;
+}
+async function getLanguageDirectionFromLocales(locale) {
+    try {
+        const localeData = (await (0, load_esm_1.loadEsmModule)(`@angular/common/locales/${locale}`)).default;
+        const dir = localeData[localeData.length - 2];
+        return isString(dir) ? dir : undefined;
+    }
+    catch {
+        // In some cases certain locales might map to files which are named only with language id.
+        // Example: `en-US` -> `en`.
+        const [languageId] = locale.split('-', 1);
+        if (languageId !== locale) {
+            return getLanguageDirectionFromLocales(languageId);
+        }
+    }
+    return undefined;
+}

package/src/utils/index.d.ts

@@ -5,7 +5,6 @@
  * 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 * from './build-browser-features';
 export * from './default-progress';
 export * from './delete-output-dir';
 export * from './run-module-as-observable-fork';

package/src/utils/index.js

@@ -17,7 +17,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./build-browser-features"), exports);
 __exportStar(require("./default-progress"), exports);
 __exportStar(require("./delete-output-dir"), exports);
 __exportStar(require("./run-module-as-observable-fork"), exports);

package/src/utils/normalize-builder-schema.js

@@ -14,6 +14,7 @@ const normalize_cache_1 = require("./normalize-cache");
 const normalize_file_replacements_1 = require("./normalize-file-replacements");
 const normalize_optimization_1 = require("./normalize-optimization");
 const normalize_source_maps_1 = require("./normalize-source-maps");
+const supported_browsers_1 = require("./supported-browsers");
 function normalizeBrowserSchema(root, projectRoot, sourceRoot, options, metadata) {
     const normalizedSourceMapOptions = (0, normalize_source_maps_1.normalizeSourceMaps)(options.sourceMap || false);
     return {
@@ -37,6 +38,7 @@ function normalizeBrowserSchema(root, projectRoot, sourceRoot, options, metadata
         // A value of 0 is falsy and will disable polling rather then enable
         // 500 ms is a sensible default in this case
         poll: options.poll === 0 ? 500 : options.poll,
+        supportedBrowsers: (0, supported_browsers_1.getSupportedBrowsers)((0, core_1.getSystemPath)(projectRoot)),
     };
 }
 exports.normalizeBrowserSchema = normalizeBrowserSchema;

package/src/utils/read-tsconfig.js

@@ -41,10 +41,7 @@ async function readTsconfig(tsconfigPath, workspaceRoot) {
     // Load ESM `@angular/compiler-cli` 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 compilerCliModule = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli');
-    // If it is not ESM then the functions needed will be stored in the `default` property.
-    // TODO_ESM: This can be removed once `@angular/compiler-cli` is ESM only.
-    const { formatDiagnostics, readConfiguration } = (compilerCliModule.readConfiguration ? compilerCliModule : compilerCliModule.default);
+    const { formatDiagnostics, readConfiguration } = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli');
     const configResult = readConfiguration(tsConfigFullPath);
     if (configResult.errors && configResult.errors.length) {
         throw new Error(formatDiagnostics(configResult.errors));

package/src/utils/supported-browsers.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 getSupportedBrowsers(projectRoot: string): string[];

package/src/utils/supported-browsers.js

@@ -0,0 +1,26 @@
+"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.getSupportedBrowsers = void 0;
+const browserslist_1 = __importDefault(require("browserslist"));
+function getSupportedBrowsers(projectRoot) {
+    browserslist_1.default.defaults = [
+        'last 1 Chrome version',
+        'last 1 Firefox version',
+        'last 2 Edge major versions',
+        'last 2 Safari major versions',
+        'last 2 iOS major versions',
+        'Firefox ESR',
+    ];
+    return (0, browserslist_1.default)(undefined, { path: projectRoot });
+}
+exports.getSupportedBrowsers = getSupportedBrowsers;

package/src/webpack/configs/common.js

@@ -36,17 +36,18 @@ const path = __importStar(require("path"));
 const typescript_1 = require("typescript");
 const webpack_2 = require("webpack");
 const webpack_subresource_integrity_1 = require("webpack-subresource-integrity");
-const utils_1 = require("../../utils");
 const environment_options_1 = require("../../utils/environment-options");
 const load_esm_1 = require("../../utils/load-esm");
 const plugins_1 = require("../plugins");
+const named_chunks_plugin_1 = require("../plugins/named-chunks-plugin");
 const progress_plugin_1 = require("../plugins/progress-plugin");
+const transfer_size_plugin_1 = require("../plugins/transfer-size-plugin");
 const typescript_2 = require("../plugins/typescript");
 const helpers_1 = require("../utils/helpers");
 // eslint-disable-next-line max-lines-per-function
 async function getCommonConfig(wco) {
     var _a, _b;
-    const { root, projectRoot, buildOptions, tsConfig, projectName, sourceRoot, tsConfigPath } = wco;
+    const { root, projectRoot, buildOptions, tsConfig, projectName, sourceRoot, tsConfigPath, scriptTarget, } = wco;
     const { cache, codeCoverage, crossOrigin = 'none', platform = 'browser', aot = true, codeCoverageExclude = [], main, polyfills, sourceMap: { styles: stylesSourceMap, scripts: scriptsSourceMap, vendor: vendorSourceMap, hidden: hiddenSourceMap, }, optimization: { styles: stylesOptimization, scripts: scriptsOptimization }, commonChunk, vendorChunk, subresourceIntegrity, verbose, poll, webWorkerTsConfig, externalDependencies = [], allowedCommonJsDependencies, bundleDependencies, } = buildOptions;
     const isPlatformServer = buildOptions.platform === 'server';
     const extraPlugins = [];
@@ -55,13 +56,9 @@ async function getCommonConfig(wco) {
     // Load ESM `@angular/compiler-cli` 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 compilerCliModule = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli');
-    // If it is not ESM then the values needed will be stored in the `default` property.
-    // TODO_ESM: This can be removed once `@angular/compiler-cli` is ESM only.
-    const { GLOBAL_DEFS_FOR_TERSER, GLOBAL_DEFS_FOR_TERSER_WITH_AOT, VERSION: NG_VERSION, } = (compilerCliModule.GLOBAL_DEFS_FOR_TERSER ? compilerCliModule : compilerCliModule.default);
+    const { GLOBAL_DEFS_FOR_TERSER, GLOBAL_DEFS_FOR_TERSER_WITH_AOT, VERSION: NG_VERSION, } = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli');
     // determine hashing format
     const hashFormat = (0, helpers_1.getOutputHashFormat)(buildOptions.outputHashing || 'none');
-    const buildBrowserFeatures = new utils_1.BuildBrowserFeatures(projectRoot);
     if (buildOptions.progress) {
         extraPlugins.push(new progress_plugin_1.ProgressPlugin(platform));
     }
@@ -93,11 +90,6 @@ async function getCommonConfig(wco) {
             }
         }
     }
-    if (environment_options_1.profilingEnabled) {
-        extraPlugins.push(new webpack_2.debug.ProfilingPlugin({
-            outputPath: path.resolve(root, 'chrome-profiler-events.json'),
-        }));
-    }
     if (allowedCommonJsDependencies) {
         // When this is not defined it means the builder doesn't support showing common js usages.
         // When it does it will be an array.
@@ -190,8 +182,10 @@ async function getCommonConfig(wco) {
     }
     if (main || polyfills) {
         extraRules.push({
-            test: /\.[cm]?[tj]sx?$/,
+            test: tsConfig.options.allowJs ? /\.[cm]?[tj]sx?$/ : /\.[cm]?tsx?$/,
             loader: webpack_1.AngularWebpackLoaderPath,
+            // The below are known paths that are not part of the TypeScript compilation even when allowJs is enabled.
+            exclude: [/[/\\](?:css-loader|mini-css-extract-plugin|webpack-dev-server|webpack)[/\\]/],
         });
         extraPlugins.push((0, typescript_2.createIvyPlugin)(wco, aot, tsConfigPath));
     }
@@ -203,12 +197,15 @@ async function getCommonConfig(wco) {
         extraMinimizers.push(new plugins_1.JavaScriptOptimizerPlugin({
             define: buildOptions.aot ? GLOBAL_DEFS_FOR_TERSER_WITH_AOT : GLOBAL_DEFS_FOR_TERSER,
             sourcemap: scriptsSourceMap,
-            target: wco.scriptTarget,
+            target: scriptTarget,
             keepNames: !environment_options_1.allowMangle || isPlatformServer,
             removeLicenses: buildOptions.extractLicenses,
             advanced: buildOptions.buildOptimizer,
         }));
     }
+    if (platform === 'browser' && (scriptsOptimization || stylesOptimization.minify)) {
+        extraMinimizers.push(new transfer_size_plugin_1.TransferSizePlugin());
+    }
     const externals = [...externalDependencies];
     if (isPlatformServer && !bundleDependencies) {
         externals.push(({ context, request }, callback) => (0, helpers_1.externalizePackages)(context !== null && context !== void 0 ? context : wco.projectRoot, request, callback));
@@ -225,7 +222,7 @@ async function getCommonConfig(wco) {
         devtool: false,
         target: [
             isPlatformServer ? 'node' : 'web',
-            tsConfig.options.target === typescript_1.ScriptTarget.ES5 ? 'es5' : 'es2015',
+            scriptTarget === typescript_1.ScriptTarget.ES5 ? 'es5' : 'es2015',
         ],
         profile: buildOptions.statsJson,
         resolve: {
@@ -233,10 +230,7 @@ async function getCommonConfig(wco) {
             extensions: ['.ts', '.tsx', '.mjs', '.js'],
             symlinks: !buildOptions.preserveSymlinks,
             modules: [tsConfig.options.baseUrl || projectRoot, 'node_modules'],
-            mainFields: isPlatformServer
-                ? ['es2015', 'module', 'main']
-                : ['es2020', 'es2015', 'browser', 'module', 'main'],
-            conditionNames: isPlatformServer ? ['es2015', '...'] : ['es2020', 'es2015', '...'],
+            ...(0, helpers_1.getMainFieldsAndConditionNames)(scriptTarget, isPlatformServer),
         },
         resolveLoader: {
             symlinks: !buildOptions.preserveSymlinks,
@@ -260,7 +254,7 @@ async function getCommonConfig(wco) {
         watch: buildOptions.watch,
         watchOptions: {
             poll,
-            ignored: poll === undefined ? undefined : 'node_modules/**',
+            ignored: poll === undefined ? undefined : '**/node_modules/**',
         },
         performance: {
             hints: false,
@@ -270,6 +264,9 @@ async function getCommonConfig(wco) {
             /Failed to parse source map from/,
             // https://github.com/webpack-contrib/postcss-loader/blob/bd261875fdf9c596af4ffb3a1a73fe3c549befda/src/index.js#L153-L158
             /Add postcss as project dependency/,
+            // esbuild will issue a warning, while still hoists the @charset at the very top.
+            // This is caused by a bug in css-loader https://github.com/webpack-contrib/css-loader/issues/1212
+            /"@charset" must be the first rule in the file/,
         ],
         module: {
             // Show an error for missing exports instead of a warning.
@@ -283,6 +280,12 @@ async function getCommonConfig(wco) {
                 }
                 : undefined,
             rules: [
+                {
+                    test: /\.?(svg|html)$/,
+                    // Only process HTML and SVG which are known Angular component resources.
+                    resourceQuery: /\?ngResource/,
+                    type: 'asset/source',
+                },
                 {
                     // Mark files inside `rxjs/add` as containing side effects.
                     // If this is fixed upstream and the fixed version becomes the minimum
@@ -300,7 +303,7 @@ async function getCommonConfig(wco) {
                             loader: require.resolve('../../babel/webpack-loader'),
                             options: {
                                 cacheDirectory: (cache.enabled && path.join(cache.path, 'babel-webpack')) || false,
-                                scriptTarget: wco.scriptTarget,
+                                scriptTarget,
                                 aot: buildOptions.aot,
                                 optimize: buildOptions.buildOptimizer,
                                 instrumentCode: codeCoverage
@@ -317,6 +320,7 @@ async function getCommonConfig(wco) {
             ],
         },
         experiments: {
+            backCompat: false,
             syncWebAssembly: true,
             asyncWebAssembly: true,
         },
@@ -324,7 +328,7 @@ async function getCommonConfig(wco) {
             level: verbose ? 'verbose' : 'error',
         },
         stats: (0, helpers_1.getStatsOptions)(verbose),
-        cache: (0, helpers_1.getCacheSettings)(wco, buildBrowserFeatures.supportedBrowsers, NG_VERSION.full),
+        cache: (0, helpers_1.getCacheSettings)(wco, NG_VERSION.full),
         optimization: {
             minimizer: extraMinimizers,
             moduleIds: 'deterministic',
@@ -356,7 +360,7 @@ async function getCommonConfig(wco) {
                 },
             },
         },
-        plugins: [new plugins_1.DedupeModuleResolvePlugin({ verbose }), ...extraPlugins],
+        plugins: [new named_chunks_plugin_1.NamedChunksPlugin(), new plugins_1.DedupeModuleResolvePlugin({ verbose }), ...extraPlugins],
         node: false,
     };
 }

package/src/webpack/configs/dev-server.js

@@ -30,7 +30,7 @@ exports.buildServePath = exports.getDevServerConfig = void 0;
 const core_1 = require("@angular-devkit/core");
 const fs_1 = require("fs");
 const path_1 = require("path");
-const url = __importStar(require("url"));
+const url_1 = require("url");
 const load_esm_1 = require("../../utils/load-esm");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const hmr_loader_1 = require("../plugins/hmr/hmr-loader");
@@ -78,7 +78,7 @@ async function getDevServerConfig(wco) {
                 rewrites: [
                     {
                         from: new RegExp(`^(?!${servePath})/.*`),
-                        to: (context) => url.format(context.parsedUrl),
+                        to: (context) => context.parsedUrl.href,
                     },
                 ],
             },
@@ -89,7 +89,7 @@ async function getDevServerConfig(wco) {
             },
             compress: false,
             static: false,
-            https: getSslConfig(root, wco.buildOptions),
+            server: getServerConfig(root, wco.buildOptions),
             allowedHosts: getAllowedHostsConfig(wco.buildOptions),
             devMiddleware: {
                 publicPath: servePath,
@@ -139,15 +139,20 @@ exports.buildServePath = buildServePath;
  * Private method to enhance a webpack config with SSL configuration.
  * @private
  */
-function getSslConfig(root, options) {
+function getServerConfig(root, options) {
     const { ssl, sslCert, sslKey } = options;
-    if (ssl && sslCert && sslKey) {
-        return {
-            key: (0, path_1.resolve)(root, sslKey),
-            cert: (0, path_1.resolve)(root, sslCert),
-        };
+    if (!ssl) {
+        return 'http';
     }
-    return ssl;
+    return {
+        type: 'https',
+        options: sslCert && sslKey
+            ? {
+                key: (0, path_1.resolve)(root, sslKey),
+                cert: (0, path_1.resolve)(root, sslCert),
+            }
+            : undefined,
+    };
 }
 /**
  * Private method to enhance a webpack config with Proxy configuration.
@@ -158,21 +163,71 @@ async function addProxyConfig(root, proxyConfig) {
         return undefined;
     }
     const proxyPath = (0, path_1.resolve)(root, proxyConfig);
-    if ((0, fs_1.existsSync)(proxyPath)) {
-        try {
-            return require(proxyPath);
+    if (!(0, fs_1.existsSync)(proxyPath)) {
+        throw new Error(`Proxy configuration file ${proxyPath} does not exist.`);
+    }
+    switch ((0, path_1.extname)(proxyPath)) {
+        case '.json': {
+            const content = await fs_1.promises.readFile(proxyPath, 'utf-8');
+            const { parse, printParseErrorCode } = await Promise.resolve().then(() => __importStar(require('jsonc-parser')));
+            const parseErrors = [];
+            const proxyConfiguration = parse(content, parseErrors, { allowTrailingComma: true });
+            if (parseErrors.length > 0) {
+                let errorMessage = `Proxy configuration file ${proxyPath} contains parse errors:`;
+                for (const parseError of parseErrors) {
+                    const { line, column } = getJsonErrorLineColumn(parseError.offset, content);
+                    errorMessage += `\n[${line}, ${column}] ${printParseErrorCode(parseError.error)}`;
+                }
+                throw new Error(errorMessage);
+            }
+            return proxyConfiguration;
         }
-        catch (e) {
-            if (e.code === 'ERR_REQUIRE_ESM') {
-                // Load the ESM configuration file 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.
-                return (await (0, load_esm_1.loadEsmModule)(url.pathToFileURL(proxyPath))).default;
+        case '.mjs':
+            // Load the ESM configuration file 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.
+            return (await (0, load_esm_1.loadEsmModule)((0, url_1.pathToFileURL)(proxyPath))).default;
+        case '.cjs':
+            return require(proxyPath);
+        default:
+            // The file could be either CommonJS or ESM.
+            // CommonJS is tried first then ESM if loading fails.
+            try {
+                return require(proxyPath);
             }
-            throw e;
+            catch (e) {
+                if (e.code === 'ERR_REQUIRE_ESM') {
+                    // Load the ESM configuration file 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.
+                    return (await (0, load_esm_1.loadEsmModule)((0, url_1.pathToFileURL)(proxyPath))).default;
+                }
+                throw e;
+            }
+    }
+}
+/**
+ * Calculates the line and column for an error offset in the content of a JSON file.
+ * @param location The offset error location from the beginning of the content.
+ * @param content The full content of the file containing the error.
+ * @returns An object containing the line and column
+ */
+function getJsonErrorLineColumn(offset, content) {
+    if (offset === 0) {
+        return { line: 1, column: 1 };
+    }
+    let line = 0;
+    let position = 0;
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        ++line;
+        const nextNewline = content.indexOf('\n', position);
+        if (nextNewline === -1 || nextNewline > offset) {
+            break;
         }
+        position = nextNewline + 1;
     }
-    throw new Error('Proxy config file ' + proxyPath + ' does not exist.');
+    return { line, column: offset - position + 1 };
 }
 /**
  * Find the default server path. We don't want to expose baseHref and deployUrl as arguments, only
@@ -219,10 +274,8 @@ function getAllowedHostsConfig(options) {
 function getPublicHostOptions(options, webSocketPath) {
     let publicHost = options.publicHost;
     if (publicHost) {
-        if (!/^\w+:\/\//.test(publicHost)) {
-            publicHost = `https://${publicHost}`;
-        }
-        publicHost = url.parse(publicHost).host;
+        const hostWithProtocol = !/^\w+:\/\//.test(publicHost) ? `https://${publicHost}` : publicHost;
+        publicHost = new url_1.URL(hostWithProtocol).host;
     }
     return `auto://${publicHost || '0.0.0.0:0'}${webSocketPath}`;
 }