i18n tagged sub component inputs are bleeding interpolation values

[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.

• stackblitz: https://stackblitz.com/edit/test-angular-i18n-interpolation?file=src/polyfills.ts
• github: https://github.com/calummm/test-angular-i18n-interpolation

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

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}