Skip to content

i18n tagged sub component inputs are bleeding interpolation values #41869

@calummm

Description

@calummm

🐞 bug report

Affected Package

Relating to @angular/localize and Ivy rendering

Is this a regression?

Unsure, as this project was created for Angular 11.

Description

When passing multiple interpolated values into a sub component and marking those inputs as i18n-, the dynamic portion of the input is bleeding into the next dynamic input.

<app-sub-component 
  firstTest="This string contains number 1 {{ numberOne }}" 
  i18n-firstTest
  secondTest="This string should contain number 2 but instead includes 1 {{ numberTwo }}" 
  i18n-secondTest
></app-sub-component>

This error occurs when running before and after extraction and in develop or production configurations. This issue disappears when disabling Ivy but we would prefer to continue with Ivy given its benefits.

🔬 Minimal Reproduction

A stackblitz has been created but does not present the problem. This is likely due to stackblitz and Ivy issues. A github repo has been provided to present the problem locally with Ivy running correctly.

The application can be started with the standard npm i npm start commands.

There is a single page displaying a subcomponent with expected and actual values. The first sub component has i18n attributes, the second does not.

test with i18n "braces again" is showing an incorrect actual of 1 instead of 3.
test with i18n "multi" is showing an incorrect actual of 1 3 1 instead of 1 2 3

🔥 Exception or Error

No explicit error message

🌍 Your Environment

Angular Version:



Angular CLI: 11.2.11
Node: 12.18.3
OS: win32 x64

Angular: 11.2.12
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.11
@angular-devkit/build-angular   0.1102.11
@angular-devkit/core            11.2.11
@angular-devkit/schematics      11.2.11
@angular/cli                    11.2.11
@schematics/angular             11.2.11
@schematics/update              0.1102.11
rxjs                            6.6.7
typescript                      4.0.7

Metadata

Metadata

Labels

P2The issue is important to a large percentage of users, with a workaroundarea: i18nIssues related to localization and internationalizationstate: has PR

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions