i18n extracts messages of own componentlib node module but isn't translating them #57800
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
No
Description
I have a main app with i18n support and this app uses components of a componentlib which I have created myself. The componentlib is packaged with ng-packagr and is installed as a node module in the main app. The problem is that messages of the componentlib components get extracted just like messages from the main app to messages.xlf (german) and messages.en.xlf but always the german version is displayed for the componentlib components eventhough for the main app the german/english version is displayed depending on the version i start. I expected that the componentlib messages get translated just like the main app messages since the extract is working just fine.
Example component in componentlib
<p-button i18n-label="@@pl.fileUploadLabel" i18n class="mt-4 mb-0" label="Noch ein Label">Noch ein Text</p-button>
Translation in main-app
<trans-unit id="pl.fileUploadLabel" datatype="html"> <source>Noch ein Label</source> <target state="new">Another Label</target> </trans-unit> <trans-unit id="116285064937012435" datatype="html"> <source>Noch ein Text</source> <target state="new">Another Text</target> </trans-unit>
Usage in main-app
`import { ExampleComponent } from '@pl/pattern-library';
@component({
selector: 'example-dialog',
standalone: true,
templateUrl: './example-dialog.component.html',
styleUrl: './example-dialog.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
ExampleComponent,
// ... Other components are not relevant for this example
],
})`
in .html
<pl-example-component></pl-example-component>
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
The componentlib components are always displayed in the german version. There is no other error displayed. Please provide the environment you discovered this bug in (run ng version)
## main-app project.json (both projects are setup with nx) `{ "name": "main-app", "$schema": "node_modules/nx/schemas/project-schema.json", "projectType": "application", "sourceRoot": "src", "prefix": "main-app", "i18n": { "sourceLocale": "de", "locales": { "en": "src/locale/messages.en.xlf" } }, "generators": { "@schematics/angular:component": { "style": "scss" } }, "targets": { "build": { "executor": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/main-app", "index": "src/index.html", "browser": "src/main.ts", "polyfills": [ "zone.js" ], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [], "localize": true, "i18nMissingTranslation": "warning" }, "configurations": { "production": { "fileReplacements": [ { "replace": "libs/shared/environment/src/lib/environments/environment.ts", "with": "libs/shared/environment/src/lib/environments/environment.prod.ts" } ], "outputHashing": "all" }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true }, "de": { "localize": [ "de" ] }, "en": { "localize": [ "en" ] } }, "defaultConfiguration": "production" }, "serve": { "executor": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "main-app:build:production", "fileReplacements": [ { "replace": "libs/shared/environment/src/lib/environments/environment.ts", "with": "libs/shared/environment/src/lib/environments/environment.prod.ts" } ] }, "development-de": { "buildTarget": "main-app:build:development,de" }, "development-en": { "buildTarget": "main-app:build:development,en" } }, "defaultConfiguration": "development" }, "extract-i18n": { "executor": "ng-extract-i18n-merge:ng-extract-i18n-merge", "options": { "buildTarget": "main-app:build", "format": "xlf", "outputPath": "src/locale", "targetFiles": [ "messages.en.xlf" ] } } }` ## componentlib project.json (both projects are setup with nx) `{ "name": "pattern-library", "$schema": "../../node_modules/nx/schemas/project-schema.json", "sourceRoot": "libs/pattern-library/src", "prefix": "pl", "projectType": "library", "tags": [], "targets": { "build": { "executor": "@nx/angular:package", "outputs": [ "{workspaceRoot}/dist/{projectRoot}" ], "options": { "project": "libs/pattern-library/ng-package.json" }, "configurations": { "production": { "tsConfig": "libs/pattern-library/tsconfig.lib.prod.json" }, "development": { "tsConfig": "libs/pattern-library/tsconfig.lib.json" } }, "defaultConfiguration": "production" }, "test": { "executor": "@nx/jest:jest", "outputs": [ "{workspaceRoot}/coverage/{projectRoot}" ], "options": { "jestConfig": "libs/pattern-library/jest.config.ts" } }, "lint": { "executor": "@nx/eslint:lint", "outputs": [ "{options.outputFile}" ], "options": { "lintFilePatterns": [ "libs/pattern-library/**/*.ts", "libs/pattern-library/**/*.html", "libs/pattern-library/package.json" ] } } } } "executor": "@nx/eslint:lint", "outputs": [ "{options.outputFile}" ], "options": { "lintFilePatterns": [ "libs/pattern-library/**/*.ts", "libs/pattern-library/**/*.html", "libs/pattern-library/package.json" ] } } } } Anything else?
No response