feat(compiler): reference ICU message IDs from their placeholders (#43534)

petebacondarwin · AndrewKushnir · commit c85bcb0c636d · 2021-10-18T09:23:59.000-07:00
When extracting i18n messages from templates, ICU messages are split out from the message that contains them. This can make it difficult in the translation files to match up the two messages, especially if the ICU is reused in multiple placeholders. This commit builds on top of the previous one to expose the message ID of ICU messages from the ICU placeholders as additional metadata in the `$localize` tagged strings. Now the metablock following any placeholder can also contain the associated ID delimited from the placeholder name by `@@`. Fixes #17506 PR Close #43534
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/GOLDEN_PARTIAL.js
@@ -10,14 +10,14 @@ export class MyComponent {
 }
 MyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: `
-  <div i18n>{gender, select, male {male} female {female} other {other}}</div>
+  <div i18n>before {gender, select, male {male} female {female} other {other}} after</div>
 `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'my-component',
                     template: `
-  <div i18n>{gender, select, male {male} female {female} other {other}}</div>
+  <div i18n>before {gender, select, male {male} female {female} other {other}} after</div>
 `
                 }]
         }] });
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/TEST_CASES.json
@@ -4,7 +4,7 @@
     {
       "description": "should handle single icus",
       "inputFiles": [
-        "single_icu"
+        "single_icu.ts"
       ],
       "expectations": [
         {
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/different_contexts.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/different_contexts.js
@@ -17,7 +17,7 @@ vars: 2,
 consts: function() {
   __i18nIcuMsg__('{VAR_SELECT, select, male {male} female {female} other {other}}', [['VAR_SELECT', String.raw`\uFFFD0\uFFFD`]])
   __i18nIcuMsg__('{VAR_SELECT, select, 10 {ten} 20 {twenty} 30 {thirty} other {other}}', [['VAR_SELECT', String.raw`\uFFFD0:1\uFFFD`]])
-  __i18nMsg__(' {$icu} {$startTagSpan} {$icu_1} {$closeTagSpan}', [['startTagSpan', String.raw`\uFFFD*2:1\uFFFD\uFFFD#1:1\uFFFD`], ['closeTagSpan', String.raw`\uFFFD/#1:1\uFFFD\uFFFD/*2:1\uFFFD`], ['icu', '$i18n_0$'], ['icu_1', '$i18n_1$']], {})
+  __i18nMsg__(' {$icu} {$startTagSpan} {$icu_1} {$closeTagSpan}', [['startTagSpan', String.raw`\uFFFD*2:1\uFFFD\uFFFD#1:1\uFFFD`], ['closeTagSpan', String.raw`\uFFFD/#1:1\uFFFD\uFFFD/*2:1\uFFFD`], ['icu', '$i18n_0$', '7670372064920373295'], ['icu_1', '$i18n_1$', '4590395557003415341']], {})
   return [
     $i18n_2$,
     [__AttributeMarker.Template__, "ngIf"]
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/html_content.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/html_content.js
@@ -2,7 +2,7 @@ decls: 5,
 vars: 1,
 consts: function() {
   __i18nIcuMsg__('{VAR_SELECT, select, male {male - {START_BOLD_TEXT}male{CLOSE_BOLD_TEXT}} female {female {START_BOLD_TEXT}female{CLOSE_BOLD_TEXT}} other {{START_TAG_DIV}{START_ITALIC_TEXT}other{CLOSE_ITALIC_TEXT}{CLOSE_TAG_DIV}}}', [['VAR_SELECT', String.raw`\uFFFD0\uFFFD`], ['START_BOLD_TEXT', '<b>'], ['CLOSE_BOLD_TEXT', '</b>'], ['START_ITALIC_TEXT', '<i>'], ['CLOSE_ITALIC_TEXT', '</i>'], ['START_TAG_DIV', '<div class=\\"other\\">'], ['CLOSE_TAG_DIV', '</div>'],])
-  __i18nMsg__(' {$icu} {$startBoldText}Other content{$closeBoldText}{$startTagDiv}{$startItalicText}Another content{$closeItalicText}{$closeTagDiv}', [['startBoldText', String.raw`\uFFFD#2\uFFFD`], ['closeBoldText', String.raw`\uFFFD/#2\uFFFD`], ['startTagDiv', String.raw`\uFFFD#3\uFFFD`], ['startItalicText', String.raw`\uFFFD#4\uFFFD`], ['closeItalicText', String.raw`\uFFFD/#4\uFFFD`], ['closeTagDiv', String.raw`\uFFFD/#3\uFFFD`], ['icu', '$I18N_1$']], {})
+  __i18nMsg__(' {$icu} {$startBoldText}Other content{$closeBoldText}{$startTagDiv}{$startItalicText}Another content{$closeItalicText}{$closeTagDiv}', [['startBoldText', String.raw`\uFFFD#2\uFFFD`], ['closeBoldText', String.raw`\uFFFD/#2\uFFFD`], ['startTagDiv', String.raw`\uFFFD#3\uFFFD`], ['startItalicText', String.raw`\uFFFD#4\uFFFD`], ['closeItalicText', String.raw`\uFFFD/#4\uFFFD`], ['closeTagDiv', String.raw`\uFFFD/#3\uFFFD`], ['icu', '$I18N_1$', '4731057199984078679']], {})
   return [
     $i18n_1$,
     [__AttributeMarker.Classes__, "other"]
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/icu_with_interpolations.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/icu_with_interpolations.js
@@ -17,7 +17,7 @@ vars: 4,
 consts: function() {
   __i18nIcuMsg__('{VAR_SELECT, select, male {male {INTERPOLATION}} female {female {INTERPOLATION_1}} other {other}}',[ ['VAR_SELECT', String.raw`\uFFFD0\uFFFD`], ['INTERPOLATION', String.raw`\uFFFD1\uFFFD`], ['INTERPOLATION_1', String.raw`\uFFFD2\uFFFD`]])
   __i18nIcuMsg__('{VAR_SELECT, select, 10 {ten} 20 {twenty} 30 {thirty} other {other: {INTERPOLATION}}}', [['VAR_SELECT', String.raw`\uFFFD0:1\uFFFD`], ['INTERPOLATION', String.raw`\uFFFD1:1\uFFFD`]])
-  __i18nMsg__(' {$icu} {$startTagSpan} {$icu_1} {$closeTagSpan}', [['startTagSpan', String.raw`\uFFFD*2:1\uFFFD\uFFFD#1:1\uFFFD`], ['closeTagSpan', String.raw`\uFFFD/#1:1\uFFFD\uFFFD/*2:1\uFFFD`], ['icu', '$i18n_0$'], ['icu_1', '$i18n_1$']], {})
+  __i18nMsg__(' {$icu} {$startTagSpan} {$icu_1} {$closeTagSpan}', [['startTagSpan', String.raw`\uFFFD*2:1\uFFFD\uFFFD#1:1\uFFFD`], ['closeTagSpan', String.raw`\uFFFD/#1:1\uFFFD\uFFFD/*2:1\uFFFD`], ['icu', '$i18n_0$', '567200399523107034'], ['icu_1', '$i18n_1$', '5762277079421427850']], {})
   return [
     $i18n_2$,
     [__AttributeMarker.Template__, "ngIf"]
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/multiple_icus.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/multiple_icus.js
@@ -3,7 +3,7 @@ vars: 2,
 consts: function() {
   __i18nIcuMsg__('{VAR_SELECT, select, male {male} female {female} other {other}}', [['VAR_SELECT', String.raw`\uFFFD0\uFFFD`]])
   __i18nIcuMsg__('{VAR_SELECT, select, 10 {ten} 20 {twenty} 30 {thirty} other {other}}', [['VAR_SELECT', String.raw`\uFFFD1\uFFFD`]])
-  __i18nMsg__(' {$icu} {$icu_1} ', [['icu', '$i18n_0$'], ['icu_1', '$i18n_1$']], {})
+  __i18nMsg__(' {$icu} {$icu_1} ', [['icu', '$i18n_0$', '7670372064920373295'], ['icu_1', '$i18n_1$', '4590395557003415341']], {})
   return [
     $i18n_2$
   ];
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/nested_icus.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/nested_icus.js
@@ -2,7 +2,7 @@ decls: 2,
 vars: 2,
 consts: function() {
   __i18nIcuMsg__('{VAR_SELECT_1, select, male {male of age: {VAR_SELECT, select, 10 {ten} 20 {twenty} 30 {thirty} other {other}}} female {female} other {other}}', [['VAR_SELECT', String.raw`\uFFFD0\uFFFD`], ['VAR_SELECT_1', String.raw`\uFFFD1\uFFFD`]])
-  __i18nMsg__(' {$icu} ', [['icu', '$i18n_0$']], {})
+  __i18nMsg__(' {$icu} ', [['icu', '$i18n_0$', '2960440207608193372']], {})
   return [
     $i18n_1$
   ];
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/shared_placeholder.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/shared_placeholder.js
@@ -63,7 +63,7 @@ consts: function() {
       $I18N_0$ = $MSG_APP_SPEC_TS_0$;
   }
   else {
-      $I18N_0$ = $localize ` ${"\uFFFDI18N_EXP_ICU\uFFFD"}:ICU: ${"\uFFFD#2\uFFFD"}:START_TAG_DIV: ${"\uFFFDI18N_EXP_ICU\uFFFD"}:ICU: ${"[\uFFFD/#2\uFFFD|\uFFFD/#1:1\uFFFD\uFFFD/*3:1\uFFFD]"}:CLOSE_TAG_DIV:${"\uFFFD*3:1\uFFFD\uFFFD#1:1\uFFFD"}:START_TAG_DIV_1: ${"\uFFFDI18N_EXP_ICU\uFFFD"}:ICU: ${"[\uFFFD/#2\uFFFD|\uFFFD/#1:1\uFFFD\uFFFD/*3:1\uFFFD]"}:CLOSE_TAG_DIV:`;
+      $I18N_0$ = $localize ` ${"\uFFFDI18N_EXP_ICU\uFFFD"}:ICU@@7670372064920373295: ${"\uFFFD#2\uFFFD"}:START_TAG_DIV: ${"\uFFFDI18N_EXP_ICU\uFFFD"}:ICU@@7670372064920373295: ${"[\uFFFD/#2\uFFFD|\uFFFD/#1:1\uFFFD\uFFFD/*3:1\uFFFD]"}:CLOSE_TAG_DIV:${"\uFFFD*3:1\uFFFD\uFFFD#1:1\uFFFD"}:START_TAG_DIV_1: ${"\uFFFDI18N_EXP_ICU\uFFFD"}:ICU@@7670372064920373295: ${"[\uFFFD/#2\uFFFD|\uFFFD/#1:1\uFFFD\uFFFD/*3:1\uFFFD]"}:CLOSE_TAG_DIV:`;
   }
 
   $I18N_0$ = $r3$.ɵɵi18nPostprocess($I18N_0$, {
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/single_icu.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/single_icu.js
@@ -2,9 +2,8 @@ decls: 2,
 vars: 1,
 consts: function() {
   __i18nIcuMsg__('{VAR_SELECT, select, male {male} female {female} other {other}}',[['VAR_SELECT', String.raw`\uFFFD0\uFFFD`]])
-  return [
-    $i18n_0$
-  ];
+  __i18nMsg__('before {$icu} after', [['icu', '$i18n_0$', '7670372064920373295']], {})
+  return [$i18n_1$];
 },
 template: function MyComponent_Template(rf, ctx) {
   if (rf & 1) {
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/single_icu.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/single_icu.ts
@@ -3,7 +3,7 @@ import {Component, NgModule} from '@angular/core';
 @Component({
   selector: 'my-component',
   template: `
-  <div i18n>{gender, select, male {male} female {female} other {other}}</div>
+  <div i18n>before {gender, select, male {male} female {female} other {other}} after</div>
 `
 })
 export class MyComponent {
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_non_legacy.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_non_legacy.js
@@ -4,4 +4,4 @@ def`;
 $I18N_4$ = $localize `{VAR_SELECT, select, =0 {zero
     }}`
 …
-$I18N_3$ = $localize ` Some Message ${$I18N_4$}:ICU:`;
+$I18N_3$ = $localize ` Some Message ${$I18N_4$}:ICU@@2416068396348331473:`;
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/inline_template_non_legacy.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/inline_template_non_legacy.js
@@ -6,4 +6,4 @@ $I18N_4$ = $localize `{VAR_SELECT, select, =0 {zero
 …
 $I18N_3$ = $localize `
 Some Message
-${$I18N_4$}:ICU:`;
+${$I18N_4$}:ICU@@7530413425895265894:`;
diff --git a/packages/compiler-cli/test/compliance/test_helpers/expected_file_macros.ts b/packages/compiler-cli/test/compliance/test_helpers/expected_file_macros.ts
@@ -59,9 +59,11 @@ function parsePlaceholders(str: string): Placeholder[] {
   const placeholders = eval(`(${str})`);
   if (!Array.isArray(placeholders) ||
       !placeholders.every(
-          p => Array.isArray(p) && p.length === 2 && typeof p[0] === 'string' &&
-              typeof p[1] === 'string')) {
-    throw new Error('Expected an array of Placeholder arrays (`[string, string]`) but got ' + str);
+          p => Array.isArray(p) && p.length >= 2 && typeof p[0] === 'string' &&
+              typeof p[1] === 'string' && (p.length === 2 || typeof p[2] === 'string'))) {
+    throw new Error(
+        'Expected an array of Placeholder arrays (`[name: string, identifier: string, associatedId?: string]`) but got ' +
+        str);
   }
   return placeholders;
 }
diff --git a/packages/compiler-cli/test/compliance/test_helpers/i18n_helpers.ts b/packages/compiler-cli/test/compliance/test_helpers/i18n_helpers.ts
@@ -60,10 +60,12 @@ export function i18nIcuMsg(message: string, placeholders: Placeholder[]): string
 /**
  * Describes placeholder type used in tests.
  *
- * Note: the type is an array (not an object), since it's important to preserve the order of
- * placeholders (so that we can compare it with generated output).
+ * - The first item is the placeholder name.
+ * - The second item is the identifier of the variable that contains the placeholder.
+ * - The third (optional) items is the id of the message that this placeholder references.
+ *   This is used for matching ICU placeholders to ICU messages.
  */
-export type Placeholder = [string, string];
+export type Placeholder = [name: string, indentifier: string, associatedId: string];
 
 /**
  * Describes message metadata object.
@@ -80,7 +82,7 @@ interface Meta {
  */
 function i18nPlaceholdersToString(placeholders: Placeholder[]): string {
   if (placeholders.length === 0) return '';
-  const result = placeholders.map(([key, value]) => `"${key}": ${quotedValue(value)}`);
+  const result = placeholders.map(([name, identifier]) => `"${name}": ${quotedValue(identifier)}`);
   return `, { ${result.join(',')} }`;
 }
 
@@ -90,11 +92,12 @@ function i18nPlaceholdersToString(placeholders: Placeholder[]): string {
 function i18nMsgInsertLocalizePlaceholders(message: string, placeholders: Placeholder[]): string {
   if (placeholders.length > 0) {
     message = message.replace(/{\$(.*?)}/g, function(_, name) {
-      const value = placeholders.find(([k, _]) => k === name)![1];
+      const placeholder = placeholders.find((p) => p[0] === name)!;
       // e.g. startDivTag -> START_DIV_TAG
       const key = name.replace(/[A-Z]/g, (ch: string) => '_' + ch).toUpperCase();
+      const associated = placeholder.length === 3 ? `@@${placeholder[2]}` : '';
       return '$' +
-          `{${quotedValue(value)}}:${key}:`;
+          `{${quotedValue(placeholder[1])}}:${key}${associated}:`;
     });
   }
   return message;
diff --git a/packages/compiler/src/i18n/i18n_ast.ts b/packages/compiler/src/i18n/i18n_ast.ts
@@ -26,6 +26,8 @@ export class Message {
   /** The ids to use if there are no custom id and if `i18nLegacyMessageIdFormat` is not empty */
   legacyIds: string[] = [];
 
+  messageString = serializeMessage(this.nodes);
+
   /**
    * @param nodes message AST
    * @param placeholders maps placeholder names to static content and their source spans
@@ -200,3 +202,42 @@ export class RecurseVisitor implements Visitor {
 
   visitIcuPlaceholder(ph: IcuPlaceholder, context?: any): any {}
 }
+
+
+/**
+ * Serialize the message to the Localize backtick string format that would appear in compiled code.
+ */
+function serializeMessage(messageNodes: Node[]): string {
+  const visitor = new LocalizeMessageStringVisitor();
+  const str = messageNodes.map(n => n.visit(visitor)).join('');
+  return str;
+}
+
+class LocalizeMessageStringVisitor implements Visitor {
+  visitText(text: Text): any {
+    return text.value;
+  }
+
+  visitContainer(container: Container): any {
+    return container.children.map(child => child.visit(this)).join('');
+  }
+
+  visitIcu(icu: Icu): any {
+    const strCases =
+        Object.keys(icu.cases).map((k: string) => `${k} {${icu.cases[k].visit(this)}}`);
+    return `{${icu.expressionPlaceholder}, ${icu.type}, ${strCases.join(' ')}}`;
+  }
+
+  visitTagPlaceholder(ph: TagPlaceholder): any {
+    const children = ph.children.map(child => child.visit(this)).join('');
+    return `{$${ph.startName}}${children}{$${ph.closeName}}`;
+  }
+
+  visitPlaceholder(ph: Placeholder): any {
+    return `{$${ph.name}}`;
+  }
+
+  visitIcuPlaceholder(ph: IcuPlaceholder): any {
+    return `{$${ph.name}}`;
+  }
+}
diff --git a/packages/compiler/src/output/output_ast.ts b/packages/compiler/src/output/output_ast.ts
@@ -6,6 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {computeMsgId} from '../i18n/digest';
+import {Message} from '../i18n/i18n_ast';
 import {ParseSourceSpan} from '../parse_util';
 import {I18nMeta} from '../render3/view/i18n/meta';
 
@@ -524,11 +526,29 @@ export class TemplateLiteralElement {
   }
 }
 
-export abstract class MessagePiece {
+export class LiteralPiece {
   constructor(public text: string, public sourceSpan: ParseSourceSpan) {}
 }
-export class LiteralPiece extends MessagePiece {}
-export class PlaceholderPiece extends MessagePiece {}
+export class PlaceholderPiece {
+  /**
+   * Create a new instance of a `PlaceholderPiece`.
+   *
+   * @param text the name of this placeholder (e.g. `PH_1`).
+   * @param sourceSpan the location of this placeholder in its localized message the source code.
+   * @param associatedMessage reference to another message that this placeholder is associated with.
+   * The `associatedMessage` is mainly used to provide a relationship to an ICU message that has
+   * been extracted out from the message containing the placeholder.
+   */
+  constructor(
+      public text: string, public sourceSpan: ParseSourceSpan, public associatedMessage?: Message) {
+  }
+}
+
+export type MessagePiece = LiteralPiece|PlaceholderPiece;
+
+const MEANING_SEPARATOR = '|';
+const ID_SEPARATOR = '@@';
+const LEGACY_ID_INDICATOR = '␟';
 
 export class LocalizedString extends Expression {
   constructor(
@@ -560,10 +580,6 @@ export class LocalizedString extends Expression {
    * @param messagePart The first part of the tagged string
    */
   serializeI18nHead(): CookedRawString {
-    const MEANING_SEPARATOR = '|';
-    const ID_SEPARATOR = '@@';
-    const LEGACY_ID_INDICATOR = '␟';
-
     let metaBlock = this.metaBlock.description || '';
     if (this.metaBlock.meaning) {
       metaBlock = `${this.metaBlock.meaning}${MEANING_SEPARATOR}${metaBlock}`;
@@ -593,14 +609,24 @@ export class LocalizedString extends Expression {
    * Serialize the given `placeholderName` and `messagePart` into "cooked" and "raw" strings that
    * can be used in a `$localize` tagged string.
    *
-   * @param placeholderName The placeholder name to serialize
-   * @param messagePart The following message string after this placeholder
+   * The format is `:<placeholder-name>[@@<associated-id>]:`.
+   *
+   * The `associated-id` is the message id of the (usually an ICU) message to which this placeholder
+   * refers.
+   *
+   * @param partIndex The index of the message part to serialize.
    */
   serializeI18nTemplatePart(partIndex: number): CookedRawString {
-    const placeholderName = this.placeHolderNames[partIndex - 1].text;
+    const placeholder = this.placeHolderNames[partIndex - 1];
     const messagePart = this.messageParts[partIndex];
+    let metaBlock = placeholder.text;
+    if (placeholder.associatedMessage?.legacyIds.length === 0) {
+      metaBlock += `${ID_SEPARATOR}${
+          computeMsgId(
+              placeholder.associatedMessage.messageString, placeholder.associatedMessage.meaning)}`;
+    }
     return createCookedRawString(
-        placeholderName, messagePart.text, this.getMessagePartSourceSpan(partIndex));
+        metaBlock, messagePart.text, this.getMessagePartSourceSpan(partIndex));
   }
 }
 
diff --git a/packages/compiler/src/render3/view/i18n/localize_utils.ts b/packages/compiler/src/render3/view/i18n/localize_utils.ts
@@ -30,50 +30,57 @@ export function createLocalizeStatements(
  * The result can be used for generating the `$localize` tagged template literals.
  */
 class LocalizeSerializerVisitor implements i18n.Visitor {
-  visitText(text: i18n.Text, context: o.MessagePiece[]): any {
-    if (context[context.length - 1] instanceof o.LiteralPiece) {
+  constructor(
+      private placeholderToMessage: {[phName: string]: i18n.Message},
+      private pieces: o.MessagePiece[]) {}
+
+  visitText(text: i18n.Text): any {
+    if (this.pieces[this.pieces.length - 1] instanceof o.LiteralPiece) {
       // Two literal pieces in a row means that there was some comment node in-between.
-      context[context.length - 1].text += text.value;
+      this.pieces[this.pieces.length - 1].text += text.value;
     } else {
       const sourceSpan = new ParseSourceSpan(
           text.sourceSpan.fullStart, text.sourceSpan.end, text.sourceSpan.fullStart,
           text.sourceSpan.details);
-      context.push(new o.LiteralPiece(text.value, sourceSpan));
+      this.pieces.push(new o.LiteralPiece(text.value, sourceSpan));
     }
   }
 
-  visitContainer(container: i18n.Container, context: o.MessagePiece[]): any {
-    container.children.forEach(child => child.visit(this, context));
+  visitContainer(container: i18n.Container): any {
+    container.children.forEach(child => child.visit(this));
   }
 
-  visitIcu(icu: i18n.Icu, context: o.MessagePiece[]): any {
-    context.push(new o.LiteralPiece(serializeIcuNode(icu), icu.sourceSpan));
+  visitIcu(icu: i18n.Icu): any {
+    this.pieces.push(new o.LiteralPiece(serializeIcuNode(icu), icu.sourceSpan));
   }
 
-  visitTagPlaceholder(ph: i18n.TagPlaceholder, context: o.MessagePiece[]): any {
-    context.push(this.createPlaceholderPiece(ph.startName, ph.startSourceSpan ?? ph.sourceSpan));
+  visitTagPlaceholder(ph: i18n.TagPlaceholder): any {
+    this.pieces.push(
+        this.createPlaceholderPiece(ph.startName, ph.startSourceSpan ?? ph.sourceSpan));
     if (!ph.isVoid) {
-      ph.children.forEach(child => child.visit(this, context));
-      context.push(this.createPlaceholderPiece(ph.closeName, ph.endSourceSpan ?? ph.sourceSpan));
+      ph.children.forEach(child => child.visit(this));
+      this.pieces.push(
+          this.createPlaceholderPiece(ph.closeName, ph.endSourceSpan ?? ph.sourceSpan));
     }
   }
 
-  visitPlaceholder(ph: i18n.Placeholder, context: o.MessagePiece[]): any {
-    context.push(this.createPlaceholderPiece(ph.name, ph.sourceSpan));
+  visitPlaceholder(ph: i18n.Placeholder): any {
+    this.pieces.push(this.createPlaceholderPiece(ph.name, ph.sourceSpan));
   }
 
-  visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): any {
-    context.push(this.createPlaceholderPiece(ph.name, ph.sourceSpan));
+  visitIcuPlaceholder(ph: i18n.IcuPlaceholder): any {
+    this.pieces.push(
+        this.createPlaceholderPiece(ph.name, ph.sourceSpan, this.placeholderToMessage[ph.name]));
   }
 
-  private createPlaceholderPiece(name: string, sourceSpan: ParseSourceSpan): o.PlaceholderPiece {
+  private createPlaceholderPiece(
+      name: string, sourceSpan: ParseSourceSpan,
+      associatedMessage?: i18n.Message): o.PlaceholderPiece {
     return new o.PlaceholderPiece(
-        formatI18nPlaceholderName(name, /* useCamelCase */ false), sourceSpan);
+        formatI18nPlaceholderName(name, /* useCamelCase */ false), sourceSpan, associatedMessage);
   }
 }
 
-const serializerVisitor = new LocalizeSerializerVisitor();
-
 /**
  * Serialize an i18n message into two arrays: messageParts and placeholders.
  *
@@ -85,7 +92,8 @@ const serializerVisitor = new LocalizeSerializerVisitor();
 export function serializeI18nMessageForLocalize(message: i18n.Message):
     {messageParts: o.LiteralPiece[], placeHolders: o.PlaceholderPiece[]} {
   const pieces: o.MessagePiece[] = [];
-  message.nodes.forEach(node => node.visit(serializerVisitor, pieces));
+  const serializerVisitor = new LocalizeSerializerVisitor(message.placeholderToMessage, pieces);
+  message.nodes.forEach(node => node.visit(serializerVisitor));
   return processMessagePieces(pieces);
 }
 
diff --git a/packages/compiler/src/render3/view/i18n/meta.ts b/packages/compiler/src/render3/view/i18n/meta.ts
diff --git a/packages/compiler/test/i18n/digest_spec.ts b/packages/compiler/test/i18n/digest_spec.ts
diff --git a/packages/compiler/test/i18n/i18n_ast_spec.ts b/packages/compiler/test/i18n/i18n_ast_spec.ts
diff --git a/packages/compiler/test/render3/view/i18n_spec.ts b/packages/compiler/test/render3/view/i18n_spec.ts

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`{`
`5`	`5`	`"description": "should handle single icus",`
`6`	`6`	`"inputFiles": [`
`7`		`- "single_icu"`
	`7`	`+ "single_icu.ts"`
`8`	`8`	`],`
`9`	`9`	`"expectations": [`
`10`	`10`	`{`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ consts: function() {`
`63`	`63`	`$I18N_0$ = $MSG_APP_SPEC_TS_0$;`
`64`	`64`	`}`
`65`	`65`	`else {`
`66`		- $I18N_0$ = $localize ` ${"\uFFFDI18N_EXP_ICU\uFFFD"}:ICU: ${"\uFFFD#2\uFFFD"}:START_TAG_DIV: ${"\uFFFDI18N_EXP_ICU\uFFFD"}:ICU: ${"[\uFFFD/#2\uFFFD\|\uFFFD/#1:1\uFFFD\uFFFD/3:1\uFFFD]"}:CLOSE_TAG_DIV:${"\uFFFD3:1\uFFFD\uFFFD#1:1\uFFFD"}:START_TAG_DIV_1: ${"\uFFFDI18N_EXP_ICU\uFFFD"}:ICU: ${"[\uFFFD/#2\uFFFD\|\uFFFD/#1:1\uFFFD\uFFFD/*3:1\uFFFD]"}:CLOSE_TAG_DIV:`;
	`66`	+ $I18N_0$ = $localize ` ${"\uFFFDI18N_EXP_ICU\uFFFD"}:ICU@@7670372064920373295: ${"\uFFFD#2\uFFFD"}:START_TAG_DIV: ${"\uFFFDI18N_EXP_ICU\uFFFD"}:ICU@@7670372064920373295: ${"[\uFFFD/#2\uFFFD\|\uFFFD/#1:1\uFFFD\uFFFD/3:1\uFFFD]"}:CLOSE_TAG_DIV:${"\uFFFD3:1\uFFFD\uFFFD#1:1\uFFFD"}:START_TAG_DIV_1: ${"\uFFFDI18N_EXP_ICU\uFFFD"}:ICU@@7670372064920373295: ${"[\uFFFD/#2\uFFFD\|\uFFFD/#1:1\uFFFD\uFFFD/*3:1\uFFFD]"}:CLOSE_TAG_DIV:`;
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`$I18N_0$ = $r3$.ɵɵi18nPostprocess($I18N_0$, {`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import {Component, NgModule} from '@angular/core';`
`3`	`3`	`@Component({`
`4`	`4`	`selector: 'my-component',`
`5`	`5`	template: `
`6`		`- <div i18n>{gender, select, male {male} female {female} other {other}}</div>`
	`6`	`+ <div i18n>before {gender, select, male {male} female {female} other {other}} after</div>`
`7`	`7`	`
`8`	`8`	`})`
`9`	`9`	`export class MyComponent {`