fix(custom-esbuild): add extract-i18n builder

packages/custom-esbuild/README.md

@@ -182,6 +182,28 @@ The `@angular-builders/custom-esbuild:dev-server` is an enhanced version of the
   }
 ```
 
+## Custom ESBuild `extract-i18n`
+
+Angular `extract-i18n` task expects builder name to equal `@angular-devkit/build-angular:application` or `@angular-devkit/build-angular:application` in order to run esbuild-based i18n messages extraction.
+
+The `@angular-builders/custom-esbuild:extract-i18n` is an enhanced version of the `@angular-devkit/build-angular:extract-i18n` builder.
+It mimics the real builder name and strips additional configuration properties (`indexHtmlTransformer`, `plugins`) to ensure the process succeeds.
+
+### Example
+
+`angular.json`:
+
+```js
+"architect": {
+  ...
+  "extract-i18n": {
+    "builder": "@angular-builders/custom-esbuild:extract-i18n",
+      "options": {
+      "buildTarget": "my-project:build"
+    }
+  }
+```
+
 # Index Transform
 
 Since Angular 8, `index.html` is not generated as part of the build. If you want to modify your `index.html`, you should use the `indexHtmlTransformer` option. `indexHtmlTransformer` is a path (relative to the workspace root) to a `.js` or `.ts` file that exports a transformation function for `index.html`. If `indexHtmlTransformer` is written in TypeScript, the application's `tsConfig` file will be used by `tsnode` for its execution:

packages/custom-esbuild/builders.json

@@ -10,6 +10,11 @@
       "implementation": "./dist/dev-server",
       "schema": "./dist/dev-server/schema.json",
       "description": "Build browser app extended with custom esbuild config"
+    },
+    "extract-i18n": {
+      "implementation": "./dist/extract-i18n",
+      "schema": "./dist/extract-i18n/schema.json",
+      "description": "Extract i18n"
     }
   }
 }

packages/custom-esbuild/src/extract-i18n/index.ts

@@ -0,0 +1,29 @@
+import { BuilderContext, createBuilder } from '@angular-devkit/architect';
+import type { ExtractI18nBuilderOptions } from '@angular-devkit/build-angular';
+import { executeExtractI18nBuilder } from '@angular-devkit/build-angular';
+
+export function buildCustomEsbuildExtractI18n(
+  options: ExtractI18nBuilderOptions,
+  context: BuilderContext
+) {
+  context.getBuilderNameForTarget = async (_) => {
+    return '@angular-devkit/build-angular:application'
+  };
+
+  const originalGetTargetOptions = context.getTargetOptions;
+  context.getTargetOptions = async (target) => {
+    const options = await originalGetTargetOptions(target);
+    delete options.indexHtmlTransformer;
+    delete options.plugins;
+    return options;
+  };
+
+  return executeExtractI18nBuilder(
+    options,
+    context
+  )
+}
+
+export default createBuilder(
+  buildCustomEsbuildExtractI18n
+);

packages/custom-esbuild/src/extract-i18n/schema.ext.json

@@ -0,0 +1,5 @@
+{
+  "$id": "CustomEsbuildExtractI18nSchema",
+  "title": "Custom ESBuild extract-i18n schema for Angular build facade",
+  "description": "Extract i18n target options"
+}

packages/custom-esbuild/src/index.ts

@@ -1,2 +1,3 @@
 export * from './application';
 export * from './dev-server';
+export * from './extract-i18n';

packages/custom-esbuild/src/schemes.ts

@@ -10,4 +10,9 @@ module.exports = [
     schemaExtensionPaths: [`${__dirname}/dev-server/schema.ext.json`],
     newSchemaPath: `${__dirname}/../dist/dev-server/schema.json`,
   },
+  {
+    originalSchemaPath: '@angular-devkit/build-angular/src/builders/extract-i18n/schema.json',
+    schemaExtensionPaths: [`${__dirname}/extract-i18n/schema.ext.json`],
+    newSchemaPath: `${__dirname}/../dist/extract-i18n/schema.json`,
+  },
 ];