Extracting i18n from Angular applications is broken when using @nx/angular:application or @nx/angular:browser-esbuild builders

[jsprw]

Current Behavior

When running the @angular-devkit/build-angular:extract-i18n to extract i18n messages while using @nx/angular:application or @nx/angular:browser-esbuild builders, the extraction will complete succesfully, however the generated file will be empty.

The final result says:
Extraction Complete. (Messages: 0)

This is caused by Angular hardcoding their own builders in the extract-i18n builder: https://github.com/angular/angular-cli/blob/8eab5aa9122265396fccb9592aab71caf7d45d19/packages/angular_devkit/build_angular/src/builders/extract-i18n/builder.ts#L64.

When you use the Angular builder @angular-devkit/build-angular:application, it works fine and extracts all messages. However, you will miss out on the advantages of the NX builders.

Expected Behavior

That the extraction will be run without problems and that the generated translation file is not empty. Maybe copy the entire generator to NX and only change these builder names?

GitHub Repo

https://github.com/nrwl/nx-examples

Steps to Reproduce

1. Change the executor from the products app to @nx/angular:application (https://github.com/nrwl/nx-examples/blob/b36d283837c11db11ced41251c8adfa79aded65a/apps/products/project.json#L14)
2. Add an element to app.component.html that should be extracted (for example <span i18n>This should be in the file</span> in https://github.com/nrwl/nx-examples/blob/master/apps/products/src/app/app.component.html#L4)
3. Run nx run products:extract-i18n
4. See that the generated messages.xlf is empty.
5. Like step 1, but change the executor @angular-devkit/build-angular:application
6. Like step 3, run nx run products:extract-i18n
7. See that the added span from step 2 is now included in messages.xlf

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 21.2.0
   OS     : darwin-x64
   yarn   : 4.0.2
   
   nx                 : 17.2.8
   @nx/js             : 17.2.8
   @nx/jest           : 17.2.8
   @nx/linter         : 17.2.8
   @nx/eslint         : 17.2.8
   @nx/workspace      : 17.2.8
   @nx/angular        : 17.2.8
   @nx/cypress        : 17.2.8
   @nx/devkit         : 17.2.8
   @nx/eslint-plugin  : 17.2.8
   @nx/nest           : 17.2.8
   @nx/node           : 17.2.8
   @nx/plugin         : 17.2.8
   @nx/storybook      : 17.2.8
   @nrwl/tao          : 17.2.8
   @nx/web            : 17.2.8
   @nx/webpack        : 17.2.8
   typescript         : 5.2.2

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[Eriston0]

Unfortunately, experiencing the same issue, when moving to esbuild.

[jsprw]

I am using this (requires jq) as a workaround, it temporarily replaces the NX builder with the Angular builder.

APP=$1

PROJECT_FILE="apps/${APP}/project.json"
OLD_CONTENTS=$(cat "$PROJECT_FILE")
CURRENT_EXECUTOR=$(jq '.targets.build.executor' "$PROJECT_FILE")

## WORKAROUND FOR https://github.com/nrwl/nx/issues/21225
if [[ $CURRENT_EXECUTOR != '@angular-devkit/build-angular:application' ]]; then
    NEW_CONTENTS=$(jq '.targets.build.executor = "@angular-devkit/build-angular:application"' "$PROJECT_FILE")
    echo "$NEW_CONTENTS" >"$PROJECT_FILE"
fi

CMD_OUTPUT=$(nx extract-i18n ${APP} --output-path apps/${APP}/i18n 2>&1 | tee /dev/tty)

echo "$OLD_CONTENTS" >"$PROJECT_FILE"

## WORKAROUND FOR https://github.com/angular/angular-cli/issues/23635
if [[ "$CMD_OUTPUT" =~ "Duplicate messages" ]]; then
    echo "Extraction contains duplicate messages. Quitting."
    exit 1
fi

[t-mish]

If someone is looking for a simple workaround - you can just temporarily replace the build executor with the old one while you running extract-i18n:

"targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:application",

After extraction is completed just return it back to the previous value.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.