From 9d5fbf74f42d134b1d717dac259f76b03d9e37f6 Mon Sep 17 00:00:00 2001
From: maxime-allex <ma.allex@gmail.com>
Date: Tue, 6 Dec 2016 15:00:25 +0100
Subject: [PATCH 1/3] feat(compiler): add id property to i18nMessage

---
 .../compiler/src/i18n/extractor_merger.ts     | 29 ++++++++++++-------
 .../@angular/compiler/src/i18n/i18n_ast.ts    |  3 +-
 .../@angular/compiler/src/i18n/i18n_parser.ts | 12 ++++----
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/modules/@angular/compiler/src/i18n/extractor_merger.ts b/modules/@angular/compiler/src/i18n/extractor_merger.ts
index ab7396129443..97015e8d8bba 100644
--- a/modules/@angular/compiler/src/i18n/extractor_merger.ts
+++ b/modules/@angular/compiler/src/i18n/extractor_merger.ts
@@ -18,6 +18,8 @@ import {TranslationBundle} from './translation_bundle';
 const _I18N_ATTR = 'i18n';
 const _I18N_ATTR_PREFIX = 'i18n-';
 const _I18N_COMMENT_PREFIX_REGEXP = /^i18n:?/;
+const MEANING_SEPARATOR = '|';
+const ID_SEPARATOR = '@@';
 
 /**
  * Extract translatable messages from an html AST
@@ -77,7 +79,7 @@ class _Visitor implements html.Visitor {
   // _VisitorMode.Merge only
   private _translations: TranslationBundle;
   private _createI18nMessage:
-      (msg: html.Node[], meaning: string, description: string) => i18n.Message;
+      (msg: html.Node[], meaning: string, description: string, id: string) => i18n.Message;
 
 
   constructor(private _implicitTags: string[], private _implicitAttrs: {[k: string]: string[]}) {}
@@ -330,15 +332,15 @@ class _Visitor implements html.Visitor {
   }
 
   // add a translatable message
-  private _addMessage(ast: html.Node[], meaningAndDesc?: string): i18n.Message {
+  private _addMessage(ast: html.Node[], msgMeta?: string): i18n.Message {
     if (ast.length == 0 ||
         ast.length == 1 && ast[0] instanceof html.Attribute && !(<html.Attribute>ast[0]).value) {
       // Do not create empty messages
       return;
     }
 
-    const [meaning, description] = _splitMeaningAndDesc(meaningAndDesc);
-    const message = this._createI18nMessage(ast, meaning, description);
+    const {meaning, description, id} = _parseMessageMeta(msgMeta);
+    const message = this._createI18nMessage(ast, meaning, description, id);
     this._messages.push(message);
     return message;
   }
@@ -368,7 +370,7 @@ class _Visitor implements html.Visitor {
     attributes.forEach(attr => {
       if (attr.name.startsWith(_I18N_ATTR_PREFIX)) {
         i18nAttributeMeanings[attr.name.slice(_I18N_ATTR_PREFIX.length)] =
-            _splitMeaningAndDesc(attr.value)[0];
+            _parseMessageMeta(attr.value).meaning;
       }
     });
 
@@ -382,7 +384,7 @@ class _Visitor implements html.Visitor {
 
       if (attr.value && attr.value != '' && i18nAttributeMeanings.hasOwnProperty(attr.name)) {
         const meaning = i18nAttributeMeanings[attr.name];
-        const message: i18n.Message = this._createI18nMessage([attr], meaning, '');
+        const message: i18n.Message = this._createI18nMessage([attr], meaning, '', '');
         const nodes = this._translations.get(message);
         if (nodes) {
           if (nodes[0] instanceof html.Text) {
@@ -496,8 +498,15 @@ function _getI18nAttr(p: html.Element): html.Attribute {
   return p.attrs.find(attr => attr.name === _I18N_ATTR) || null;
 }
 
-function _splitMeaningAndDesc(i18n: string): [string, string] {
-  if (!i18n) return ['', ''];
-  const pipeIndex = i18n.indexOf('|');
-  return pipeIndex == -1 ? ['', i18n] : [i18n.slice(0, pipeIndex), i18n.slice(pipeIndex + 1)];
+function _parseMessageMeta(i18n: string): {meaning: string, description: string, id: string} {
+  if (!i18n) return {meaning: '', description: '', id: ''};
+
+  const idIndex = i18n.indexOf(ID_SEPARATOR);
+  const descIndex = i18n.indexOf(MEANING_SEPARATOR);
+  const [meaningAndDesc, id] = (idIndex > -1) ? [i18n.slice(0, idIndex), i18n.slice(idIndex + 2)] :
+                                                [i18n, ''];
+  const [meaning, description] = (descIndex > -1) ? [meaningAndDesc.slice(0, descIndex), meaningAndDesc.slice(descIndex + 1)] :
+                                                    ['', meaningAndDesc];
+
+  return {meaning, description, id};
 }
diff --git a/modules/@angular/compiler/src/i18n/i18n_ast.ts b/modules/@angular/compiler/src/i18n/i18n_ast.ts
index ee3309832494..c3766b625a20 100644
--- a/modules/@angular/compiler/src/i18n/i18n_ast.ts
+++ b/modules/@angular/compiler/src/i18n/i18n_ast.ts
@@ -15,11 +15,12 @@ export class Message {
    * @param placeholderToMessage maps placeholder names to messages (used for nested ICU messages)
    * @param meaning
    * @param description
+   * @param id
    */
   constructor(
       public nodes: Node[], public placeholders: {[phName: string]: string},
       public placeholderToMessage: {[phName: string]: Message}, public meaning: string,
-      public description: string) {}
+      public description: string, public id: string) {}
 }
 
 export interface Node {
diff --git a/modules/@angular/compiler/src/i18n/i18n_parser.ts b/modules/@angular/compiler/src/i18n/i18n_parser.ts
index 3f2856c32fea..e3af025a5050 100644
--- a/modules/@angular/compiler/src/i18n/i18n_parser.ts
+++ b/modules/@angular/compiler/src/i18n/i18n_parser.ts
@@ -22,11 +22,11 @@ const _expParser = new ExpressionParser(new ExpressionLexer());
  * Returns a function converting html nodes to an i18n Message given an interpolationConfig
  */
 export function createI18nMessageFactory(interpolationConfig: InterpolationConfig): (
-    nodes: html.Node[], meaning: string, description: string) => i18n.Message {
+    nodes: html.Node[], meaning: string, description: string, id: string) => i18n.Message {
   const visitor = new _I18nVisitor(_expParser, interpolationConfig);
 
-  return (nodes: html.Node[], meaning: string, description: string) =>
-             visitor.toI18nMessage(nodes, meaning, description);
+  return (nodes: html.Node[], meaning: string, description: string, id: string) =>
+             visitor.toI18nMessage(nodes, meaning, description, id);
 }
 
 class _I18nVisitor implements html.Visitor {
@@ -40,7 +40,7 @@ class _I18nVisitor implements html.Visitor {
       private _expressionParser: ExpressionParser,
       private _interpolationConfig: InterpolationConfig) {}
 
-  public toI18nMessage(nodes: html.Node[], meaning: string, description: string): i18n.Message {
+  public toI18nMessage(nodes: html.Node[], meaning: string, description: string, id: string): i18n.Message {
     this._isIcu = nodes.length == 1 && nodes[0] instanceof html.Expansion;
     this._icuDepth = 0;
     this._placeholderRegistry = new PlaceholderRegistry();
@@ -50,7 +50,7 @@ class _I18nVisitor implements html.Visitor {
     const i18nodes: i18n.Node[] = html.visitAll(this, nodes, {});
 
     return new i18n.Message(
-        i18nodes, this._placeholderToContent, this._placeholderToMessage, meaning, description);
+        i18nodes, this._placeholderToContent, this._placeholderToMessage, meaning, description, id);
   }
 
   visitElement(el: html.Element, context: any): i18n.Node {
@@ -115,7 +115,7 @@ class _I18nVisitor implements html.Visitor {
     // TODO(vicb): add a html.Node -> i18n.Message cache to avoid having to re-create the msg
     const phName = this._placeholderRegistry.getPlaceholderName('ICU', icu.sourceSpan.toString());
     const visitor = new _I18nVisitor(this._expressionParser, this._interpolationConfig);
-    this._placeholderToMessage[phName] = visitor.toI18nMessage([icu], '', '');
+    this._placeholderToMessage[phName] = visitor.toI18nMessage([icu], '', '', '');
     return new i18n.IcuPlaceholder(i18nIcu, phName, icu.sourceSpan);
   }
 

From 03c874fadd5ebd31c62ffbaa543c1af0129633aa Mon Sep 17 00:00:00 2001
From: maxime-allex <ma.allex@gmail.com>
Date: Tue, 6 Dec 2016 15:01:43 +0100
Subject: [PATCH 2/3] feat(compiler): digest methods return i18nMessage id if
 sets

---
 modules/@angular/compiler/src/i18n/digest.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/@angular/compiler/src/i18n/digest.ts b/modules/@angular/compiler/src/i18n/digest.ts
index d00bf803541a..6bc2ff0dd420 100644
--- a/modules/@angular/compiler/src/i18n/digest.ts
+++ b/modules/@angular/compiler/src/i18n/digest.ts
@@ -9,13 +9,13 @@
 import * as i18n from './i18n_ast';
 
 export function digest(message: i18n.Message): string {
-  return sha1(serializeNodes(message.nodes).join('') + `[${message.meaning}]`);
+  return message.id || sha1(serializeNodes(message.nodes).join('') + `[${message.meaning}]`);
 }
 
 export function decimalDigest(message: i18n.Message): string {
   const visitor = new _SerializerIgnoreIcuExpVisitor();
   const parts = message.nodes.map(a => a.visit(visitor, null));
-  return computeMsgId(parts.join(''), message.meaning);
+  return message.id || computeMsgId(parts.join(''), message.meaning);
 }
 
 /**

From b868ce28304ac25cf16e43de08cb7032d85abc15 Mon Sep 17 00:00:00 2001
From: maxime-allex <ma.allex@gmail.com>
Date: Tue, 6 Dec 2016 15:04:59 +0100
Subject: [PATCH 3/3] test(compiler): test i18n explicit id

---
 .../@angular/compiler/src/i18n/i18n_parser.ts |   3 +-
 .../compiler/test/i18n/digest_spec.ts         |  15 +-
 .../test/i18n/extractor_merger_spec.ts        | 135 ++++++++++++------
 .../compiler/test/i18n/integration_spec.ts    |  12 +-
 .../test/i18n/serializers/xliff_spec.ts       |  24 ++++
 .../test/i18n/serializers/xmb_spec.ts         |   6 +
 .../test/i18n/translation_bundle_spec.ts      |  18 +--
 7 files changed, 154 insertions(+), 59 deletions(-)

diff --git a/modules/@angular/compiler/src/i18n/i18n_parser.ts b/modules/@angular/compiler/src/i18n/i18n_parser.ts
index e3af025a5050..cac8435660eb 100644
--- a/modules/@angular/compiler/src/i18n/i18n_parser.ts
+++ b/modules/@angular/compiler/src/i18n/i18n_parser.ts
@@ -40,7 +40,8 @@ class _I18nVisitor implements html.Visitor {
       private _expressionParser: ExpressionParser,
       private _interpolationConfig: InterpolationConfig) {}
 
-  public toI18nMessage(nodes: html.Node[], meaning: string, description: string, id: string): i18n.Message {
+  public toI18nMessage(nodes: html.Node[], meaning: string, description: string, id: string):
+      i18n.Message {
     this._isIcu = nodes.length == 1 && nodes[0] instanceof html.Expansion;
     this._icuDepth = 0;
     this._placeholderRegistry = new PlaceholderRegistry();
diff --git a/modules/@angular/compiler/test/i18n/digest_spec.ts b/modules/@angular/compiler/test/i18n/digest_spec.ts
index 07b7bbe390f6..7297f6cc7613 100644
--- a/modules/@angular/compiler/test/i18n/digest_spec.ts
+++ b/modules/@angular/compiler/test/i18n/digest_spec.ts
@@ -6,10 +6,23 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {computeMsgId, sha1} from '../../src/i18n/digest';
+import {computeMsgId, digest, sha1} from '../../src/i18n/digest';
 
 export function main(): void {
   describe('digest', () => {
+    describe('digest', () => {
+      it('must return the ID if it\'s explicit', () => {
+        expect(digest({
+          id: 'i',
+          nodes: [],
+          placeholders: {},
+          placeholderToMessage: {},
+          meaning: '',
+          description: '',
+        })).toEqual('i');
+      });
+    });
+
     describe('sha1', () => {
       it('should work on empty strings',
          () => { expect(sha1('')).toEqual('da39a3ee5e6b4b0d3255bfef95601890afd80709'); });
diff --git a/modules/@angular/compiler/test/i18n/extractor_merger_spec.ts b/modules/@angular/compiler/test/i18n/extractor_merger_spec.ts
index c1754255073c..0e88c7359dfe 100644
--- a/modules/@angular/compiler/test/i18n/extractor_merger_spec.ts
+++ b/modules/@angular/compiler/test/i18n/extractor_merger_spec.ts
@@ -20,7 +20,10 @@ export function main() {
     describe('elements', () => {
       it('should extract from elements', () => {
         expect(extract('<div i18n="m|d|e">text<span>nested</span></div>')).toEqual([
-          [['text', '<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], 'm', 'd|e'],
+          [
+            ['text', '<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], 'm', 'd|e',
+            ''
+          ],
         ]);
       });
 
@@ -29,11 +32,45 @@ export function main() {
             extract(
                 '<div i18n="m1|d1"><span i18n-title="m2|d2" title="single child">nested</span></div>'))
             .toEqual([
-              [['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], 'm1', 'd1'],
-              [['single child'], 'm2', 'd2'],
+              [['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], 'm1', 'd1', ''],
+              [['single child'], 'm2', 'd2', ''],
             ]);
       });
 
+      it('should extract from attributes with id', () => {
+        expect(
+            extract(
+                '<div i18n="m1|d1@@i1"><span i18n-title="m2|d2@@i2" title="single child">nested</span></div>'))
+            .toEqual([
+              [
+                ['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], 'm1', 'd1',
+                'i1'
+              ],
+              [['single child'], 'm2', 'd2', 'i2'],
+            ]);
+      });
+
+      it('should extract from attributes without meaning and with id', () => {
+        expect(
+            extract(
+                '<div i18n="d1@@i1"><span i18n-title="d2@@i2" title="single child">nested</span></div>'))
+            .toEqual([
+              [['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], '', 'd1', 'i1'],
+              [['single child'], '', 'd2', 'i2'],
+            ]);
+      });
+
+      it('should extract from attributes with id only', () => {
+        expect(
+            extract(
+                '<div i18n="@@i1"><span i18n-title="@@i2" title="single child">nested</span></div>'))
+            .toEqual([
+              [['<ph tag name="START_TAG_SPAN">nested</ph name="CLOSE_TAG_SPAN">'], '', '', 'i1'],
+              [['single child'], '', '', 'i2'],
+            ]);
+      });
+
+
       it('should extract from ICU messages', () => {
         expect(
             extract(
@@ -43,10 +80,10 @@ export function main() {
                 [
                   '{count, plural, =0 {[<ph tag name="START_PARAGRAPH"></ph name="CLOSE_PARAGRAPH">]}}'
                 ],
-                'm', 'd'
+                'm', 'd', ''
               ],
-              [['title'], '', ''],
-              [['desc'], '', ''],
+              [['title'], '', '', ''],
+              [['desc'], '', '', ''],
             ]);
       });
 
@@ -55,7 +92,7 @@ export function main() {
 
       it('should ignore implicit elements in translatable elements', () => {
         expect(extract('<div i18n="m|d"><p></p></div>', ['p'])).toEqual([
-          [['<ph tag name="START_PARAGRAPH"></ph name="CLOSE_PARAGRAPH">'], 'm', 'd']
+          [['<ph tag name="START_PARAGRAPH"></ph name="CLOSE_PARAGRAPH">'], 'm', 'd', '']
         ]);
       });
     });
@@ -64,17 +101,19 @@ export function main() {
       it('should extract from blocks', () => {
         expect(extract(`<!-- i18n: meaning1|desc1 -->message1<!-- /i18n -->
          <!-- i18n: desc2 -->message2<!-- /i18n -->
-         <!-- i18n -->message3<!-- /i18n -->`))
+         <!-- i18n -->message3<!-- /i18n -->
+         <!-- i18n: meaning4|desc4@@id4 -->message4<!-- /i18n -->
+         <!-- i18n: @@id5 -->message5<!-- /i18n -->`))
             .toEqual([
-              [['message1'], 'meaning1', 'desc1'],
-              [['message2'], '', 'desc2'],
-              [['message3'], '', ''],
+              [['message1'], 'meaning1', 'desc1', ''], [['message2'], '', 'desc2', ''],
+              [['message3'], '', '', ''], [['message4'], 'meaning4', 'desc4', 'id4'],
+              [['message5'], '', '', 'id5']
             ]);
       });
 
       it('should ignore implicit elements in blocks', () => {
         expect(extract('<!-- i18n:m|d --><p></p><!-- /i18n -->', ['p'])).toEqual([
-          [['<ph tag name="START_PARAGRAPH"></ph name="CLOSE_PARAGRAPH">'], 'm', 'd']
+          [['<ph tag name="START_PARAGRAPH"></ph name="CLOSE_PARAGRAPH">'], 'm', 'd', '']
         ]);
       });
 
@@ -88,7 +127,7 @@ export function main() {
                 [
                   '{count, plural, =0 {[<ph tag name="START_TAG_SPAN">html</ph name="CLOSE_TAG_SPAN">]}}'
                 ],
-                '', ''
+                '', '', ''
               ],
               [
                 [
@@ -98,15 +137,15 @@ export function main() {
                       ' name="START_TAG_SPAN">html</ph name="CLOSE_TAG_SPAN">]}}</ph>',
                   '[<ph name="INTERPOLATION">interp</ph>]'
                 ],
-                '', ''
+                '', '', ''
               ],
             ]);
       });
 
       it('should ignore other comments', () => {
-        expect(extract(`<!-- i18n: meaning1|desc1 --><!-- other -->message1<!-- /i18n -->`))
+        expect(extract(`<!-- i18n: meaning1|desc1@@id1 --><!-- other -->message1<!-- /i18n -->`))
             .toEqual([
-              [['message1'], 'meaning1', 'desc1'],
+              [['message1'], 'meaning1', 'desc1', 'id1'],
             ]);
       });
 
@@ -118,34 +157,37 @@ export function main() {
       it('should extract ICU messages from translatable elements', () => {
         // single message when ICU is the only children
         expect(extract('<div i18n="m|d">{count, plural, =0 {text}}</div>')).toEqual([
-          [['{count, plural, =0 {[text]}}'], 'm', 'd'],
+          [['{count, plural, =0 {[text]}}'], 'm', 'd', ''],
         ]);
 
         // single message when ICU is the only (implicit) children
         expect(extract('<div>{count, plural, =0 {text}}</div>', ['div'])).toEqual([
-          [['{count, plural, =0 {[text]}}'], '', ''],
+          [['{count, plural, =0 {[text]}}'], '', '', ''],
         ]);
 
         // one message for the element content and one message for the ICU
-        expect(extract('<div i18n="m|d">before{count, plural, =0 {text}}after</div>')).toEqual([
-          [['before', '<ph icu name="ICU">{count, plural, =0 {[text]}}</ph>', 'after'], 'm', 'd'],
-          [['{count, plural, =0 {[text]}}'], '', ''],
+        expect(extract('<div i18n="m|d@@i">before{count, plural, =0 {text}}after</div>')).toEqual([
+          [
+            ['before', '<ph icu name="ICU">{count, plural, =0 {[text]}}</ph>', 'after'], 'm', 'd',
+            'i'
+          ],
+          [['{count, plural, =0 {[text]}}'], '', '', ''],
         ]);
       });
 
       it('should extract ICU messages from translatable block', () => {
         // single message when ICU is the only children
         expect(extract('<!-- i18n:m|d -->{count, plural, =0 {text}}<!-- /i18n -->')).toEqual([
-          [['{count, plural, =0 {[text]}}'], 'm', 'd'],
+          [['{count, plural, =0 {[text]}}'], 'm', 'd', ''],
         ]);
 
         // one message for the block content and one message for the ICU
         expect(extract('<!-- i18n:m|d -->before{count, plural, =0 {text}}after<!-- /i18n -->'))
             .toEqual([
-              [['{count, plural, =0 {[text]}}'], '', ''],
+              [['{count, plural, =0 {[text]}}'], '', '', ''],
               [
                 ['before', '<ph icu name="ICU">{count, plural, =0 {[text]}}</ph>', 'after'], 'm',
-                'd'
+                'd', ''
               ],
             ]);
       });
@@ -156,20 +198,20 @@ export function main() {
       it('should ignore nested ICU messages', () => {
         expect(extract('<div i18n="m|d">{count, plural, =0 { {sex, select, male {m}} }}</div>'))
             .toEqual([
-              [['{count, plural, =0 {[{sex, select, male {[m]}},  ]}}'], 'm', 'd'],
+              [['{count, plural, =0 {[{sex, select, male {[m]}},  ]}}'], 'm', 'd', ''],
             ]);
       });
 
       it('should ignore implicit elements in non translatable ICU messages', () => {
-        expect(
-            extract(
-                '<div i18n="m|d">{count, plural, =0 { {sex, select, male {<p>ignore</p>}} }}</div>',
-                ['p']))
+        expect(extract(
+                   '<div i18n="m|d@@i">{count, plural, =0 { {sex, select, male {<p>ignore</p>}}' +
+                       ' }}</div>',
+                   ['p']))
             .toEqual([[
               [
                 '{count, plural, =0 {[{sex, select, male {[<ph tag name="START_PARAGRAPH">ignore</ph name="CLOSE_PARAGRAPH">]}},  ]}}'
               ],
-              'm', 'd'
+              'm', 'd', 'i'
             ]]);
       });
 
@@ -181,46 +223,45 @@ export function main() {
 
     describe('attributes', () => {
       it('should extract from attributes outside of translatable sections', () => {
-        expect(extract('<div i18n-title="m|d" title="msg"></div>')).toEqual([
-          [['msg'], 'm', 'd'],
+        expect(extract('<div i18n-title="m|d@@i" title="msg"></div>')).toEqual([
+          [['msg'], 'm', 'd', 'i'],
         ]);
       });
 
       it('should extract from attributes in translatable elements', () => {
-        expect(extract('<div i18n><p><b i18n-title="m|d" title="msg"></b></p></div>')).toEqual([
+        expect(extract('<div i18n><p><b i18n-title="m|d@@i" title="msg"></b></p></div>')).toEqual([
           [
             ['<ph tag name="START_PARAGRAPH"><ph tag name="START_BOLD_TEXT"></ph' +
              ' name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">'],
-            '', ''
+            '', '', ''
           ],
-          [['msg'], 'm', 'd'],
+          [['msg'], 'm', 'd', 'i'],
         ]);
       });
 
       it('should extract from attributes in translatable blocks', () => {
         expect(extract('<!-- i18n --><p><b i18n-title="m|d" title="msg"></b></p><!-- /i18n -->'))
             .toEqual([
-              [['msg'], 'm', 'd'],
+              [['msg'], 'm', 'd', ''],
               [
                 ['<ph tag name="START_PARAGRAPH"><ph tag name="START_BOLD_TEXT"></ph' +
                  ' name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">'],
-                '', ''
+                '', '', ''
               ],
             ]);
       });
 
       it('should extract from attributes in translatable ICUs', () => {
-        expect(
-            extract(
-                '<!-- i18n -->{count, plural, =0 {<p><b i18n-title="m|d" title="msg"></b></p>}}<!-- /i18n -->'))
+        expect(extract(`<!-- i18n -->{count, plural, =0 {<p><b i18n-title="m|d@@i" 
+                 title="msg"></b></p>}}<!-- /i18n -->`))
             .toEqual([
-              [['msg'], 'm', 'd'],
+              [['msg'], 'm', 'd', 'i'],
               [
                 [
                   '{count, plural, =0 {[<ph tag name="START_PARAGRAPH"><ph tag' +
                   ' name="START_BOLD_TEXT"></ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">]}}'
                 ],
-                '', ''
+                '', '', ''
               ],
             ]);
       });
@@ -228,7 +269,7 @@ export function main() {
       it('should extract from attributes in non translatable ICUs', () => {
         expect(extract('{count, plural, =0 {<p><b i18n-title="m|d" title="msg"></b></p>}}'))
             .toEqual([
-              [['msg'], 'm', 'd'],
+              [['msg'], 'm', 'd', ''],
             ]);
       });
 
@@ -239,7 +280,7 @@ export function main() {
     describe('implicit elements', () => {
       it('should extract from implicit elements', () => {
         expect(extract('<b>bold</b><i>italic</i>', ['b'])).toEqual([
-          [['bold'], '', ''],
+          [['bold'], '', '', ''],
         ]);
       });
 
@@ -251,7 +292,7 @@ export function main() {
         }).not.toThrow();
 
         expect(result).toEqual([
-          [['outer', '<ph tag name="START_TAG_DIV">inner</ph name="CLOSE_TAG_DIV">'], '', ''],
+          [['outer', '<ph tag name="START_TAG_DIV">inner</ph name="CLOSE_TAG_DIV">'], '', '', ''],
         ]);
       });
 
@@ -261,7 +302,7 @@ export function main() {
       it('should extract implicit attributes', () => {
         expect(extract('<b title="bb">bold</b><i title="ii">italic</i>', [], {'b': ['title']}))
             .toEqual([
-              [['bb'], '', ''],
+              [['bb'], '', '', ''],
             ]);
       });
     });
@@ -433,7 +474,7 @@ function extract(
   // clang-format off
   // https://github.com/angular/clang-format/issues/35
   return result.messages.map(
-    message => [serializeI18nNodes(message.nodes), message.meaning, message.description, ]) as [string[], string, string][];
+    message => [serializeI18nNodes(message.nodes), message.meaning, message.description, message.id]) as [string[], string, string][];
   // clang-format on
 }
 
diff --git a/modules/@angular/compiler/test/i18n/integration_spec.ts b/modules/@angular/compiler/test/i18n/integration_spec.ts
index ade32405ddae..7823c426341e 100644
--- a/modules/@angular/compiler/test/i18n/integration_spec.ts
+++ b/modules/@angular/compiler/test/i18n/integration_spec.ts
@@ -59,14 +59,17 @@ export function main() {
       tb.detectChanges();
       expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('un');
       expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('un');
+      expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('un');
       cmp.count = 2;
       tb.detectChanges();
       expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('deux');
       expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('deux');
+      expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('deux');
       cmp.count = 3;
       tb.detectChanges();
       expect(el.query(By.css('#i18n-7')).nativeElement).toHaveText('beaucoup');
       expect(el.query(By.css('#i18n-14')).nativeElement).toHaveText('beaucoup');
+      expect(el.query(By.css('#i18n-17')).nativeElement).toHaveText('beaucoup');
 
       cmp.sex = 'm';
       cmp.sexB = 'f';
@@ -90,8 +93,8 @@ export function main() {
           .toEqual('<h1 id="i18n-12">Balises dans les commentaires html</h1>');
       expectHtml(el, '#i18n-13')
           .toBe('<div id="i18n-13" title="dans une section traductible"></div>');
-
       expectHtml(el, '#i18n-15').toMatch(/ca <b>devrait<\/b> marcher/);
+      expectHtml(el, '#i18n-16').toMatch(/avec un ID explicite/);
     });
   });
 }
@@ -141,6 +144,8 @@ function expectHtml(el: DebugElement, cssSelector: string): any {
 <!-- /i18n -->
 
 <div id="i18n-15"><ng-container i18n>it <b>should</b> work</ng-container></div>
+<div id="i18n-16" i18n="@@i18n16">with an explicit ID</div>
+<div id="i18n-17" i18n="@@i18n17">{count, plural, =0 {zero} =1 {one} =2 {two} other {<b>many</b>}}</div>
 `
 })
 class I18nComponent {
@@ -182,6 +187,9 @@ const XTB = `
     <ph name="START_TAG_DIV_1"/><ph name="ICU"/><ph name="CLOSE_TAG_DIV"></ph>
 </translation>
   <translation id="1491627405349178954">ca <ph name="START_BOLD_TEXT"/>devrait<ph name="CLOSE_BOLD_TEXT"/> marcher</translation>
+  <translation id="i18n16">avec un ID explicite</translation>
+  <translation id="i18n17">{VAR_PLURAL, plural, =0 {zero} =1 {un} =2 {deux} other {<ph 
+  name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>beaucoup<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph>} }</translation>
 </translationbundle>`;
 
 // unused, for reference only
@@ -210,5 +218,7 @@ const XMB = `
     <ph name="START_TAG_DIV_1"><ex>&lt;div&gt;</ex></ph><ph name="ICU"/><ph name="CLOSE_TAG_DIV"><ex>&lt;/div&gt;</ex></ph>
 </msg>
   <msg id="1491627405349178954">it <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>should<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph> work</msg>
+  <msg id="i18n16">with an explicit ID</msg>
+  <msg id="i18n17">{VAR_PLURAL, plural, =0 {zero} =1 {one} =2 {two} other {<ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>many<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph>} }</msg>
 </messagebundle>
 `;
diff --git a/modules/@angular/compiler/test/i18n/serializers/xliff_spec.ts b/modules/@angular/compiler/test/i18n/serializers/xliff_spec.ts
index 5c8f9af5a331..6d7b3fb7cfbc 100644
--- a/modules/@angular/compiler/test/i18n/serializers/xliff_spec.ts
+++ b/modules/@angular/compiler/test/i18n/serializers/xliff_spec.ts
@@ -18,6 +18,8 @@ const HTML = `
 <p i18n-title title="translatable attribute">not translatable</p>
 <p i18n>translatable element <b>with placeholders</b> {{ interpolation}}</p>
 <p i18n="m|d">foo</p>
+<p i18n="m|d@@i">foo</p>
+<p i18n="@@bar">foo</p>
 <p i18n="ph names"><br><img><div></div></p>
 `;
 
@@ -39,6 +41,16 @@ const WRITE_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
         <note priority="1" from="description">d</note>
         <note priority="1" from="meaning">m</note>
       </trans-unit>
+      <trans-unit id="i" datatype="html">
+        <source>foo</source>
+        <target/>
+        <note priority="1" from="description">d</note>
+        <note priority="1" from="meaning">m</note>
+      </trans-unit>
+      <trans-unit id="bar" datatype="html">
+        <source>foo</source>
+        <target/>
+      </trans-unit>
       <trans-unit id="d7fa2d59aaedcaa5309f13028c59af8c85b8c49d" datatype="html">
         <source><x id="LINE_BREAK" ctype="lb"/><x id="TAG_IMG" ctype="image"/><x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/></source>
         <target/>
@@ -67,6 +79,16 @@ const LOAD_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
         <note priority="1" from="description">d</note>
         <note priority="1" from="meaning">m</note>
       </trans-unit>
+      <trans-unit id="i" datatype="html">
+        <source>foo</source>
+        <target>toto</target>
+        <note priority="1" from="description">d</note>
+        <note priority="1" from="meaning">m</note>
+      </trans-unit>
+      <trans-unit id="bar" datatype="html">
+        <source>foo</source>
+        <target>tata</target>
+      </trans-unit>
       <trans-unit id="d7fa2d59aaedcaa5309f13028c59af8c85b8c49d" datatype="html">
         <source><x id="LINE_BREAK" ctype="lb"/><x id="TAG_IMG" ctype="image"/><x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/></source>
         <target><x id="START_TAG_DIV" ctype="x-div"/><x id="CLOSE_TAG_DIV" ctype="x-div"/><x id="TAG_IMG" ctype="image"/><x id="LINE_BREAK" ctype="lb"/></target>
@@ -107,6 +129,8 @@ export function main(): void {
           'ec1d033f2436133c14ab038286c4f5df4697484a':
               '<ph name="INTERPOLATION"/> footnemele elbatalsnart <ph name="START_BOLD_TEXT"/>sredlohecalp htiw<ph name="CLOSE_BOLD_TEXT"/>',
           'db3e0a6a5a96481f60aec61d98c3eecddef5ac23': 'oof',
+          'i': 'toto',
+          'bar': 'tata',
           'd7fa2d59aaedcaa5309f13028c59af8c85b8c49d':
               '<ph name="START_TAG_DIV"/><ph name="CLOSE_TAG_DIV"/><ph name="TAG_IMG"/><ph name="LINE_BREAK"/>',
         });
diff --git a/modules/@angular/compiler/test/i18n/serializers/xmb_spec.ts b/modules/@angular/compiler/test/i18n/serializers/xmb_spec.ts
index 319370102ef9..ecfe0b151993 100644
--- a/modules/@angular/compiler/test/i18n/serializers/xmb_spec.ts
+++ b/modules/@angular/compiler/test/i18n/serializers/xmb_spec.ts
@@ -18,6 +18,9 @@ export function main(): void {
 <p i18n>translatable element <b>with placeholders</b> {{ interpolation}}</p>
 <!-- i18n -->{ count, plural, =0 {<p>test</p>}}<!-- /i18n -->
 <p i18n="m|d">foo</p>
+<p i18n="m|d@@i">foo</p>
+<p i18n="@@bar">foo</p>
+<p i18n="@@baz">{ count, plural, =0 { { sex, select, other {<p>deeply nested</p>}} }}</p>
 <p i18n>{ count, plural, =0 { { sex, select, other {<p>deeply nested</p>}} }}</p>`;
 
     const XMB = `<?xml version="1.0" encoding="UTF-8" ?>
@@ -46,6 +49,9 @@ export function main(): void {
   <msg id="7056919470098446707">translatable element <ph name="START_BOLD_TEXT"><ex>&lt;b&gt;</ex></ph>with placeholders<ph name="CLOSE_BOLD_TEXT"><ex>&lt;/b&gt;</ex></ph> <ph name="INTERPOLATION"/></msg>
   <msg id="2981514368455622387">{VAR_PLURAL, plural, =0 {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex></ph>test<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex></ph>} }</msg>
   <msg id="7999024498831672133" desc="d" meaning="m">foo</msg>
+  <msg id="i" desc="d" meaning="m">foo</msg>
+  <msg id="bar">foo</msg>
+  <msg id="baz">{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex></ph>deeply nested<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex></ph>} } } }</msg>
   <msg id="2015957479576096115">{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<ph name="START_PARAGRAPH"><ex>&lt;p&gt;</ex></ph>deeply nested<ph name="CLOSE_PARAGRAPH"><ex>&lt;/p&gt;</ex></ph>} } } }</msg>
 </messagebundle>
 `;
diff --git a/modules/@angular/compiler/test/i18n/translation_bundle_spec.ts b/modules/@angular/compiler/test/i18n/translation_bundle_spec.ts
index d6f51e331d37..2aa45331f87c 100644
--- a/modules/@angular/compiler/test/i18n/translation_bundle_spec.ts
+++ b/modules/@angular/compiler/test/i18n/translation_bundle_spec.ts
@@ -21,7 +21,7 @@ export function main(): void {
     it('should translate a plain message', () => {
       const msgMap = {foo: [new i18n.Text('bar', null)]};
       const tb = new TranslationBundle(msgMap, (_) => 'foo');
-      const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd');
+      const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
       expect(serializeNodes(tb.get(msg))).toEqual(['bar']);
     });
 
@@ -36,7 +36,7 @@ export function main(): void {
         ph1: '*phContent*',
       };
       const tb = new TranslationBundle(msgMap, (_) => 'foo');
-      const msg = new i18n.Message([srcNode], phMap, {}, 'm', 'd');
+      const msg = new i18n.Message([srcNode], phMap, {}, 'm', 'd', 'i');
       expect(serializeNodes(tb.get(msg))).toEqual(['bar*phContent*']);
     });
 
@@ -51,8 +51,8 @@ export function main(): void {
           new i18n.Text('*refMsg*', null),
         ],
       };
-      const refMsg = new i18n.Message([srcNode], {}, {}, 'm', 'd');
-      const msg = new i18n.Message([srcNode], {}, {ph1: refMsg}, 'm', 'd');
+      const refMsg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
+      const msg = new i18n.Message([srcNode], {}, {ph1: refMsg}, 'm', 'd', 'i');
       let count = 0;
       const digest = (_: any) => count++ ? 'ref' : 'foo';
       const tb = new TranslationBundle(msgMap, digest);
@@ -69,13 +69,13 @@ export function main(): void {
           ]
         };
         const tb = new TranslationBundle(msgMap, (_) => 'foo');
-        const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd');
+        const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
         expect(() => tb.get(msg)).toThrowError(/Unknown placeholder/);
       });
 
       it('should report missing translation', () => {
         const tb = new TranslationBundle({}, (_) => 'foo');
-        const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd');
+        const msg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
         expect(() => tb.get(msg)).toThrowError(/Missing translation for message foo/);
       });
 
@@ -83,8 +83,8 @@ export function main(): void {
         const msgMap = {
           foo: [new i18n.Placeholder('', 'ph1', span)],
         };
-        const refMsg = new i18n.Message([srcNode], {}, {}, 'm', 'd');
-        const msg = new i18n.Message([srcNode], {}, {ph1: refMsg}, 'm', 'd');
+        const refMsg = new i18n.Message([srcNode], {}, {}, 'm', 'd', 'i');
+        const msg = new i18n.Message([srcNode], {}, {ph1: refMsg}, 'm', 'd', 'i');
         let count = 0;
         const digest = (_: any) => count++ ? 'ref' : 'foo';
         const tb = new TranslationBundle(msgMap, digest);
@@ -102,7 +102,7 @@ export function main(): void {
           ph1: '</b>',
         };
         const tb = new TranslationBundle(msgMap, (_) => 'foo');
-        const msg = new i18n.Message([srcNode], phMap, {}, 'm', 'd');
+        const msg = new i18n.Message([srcNode], phMap, {}, 'm', 'd', 'i');
         expect(() => tb.get(msg)).toThrowError(/Unexpected closing tag "b"/);
       });
     });