@angular-devkit/build-angular 0.1101.0-next.2 → 0.1101.0

package/package.json

@@ -1,33 +1,33 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "0.1101.0-next.2",
+  "version": "0.1101.0",
   "description": "Angular Webpack Build Facade",
   "experimental": true,
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "0.1101.0-next.2",
-    "@angular-devkit/build-optimizer": "0.1101.0-next.2",
-    "@angular-devkit/build-webpack": "0.1101.0-next.2",
-    "@angular-devkit/core": "11.1.0-next.2",
-    "@babel/core": "7.12.9",
-    "@babel/generator": "7.12.5",
-    "@babel/plugin-transform-runtime": "7.12.1",
-    "@babel/preset-env": "7.12.7",
+    "@angular-devkit/architect": "0.1101.0",
+    "@angular-devkit/build-optimizer": "0.1101.0",
+    "@angular-devkit/build-webpack": "0.1101.0",
+    "@angular-devkit/core": "11.1.0",
+    "@babel/core": "7.12.10",
+    "@babel/generator": "7.12.11",
+    "@babel/plugin-transform-runtime": "7.12.10",
+    "@babel/preset-env": "7.12.11",
     "@babel/runtime": "7.12.5",
     "@babel/template": "7.12.7",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "11.1.0-next.2",
+    "@ngtools/webpack": "11.1.0",
     "ansi-colors": "4.1.1",
-    "autoprefixer": "10.0.4",
+    "autoprefixer": "10.2.1",
     "babel-loader": "8.2.2",
     "browserslist": "^4.9.1",
     "cacache": "15.0.5",
     "caniuse-lite": "^1.0.30001032",
     "circular-dependency-plugin": "5.2.2",
     "copy-webpack-plugin": "6.3.2",
-    "core-js": "3.8.1",
+    "core-js": "3.8.2",
     "critters": "0.0.6",
     "css-loader": "5.0.1",
     "cssnano": "4.1.10",
@@ -37,43 +37,43 @@
     "inquirer": "7.3.3",
     "jest-worker": "26.6.2",
     "karma-source-map-support": "1.4.0",
-    "less": "3.12.2",
-    "less-loader": "7.1.0",
-    "license-webpack-plugin": "2.3.1",
+    "less": "4.1.0",
+    "less-loader": "7.2.1",
+    "license-webpack-plugin": "2.3.11",
     "loader-utils": "2.0.0",
-    "mini-css-extract-plugin": "1.3.1",
+    "mini-css-extract-plugin": "1.3.3",
     "minimatch": "3.0.4",
-    "open": "7.3.0",
-    "ora": "5.1.0",
+    "open": "7.3.1",
+    "ora": "5.2.0",
     "parse5-html-rewriting-stream": "6.0.1",
     "pnp-webpack-plugin": "1.6.4",
-    "postcss": "8.1.10",
-    "postcss-import": "13.0.0",
+    "postcss": "8.2.4",
+    "postcss-import": "14.0.0",
     "postcss-loader": "4.1.0",
     "raw-loader": "4.0.2",
     "regenerator-runtime": "0.13.7",
     "resolve-url-loader": "3.1.2",
     "rimraf": "3.0.2",
-    "rollup": "2.34.0",
+    "rollup": "2.36.1",
     "rxjs": "6.6.3",
-    "sass": "1.29.0",
-    "sass-loader": "10.1.0",
-    "semver": "7.3.2",
+    "sass": "1.32.4",
+    "sass-loader": "10.1.1",
+    "semver": "7.3.4",
     "source-map": "0.7.3",
-    "source-map-loader": "1.1.2",
+    "source-map-loader": "1.1.3",
     "source-map-support": "0.5.19",
     "speed-measure-webpack-plugin": "1.3.3",
     "style-loader": "2.0.0",
     "stylus": "0.54.8",
-    "stylus-loader": "4.3.1",
+    "stylus-loader": "4.3.2",
     "terser": "5.5.1",
     "terser-webpack-plugin": "4.2.3",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "webpack": "4.44.2",
     "webpack-dev-middleware": "3.7.2",
-    "webpack-dev-server": "3.11.0",
-    "webpack-merge": "5.4.0",
+    "webpack-dev-server": "3.11.1",
+    "webpack-merge": "5.7.3",
     "webpack-sources": "2.2.0",
     "webpack-subresource-integrity": "1.5.2",
     "worker-plugin": "5.0.0"

package/src/babel/babel-loader.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google Inc. 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
+ */
+declare module 'babel-loader' {
+  type BabelLoaderCustomizer<T> = (
+    babel: typeof import('@babel/core'),
+  ) => {
+    customOptions?(
+      this: import('webpack').loader.LoaderContext,
+      loaderOptions: Record<string, unknown>,
+      loaderArguments: { source: string; map?: unknown },
+    ): Promise<{ custom?: T; loader: Record<string, unknown> }>;
+    config?(
+      this: import('webpack').loader.LoaderContext,
+      configuration: import('@babel/core').PartialConfig,
+      loaderArguments: { source: string; map?: unknown; customOptions: T },
+    ): import('@babel/core').TransformOptions;
+  };
+  function custom<T>(customizer: BabelLoaderCustomizer<T>): import('webpack').loader.Loader;
+}

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

@@ -1,10 +1,11 @@
-export declare type DiagnosticReporter = (type: 'error' | 'warning', message: string) => void;
+export declare type DiagnosticReporter = (type: 'error' | 'warning' | 'info', message: string) => void;
 export interface ApplicationPresetOptions {
     i18n?: {
         locale: string;
         missingTranslationBehavior?: 'error' | 'warning' | 'ignore';
         translation?: unknown;
     };
+    angularLinker?: boolean;
     forceES5?: boolean;
     forceAsyncTransformation?: boolean;
     diagnosticReporter?: DiagnosticReporter;

package/src/babel/presets/application.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * 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
  */
+const fs = require("fs");
 const path = require("path");
 function createI18nDiagnostics(reporter) {
     // Babel currently is synchronous so import cannot be used
@@ -57,10 +58,39 @@ function createI18nPlugins(locale, translation, missingTranslationBehavior, diag
     plugins.push(makeLocalePlugin(locale));
     return plugins;
 }
+function createNgtscLogger(reporter) {
+    return {
+        level: 1,
+        debug(...args) { },
+        info(...args) {
+            reporter === null || reporter === void 0 ? void 0 : reporter('info', args.join());
+        },
+        warn(...args) {
+            reporter === null || reporter === void 0 ? void 0 : reporter('warning', args.join());
+        },
+        error(...args) {
+            reporter === null || reporter === void 0 ? void 0 : reporter('error', args.join());
+        },
+    };
+}
 function default_1(api, options) {
     const presets = [];
     const plugins = [];
     let needRuntimeTransform = false;
+    if (options.angularLinker) {
+        // Babel currently is synchronous so import cannot be used
+        const { createEs2015LinkerPlugin, } = require('@angular/compiler-cli/linker/babel');
+        plugins.push(createEs2015LinkerPlugin({
+            logger: createNgtscLogger(options.diagnosticReporter),
+            fileSystem: {
+                resolve: path.resolve,
+                exists: fs.existsSync,
+                dirname: path.dirname,
+                relative: path.relative,
+                readFile: fs.readFileSync,
+            },
+        }));
+    }
     if (options.forceES5) {
         presets.push([
             require('@babel/preset-env').default,

package/src/babel/webpack-loader.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("webpack").loader.Loader;
+export default _default;

package/src/babel/webpack-loader.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @license
+ * Copyright Google Inc. 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
+ */
+const babel_loader_1 = require("babel-loader");
+const typescript_1 = require("typescript");
+/**
+ * Cached linker check utility function
+ *
+ * If undefined, not yet been imported
+ * If null, attempted import failed and no linker support
+ * If function, import succeeded and linker supported
+ */
+let needsLinking;
+async function checkLinking(path, source) {
+    // @angular/core and @angular/compiler will cause false positives
+    if (/[\\\/]@angular[\\\/](?:compiler|core)/.test(path)) {
+        return { requiresLinking: false };
+    }
+    if (needsLinking !== null) {
+        try {
+            if (needsLinking === undefined) {
+                needsLinking = (await Promise.resolve().then(() => require('@angular/compiler-cli/linker'))).needsLinking;
+            }
+            // If the linker entry point is present then there is linker support
+            return { hasLinkerSupport: true, requiresLinking: needsLinking(path, source) };
+        }
+        catch (_a) {
+            needsLinking = null;
+        }
+    }
+    // Fallback for Angular versions less than 11.1.0 with no linker support.
+    // This information is used to issue errors if a partially compiled library is used when unsupported.
+    return {
+        hasLinkerSupport: false,
+        requiresLinking: source.includes('ɵɵngDeclareDirective') || source.includes('ɵɵngDeclareComponent'),
+    };
+}
+exports.default = babel_loader_1.custom(() => {
+    const baseOptions = Object.freeze({
+        babelrc: false,
+        configFile: false,
+        compact: false,
+        cacheCompression: false,
+        sourceType: 'unambiguous',
+    });
+    return {
+        async customOptions({ scriptTarget, ...loaderOptions }, { source }) {
+            // Must process file if plugins are added
+            let shouldProcess = Array.isArray(loaderOptions.plugins) && loaderOptions.plugins.length > 0;
+            // Analyze file for linking
+            let shouldLink = false;
+            const { hasLinkerSupport, requiresLinking } = await checkLinking(this.resourcePath, source);
+            if (requiresLinking && !hasLinkerSupport) {
+                // Cannot link if there is no linker support
+                this.emitError('File requires the Angular linker. "@angular/compiler-cli" version 11.1.0 or greater is needed.');
+            }
+            else {
+                shouldLink = requiresLinking;
+            }
+            shouldProcess || (shouldProcess = shouldLink);
+            // Analyze for ES target processing
+            let forceES5 = false;
+            const esTarget = scriptTarget;
+            if (esTarget < typescript_1.ScriptTarget.ES2015) {
+                forceES5 = true;
+            }
+            shouldProcess || (shouldProcess = forceES5);
+            // Add provided loader options to default base options
+            const options = {
+                ...baseOptions,
+                ...loaderOptions,
+            };
+            // Skip babel processing if no actions are needed
+            if (!shouldProcess) {
+                // Force the current file to be ignored
+                options.ignore = [() => true];
+            }
+            return { custom: { forceES5, shouldLink }, loader: options };
+        },
+        config(configuration, { customOptions }) {
+            return {
+                ...configuration.options,
+                presets: [
+                    ...(configuration.options.presets || []),
+                    [
+                        require('./presets/application').default,
+                        {
+                            angularLinker: customOptions.shouldLink,
+                            forceES5: customOptions.forceES5,
+                            diagnosticReporter: (type, message) => {
+                                switch (type) {
+                                    case 'error':
+                                        this.emitError(message);
+                                        break;
+                                    case 'info':
+                                    // Webpack does not currently have an informational diagnostic
+                                    case 'warning':
+                                        this.emitWarning(message);
+                                        break;
+                                }
+                            },
+                        },
+                    ],
+                ],
+            };
+        },
+    };
+});

package/src/browser/index.js

@@ -63,7 +63,7 @@ function getCompilerConfig(wco) {
     return {};
 }
 exports.getCompilerConfig = getCompilerConfig;
-async function initialize(options, context, host, differentialLoadingMode, webpackConfigurationTransform) {
+async function initialize(options, context, host, differentialLoadingNeeded, webpackConfigurationTransform) {
     var _a, _b;
     const originalOutputPath = options.outputPath;
     // Assets are processed directly by the builder except when watching
@@ -76,7 +76,7 @@ async function initialize(options, context, host, differentialLoadingMode, webpa
         getAnalyticsConfig(wco, context),
         getCompilerConfig(wco),
         wco.buildOptions.webWorkerTsConfig ? configs_1.getWorkerConfig(wco) : {},
-    ], host, { differentialLoadingMode });
+    ], host, { differentialLoadingNeeded });
     // Validate asset option values if processed directly
     if (((_a = options.assets) === null || _a === void 0 ? void 0 : _a.length) && !((_b = adjustedOptions.assets) === null || _b === void 0 ? void 0 : _b.length)) {
         utils_1.normalizeAssetPatterns(options.assets, new core_1.virtualFs.SyncDelegateHost(host), core_1.normalize(context.workspaceRoot), core_1.normalize(projectRoot), projectSourceRoot === undefined ? undefined : core_1.normalize(projectSourceRoot)).forEach(({ output }) => {
@@ -115,7 +115,6 @@ function buildWebpackBrowser(options, context, transforms = {}) {
         const target = compilerOptions.target || typescript_1.ScriptTarget.ES5;
         const buildBrowserFeatures = new utils_1.BuildBrowserFeatures(sysProjectRoot);
         const isDifferentialLoadingNeeded = buildBrowserFeatures.isDifferentialLoadingNeeded(target);
-        const differentialLoadingMode = !options.watch && isDifferentialLoadingNeeded;
         if (target > typescript_1.ScriptTarget.ES2015 && isDifferentialLoadingNeeded) {
             context.logger.warn(core_1.tags.stripIndent `
           Warning: Using differential loading with targets ES5 and ES2016 or higher may
@@ -133,7 +132,7 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                 '\nFor additional information: https://v10.angular.io/guide/deprecations#ie-9-10-and-mobile');
         }
         return {
-            ...(await initialize(options, context, host, differentialLoadingMode, transforms.webpackConfiguration)),
+            ...(await initialize(options, context, host, isDifferentialLoadingNeeded, transforms.webpackConfiguration)),
             buildBrowserFeatures,
             isDifferentialLoadingNeeded,
             target,

package/src/browser/schema.d.ts

@@ -28,7 +28,7 @@ export interface Schema {
      */
     buildOptimizer?: boolean;
     /**
-     * Use a separate bundle containing code used across multiple bundles.
+     * Generate a seperate bundle containing code used across multiple bundles.
      */
     commonChunk?: boolean;
     /**
@@ -115,7 +115,7 @@ export interface Schema {
      * Enables optimization of the build output. Including minification of scripts and styles,
      * tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For
      * more information, see
-     * https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.
+     * https://angular.io/guide/workspace-config#optimization-configuration.
      */
     optimization?: OptimizationUnion;
     /**
@@ -162,7 +162,8 @@ export interface Schema {
      */
     showCircularDependencies?: boolean;
     /**
-     * Output source maps.
+     * Output source maps for scripts and styles. For more information, see
+     * https://angular.io/guide/workspace-config#source-map-configuration.
      */
     sourceMap?: SourceMapUnion;
     /**
@@ -187,7 +188,8 @@ export interface Schema {
      */
     tsConfig: string;
     /**
-     * Use a separate bundle containing only vendor libraries.
+     * Generate a seperate bundle containing only vendor libraries. This option should only used
+     * for development.
      */
     vendorChunk?: boolean;
     /**
@@ -322,7 +324,7 @@ export declare type Localize = string[] | boolean;
  * Enables optimization of the build output. Including minification of scripts and styles,
  * tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For
  * more information, see
- * https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.
+ * https://angular.io/guide/workspace-config#optimization-configuration.
  */
 export declare type OptimizationUnion = boolean | OptimizationClass;
 export interface OptimizationClass {
@@ -390,7 +392,8 @@ export interface ExtraEntryPointClass {
     input: string;
 }
 /**
- * Output source maps.
+ * Output source maps for scripts and styles. For more information, see
+ * https://angular.io/guide/workspace-config#source-map-configuration.
  */
 export declare type SourceMapUnion = boolean | SourceMapClass;
 export interface SourceMapClass {

package/src/browser/schema.json

@@ -57,7 +57,7 @@
       "additionalProperties": false
     },
     "optimization": {
-      "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.",
+      "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.",
       "x-user-analytics": 16,
       "default": false,
       "oneOf": [
@@ -146,7 +146,7 @@
       "default": false
     },
     "sourceMap": {
-      "description": "Output source maps.",
+      "description": "Output source maps for scripts and styles. For more information, see https://angular.io/guide/workspace-config#source-map-configuration.",
       "default": true,
       "oneOf": [
         {
@@ -182,12 +182,12 @@
     },
     "vendorChunk": {
       "type": "boolean",
-      "description": "Use a separate bundle containing only vendor libraries.",
+      "description": "Generate a seperate bundle containing only vendor libraries. This option should only used for development.",
       "default": true
     },
     "commonChunk": {
       "type": "boolean",
-      "description": "Use a separate bundle containing code used across multiple bundles.",
+      "description": "Generate a seperate bundle containing code used across multiple bundles.",
       "default": true
     },
     "baseHref": {

package/src/browser/tests/setup.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google Inc. 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 { Schema } from '../schema';
+export { describeBuilder } from '../../testing';
+export declare const BROWSER_BUILDER_INFO: Readonly<{
+    name: string;
+    schemaPath: string;
+}>;
+/**
+ * Contains all required browser builder fields.
+ * Also disables progress reporting to minimize logging output.
+ */
+export declare const BASE_OPTIONS: Readonly<Schema>;

package/src/browser/tests/setup.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BASE_OPTIONS = exports.BROWSER_BUILDER_INFO = exports.describeBuilder = void 0;
+var testing_1 = require("../../testing");
+Object.defineProperty(exports, "describeBuilder", { enumerable: true, get: function () { return testing_1.describeBuilder; } });
+exports.BROWSER_BUILDER_INFO = Object.freeze({
+    name: '@angular-devkit/build-angular:browser',
+    schemaPath: __dirname + '/../schema.json',
+});
+/**
+ * Contains all required browser builder fields.
+ * Also disables progress reporting to minimize logging output.
+ */
+exports.BASE_OPTIONS = Object.freeze({
+    index: 'src/index.html',
+    main: 'src/main.ts',
+    outputPath: 'dist',
+    tsConfig: 'src/tsconfig.app.json',
+    progress: false,
+});

package/src/dev-server/schema.d.ts

@@ -23,7 +23,7 @@ export interface Schema {
      */
     browserTarget: string;
     /**
-     * Use a separate bundle containing code used across multiple bundles.
+     * Generate a seperate bundle containing code used across multiple bundles.
      * @deprecated Use the "commonChunk" option in the browser builder instead.
      */
     commonChunk?: boolean;
@@ -66,8 +66,7 @@ export interface Schema {
     /**
      * Enables optimization of the build output. Including minification of scripts and styles,
      * tree-shaking, dead-code elimination, tree-shaking and fonts inlining. For more
-     * information, see
-     * https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.
+     * information, see https://angular.io/guide/workspace-config#optimization-configuration.
      * @deprecated Use the "optimization" option in the browser builder instead.
      */
     optimization?: OptimizationUnion;
@@ -104,7 +103,8 @@ export interface Schema {
      */
     servePathDefaultWarning?: boolean;
     /**
-     * Output source maps.
+     * Output source maps for scripts and styles. For more information, see
+     * https://angular.io/guide/workspace-config#source-map-configuration.
      * @deprecated Use the "sourceMap" option in the browser builder instead.
      */
     sourceMap?: SourceMapUnion;
@@ -121,7 +121,8 @@ export interface Schema {
      */
     sslKey?: string;
     /**
-     * Use a separate bundle containing only vendor libraries.
+     * Generate a seperate bundle containing only vendor libraries. This option should only used
+     * for development.
      * @deprecated Use the "vendorChunk" option in the browser builder instead.
      */
     vendorChunk?: boolean;
@@ -137,8 +138,7 @@ export interface Schema {
 /**
  * Enables optimization of the build output. Including minification of scripts and styles,
  * tree-shaking, dead-code elimination, tree-shaking and fonts inlining. For more
- * information, see
- * https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.
+ * information, see https://angular.io/guide/workspace-config#optimization-configuration.
  * @deprecated Use the "optimization" option in the browser builder instead.
  */
 export declare type OptimizationUnion = boolean | OptimizationClass;
@@ -153,7 +153,8 @@ export interface OptimizationClass {
     styles?: boolean;
 }
 /**
- * Output source maps.
+ * Output source maps for scripts and styles. For more information, see
+ * https://angular.io/guide/workspace-config#source-map-configuration.
  * @deprecated Use the "sourceMap" option in the browser builder instead.
  */
 export declare type SourceMapUnion = boolean | SourceMapClass;

package/src/dev-server/schema.json

@@ -105,7 +105,7 @@
       "x-deprecated": "No longer has an effect."
     },
     "optimization": {
-      "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, tree-shaking and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-and-source-map-configuration.",
+      "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, tree-shaking and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.",
       "x-user-analytics": 16,
       "oneOf": [
         {
@@ -137,7 +137,7 @@
       "x-deprecated": "Use the \"aot\" option in the browser builder instead."
     },
     "sourceMap": {
-      "description": "Output source maps.",
+      "description": "Output source maps for scripts and styles. For more information, see https://angular.io/guide/workspace-config#source-map-configuration.",
       "oneOf": [
         {
           "type": "object",
@@ -173,12 +173,12 @@
     },
     "vendorChunk": {
       "type": "boolean",
-      "description": "Use a separate bundle containing only vendor libraries.",
+      "description": "Generate a seperate bundle containing only vendor libraries. This option should only used for development.",
       "x-deprecated": "Use the \"vendorChunk\" option in the browser builder instead."
     },
     "commonChunk": {
       "type": "boolean",
-      "description": "Use a separate bundle containing code used across multiple bundles.",
+      "description": "Generate a seperate bundle containing code used across multiple bundles.",
       "x-deprecated": "Use the \"commonChunk\" option in the browser builder instead."
     },
     "baseHref": {

package/src/extract-i18n/index.js

@@ -29,6 +29,10 @@ function getI18nOutfile(format) {
         case 'xlf2':
         case 'xliff2':
             return 'messages.xlf';
+        case 'json':
+            return 'messages.json';
+        case 'arb':
+            return 'messages.arb';
         default:
             throw new Error(`Unsupported format "${format}"`);
     }
@@ -50,6 +54,19 @@ async function getSerializer(format, sourceLocale, basePath, useLegacyIds) {
             const { Xliff2TranslationSerializer } = await Promise.resolve().then(() => require('@angular/localize/src/tools/src/extract/translation_files/xliff2_translation_serializer'));
             // tslint:disable-next-line: no-any
             return new Xliff2TranslationSerializer(sourceLocale, basePath, useLegacyIds, {});
+        case schema_1.Format.Json:
+            const { SimpleJsonTranslationSerializer } = await Promise.resolve().then(() => require('@angular/localize/src/tools/src/extract/translation_files/json_translation_serializer'));
+            // tslint:disable-next-line: no-any
+            return new SimpleJsonTranslationSerializer(sourceLocale);
+        case schema_1.Format.Arb:
+            const { ArbTranslationSerializer } = await Promise.resolve().then(() => require('@angular/localize/src/tools/src/extract/translation_files/arb_translation_serializer'));
+            const fileSystem = {
+                relative(from, to) {
+                    return path.relative(from, to);
+                },
+            };
+            // tslint:disable-next-line: no-any
+            return new ArbTranslationSerializer(sourceLocale, basePath, fileSystem);
     }
 }
 function normalizeFormatOption(options) {
@@ -70,6 +87,12 @@ function normalizeFormatOption(options) {
         case schema_1.Format.Xliff2:
             format = schema_1.Format.Xlf2;
             break;
+        case schema_1.Format.Json:
+            format = schema_1.Format.Json;
+            break;
+        case schema_1.Format.Arb:
+            format = schema_1.Format.Arb;
+            break;
         case undefined:
             format = schema_1.Format.Xlf;
             break;
@@ -89,7 +112,7 @@ async function execute(options, context, transforms) {
     const browserOptions = await context.validateOptions(await context.getTargetOptions(browserTarget), await context.getBuilderNameForTarget(browserTarget));
     const format = normalizeFormatOption(options);
     // We need to determine the outFile name so that AngularCompiler can retrieve it.
-    let outFile = options.outFile || getI18nOutfile(options.format);
+    let outFile = options.outFile || getI18nOutfile(format);
     if (options.outputPath) {
         // AngularCompilerPlugin doesn't support genDir so we have to adjust outFile instead.
         outFile = path.join(options.outputPath, outFile);

package/src/extract-i18n/schema.d.ts

@@ -46,6 +46,8 @@ export interface Schema {
  * @deprecated Use 'format' option instead.
  */
 export declare enum Format {
+    Arb = "arb",
+    Json = "json",
     Xlf = "xlf",
     Xlf2 = "xlf2",
     Xlif = "xlif",

package/src/extract-i18n/schema.js

@@ -11,6 +11,8 @@ exports.Format = void 0;
  */
 var Format;
 (function (Format) {
+    Format["Arb"] = "arb";
+    Format["Json"] = "json";
     Format["Xlf"] = "xlf";
     Format["Xlf2"] = "xlf2";
     Format["Xlif"] = "xlif";