feat(compiler): Implement i18n XLIFF 2.0 serializer (#14185)

- Ensure that the result passes OASIS XLIFF 2.0 schema validation
- Use <ph/> for self-closing placeholder tags
- Use <pc></pc> for other placeholder tags
- Check for the correct XLIFF file version
- Add ICU support

fixes #11735

packages/compiler-cli/integrationtest/test/i18n_spec.ts

@@ -63,6 +63,32 @@ const EXPECTED_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
 </xliff>
 `;
 
+const EXPECTED_XLIFF2 = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit id="8136548302122759730">
+      <notes>
+        <note category="description">desc</note>
+        <note category="meaning">meaning</note>
+      </notes>
+      <segment>
+        <source>translate me</source>
+      </segment>
+    </unit>
+    <unit id="3492007542396725315">
+      <segment>
+        <source>Welcome</source>
+      </segment>
+    </unit>
+    <unit id="3772663375917578720">
+      <segment>
+        <source>other-3rdP-component</source>
+      </segment>
+    </unit>
+  </file>
+</xliff>
+`;
+
 describe('template i18n extraction output', () => {
   const outDir = '';
   const genDir = 'out';
@@ -81,6 +107,13 @@ describe('template i18n extraction output', () => {
     expect(xlf).toEqual(EXPECTED_XLIFF);
   });
 
+  it('should extract i18n messages as xliff version 2.0', () => {
+    const xlfOutput = path.join(outDir, 'messages.xliff2.xlf');
+    expect(fs.existsSync(xlfOutput)).toBeTruthy();
+    const xlf = fs.readFileSync(xlfOutput, {encoding: 'utf-8'});
+    expect(xlf).toEqual(EXPECTED_XLIFF2);
+  });
+
   it('should not emit js', () => {
     const genOutput = path.join(genDir, '');
     expect(fs.existsSync(genOutput)).toBeFalsy();

packages/compiler-cli/src/extractor.ts

@@ -34,7 +34,7 @@ export class Extractor {
     const promiseBundle = this.extractBundle();
 
     return promiseBundle.then(bundle => {
-      const content = this.serialize(bundle, ext);
+      const content = this.serialize(bundle, formatName);
       const dstFile = outFile || `messages.${ext}`;
       const dstPath = path.join(this.options.genDir, dstFile);
       this.host.writeFile(dstPath, content, false);
@@ -48,14 +48,20 @@ export class Extractor {
     return this.ngExtractor.extract(files);
   }
 
-  serialize(bundle: compiler.MessageBundle, ext: string): string {
+  serialize(bundle: compiler.MessageBundle, formatName: string): string {
+    const format = formatName.toLowerCase();
     let serializer: compiler.Serializer;
 
-    switch (ext) {
+    switch (format) {
       case 'xmb':
         serializer = new compiler.Xmb();
         break;
+      case 'xliff2':
+      case 'xlf2':
+        serializer = new compiler.Xliff2();
+        break;
       case 'xlf':
+      case 'xliff':
       default:
         serializer = new compiler.Xliff();
     }
@@ -66,10 +72,18 @@ export class Extractor {
   getExtension(formatName: string): string {
     const format = (formatName || 'xlf').toLowerCase();
 
-    if (format === 'xmb') return 'xmb';
-    if (format === 'xlf' || format === 'xlif' || format === 'xliff') return 'xlf';
+    switch (format) {
+      case 'xmb':
+        return 'xmb';
+      case 'xlf':
+      case 'xlif':
+      case 'xliff':
+      case 'xlf2':
+      case 'xliff2':
+        return 'xlf';
+    }
 
-    throw new Error('Unsupported format "${formatName}"');
+    throw new Error(`Unsupported format "${formatName}"`);
   }
 
   static create(

packages/compiler/src/i18n/i18n_html_parser.ts

@@ -13,6 +13,7 @@ import {ParseTreeResult} from '../ml_parser/parser';
 import {mergeTranslations} from './extractor_merger';
 import {Serializer} from './serializers/serializer';
 import {Xliff} from './serializers/xliff';
+import {Xliff2} from './serializers/xliff2';
 import {Xmb} from './serializers/xmb';
 import {Xtb} from './serializers/xtb';
 import {TranslationBundle} from './translation_bundle';
@@ -62,6 +63,9 @@ function createSerializer(format?: string): Serializer {
       return new Xmb();
     case 'xtb':
       return new Xtb();
+    case 'xliff2':
+    case 'xlf2':
+      return new Xliff2();
     case 'xliff':
     case 'xlf':
     default:

packages/compiler/src/i18n/index.ts

@@ -11,5 +11,6 @@ export {I18NHtmlParser} from './i18n_html_parser';
 export {MessageBundle} from './message_bundle';
 export {Serializer} from './serializers/serializer';
 export {Xliff} from './serializers/xliff';
+export {Xliff2} from './serializers/xliff2';
 export {Xmb} from './serializers/xmb';
 export {Xtb} from './serializers/xtb';

packages/compiler/src/i18n/serializers/xliff2.ts

@@ -0,0 +1,366 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import * as ml from '../../ml_parser/ast';
+import {XmlParser} from '../../ml_parser/xml_parser';
+import {decimalDigest} from '../digest';
+import * as i18n from '../i18n_ast';
+import {I18nError} from '../parse_util';
+
+import {Serializer} from './serializer';
+import * as xml from './xml_helper';
+
+const _VERSION = '2.0';
+const _XMLNS = 'urn:oasis:names:tc:xliff:document:2.0';
+// TODO(vicb): make this a param (s/_/-/)
+const _DEFAULT_SOURCE_LANG = 'en';
+const _PLACEHOLDER_TAG = 'ph';
+const _PLACEHOLDER_SPANNING_TAG = 'pc';
+
+const _XLIFF_TAG = 'xliff';
+const _SOURCE_TAG = 'source';
+const _TARGET_TAG = 'target';
+const _UNIT_TAG = 'unit';
+
+// http://docs.oasis-open.org/xliff/xliff-core/v2.0/os/xliff-core-v2.0-os.html
+export class Xliff2 extends Serializer {
+  write(messages: i18n.Message[], locale: string|null): string {
+    const visitor = new _WriteVisitor();
+    const units: xml.Node[] = [];
+
+    messages.forEach(message => {
+      const unit = new xml.Tag(_UNIT_TAG, {id: message.id});
+
+      if (message.description || message.meaning) {
+        const notes = new xml.Tag('notes');
+        if (message.description) {
+          notes.children.push(
+              new xml.CR(8),
+              new xml.Tag('note', {category: 'description'}, [new xml.Text(message.description)]));
+        }
+
+        if (message.meaning) {
+          notes.children.push(
+              new xml.CR(8),
+              new xml.Tag('note', {category: 'meaning'}, [new xml.Text(message.meaning)]));
+        }
+
+        notes.children.push(new xml.CR(6));
+        unit.children.push(new xml.CR(6), notes);
+      }
+
+      const segment = new xml.Tag('segment');
+
+      segment.children.push(
+          new xml.CR(8), new xml.Tag(_SOURCE_TAG, {}, visitor.serialize(message.nodes)),
+          new xml.CR(6));
+
+      unit.children.push(new xml.CR(6), segment, new xml.CR(4));
+
+      units.push(new xml.CR(4), unit);
+    });
+
+    const file =
+        new xml.Tag('file', {'original': 'ng.template', id: 'ngi18n'}, [...units, new xml.CR(2)]);
+
+    const xliff = new xml.Tag(
+        _XLIFF_TAG, {version: _VERSION, xmlns: _XMLNS, srcLang: locale || _DEFAULT_SOURCE_LANG},
+        [new xml.CR(2), file, new xml.CR()]);
+
+    return xml.serialize([
+      new xml.Declaration({version: '1.0', encoding: 'UTF-8'}), new xml.CR(), xliff, new xml.CR()
+    ]);
+  }
+
+  load(content: string, url: string):
+      {locale: string, i18nNodesByMsgId: {[msgId: string]: i18n.Node[]}} {
+    // xliff to xml nodes
+    const xliff2Parser = new Xliff2Parser();
+    const {locale, msgIdToHtml, errors} = xliff2Parser.parse(content, url);
+
+    // xml nodes to i18n nodes
+    const i18nNodesByMsgId: {[msgId: string]: i18n.Node[]} = {};
+    const converter = new XmlToI18n();
+
+    Object.keys(msgIdToHtml).forEach(msgId => {
+      const {i18nNodes, errors: e} = converter.convert(msgIdToHtml[msgId], url);
+      errors.push(...e);
+      i18nNodesByMsgId[msgId] = i18nNodes;
+    });
+
+    if (errors.length) {
+      throw new Error(`xliff2 parse errors:\n${errors.join('\n')}`);
+    }
+
+    return {locale, i18nNodesByMsgId};
+  }
+
+  digest(message: i18n.Message): string { return decimalDigest(message); }
+}
+
+class _WriteVisitor implements i18n.Visitor {
+  private _nextPlaceholderId: number;
+
+  visitText(text: i18n.Text, context?: any): xml.Node[] { return [new xml.Text(text.value)]; }
+
+  visitContainer(container: i18n.Container, context?: any): xml.Node[] {
+    const nodes: xml.Node[] = [];
+    container.children.forEach((node: i18n.Node) => nodes.push(...node.visit(this)));
+    return nodes;
+  }
+
+  visitIcu(icu: i18n.Icu, context?: any): xml.Node[] {
+    const nodes = [new xml.Text(`{${icu.expressionPlaceholder}, ${icu.type}, `)];
+
+    Object.keys(icu.cases).forEach((c: string) => {
+      nodes.push(new xml.Text(`${c} {`), ...icu.cases[c].visit(this), new xml.Text(`} `));
+    });
+
+    nodes.push(new xml.Text(`}`));
+
+    return nodes;
+  }
+
+  visitTagPlaceholder(ph: i18n.TagPlaceholder, context?: any): xml.Node[] {
+    const type = getTypeForTag(ph.tag);
+
+    if (ph.isVoid) {
+      const tagPh = new xml.Tag(_PLACEHOLDER_TAG, {
+        id: (this._nextPlaceholderId++).toString(),
+        equiv: ph.startName,
+        type: type,
+        disp: `<${ph.tag}/>`,
+      });
+      return [tagPh];
+    }
+
+    const tagPc = new xml.Tag(_PLACEHOLDER_SPANNING_TAG, {
+      id: (this._nextPlaceholderId++).toString(),
+      equivStart: ph.startName,
+      equivEnd: ph.closeName,
+      type: type,
+      dispStart: `<${ph.tag}>`,
+      dispEnd: `</${ph.tag}>`,
+    });
+    const nodes: xml.Node[] = [].concat(...ph.children.map(node => node.visit(this)));
+    if (nodes.length) {
+      nodes.forEach((node: xml.Node) => tagPc.children.push(node));
+    } else {
+      tagPc.children.push(new xml.Text(''));
+    }
+
+    return [tagPc];
+  }
+
+  visitPlaceholder(ph: i18n.Placeholder, context?: any): xml.Node[] {
+    return [new xml.Tag(_PLACEHOLDER_TAG, {
+      id: (this._nextPlaceholderId++).toString(),
+      equiv: ph.name,
+      disp: `{{${ph.value}}}`,
+    })];
+  }
+
+  visitIcuPlaceholder(ph: i18n.IcuPlaceholder, context?: any): xml.Node[] {
+    return [new xml.Tag(_PLACEHOLDER_TAG, {id: (this._nextPlaceholderId++).toString()})];
+  }
+
+  serialize(nodes: i18n.Node[]): xml.Node[] {
+    this._nextPlaceholderId = 0;
+    return [].concat(...nodes.map(node => node.visit(this)));
+  }
+}
+
+// Extract messages as xml nodes from the xliff file
+class Xliff2Parser implements ml.Visitor {
+  private _unitMlString: string;
+  private _errors: I18nError[];
+  private _msgIdToHtml: {[msgId: string]: string};
+  private _locale: string|null = null;
+
+  parse(xliff: string, url: string) {
+    this._unitMlString = null;
+    this._msgIdToHtml = {};
+
+    const xml = new XmlParser().parse(xliff, url, false);
+
+    this._errors = xml.errors;
+    ml.visitAll(this, xml.rootNodes, null);
+
+    return {
+      msgIdToHtml: this._msgIdToHtml,
+      errors: this._errors,
+      locale: this._locale,
+    };
+  }
+
+  visitElement(element: ml.Element, context: any): any {
+    switch (element.name) {
+      case _UNIT_TAG:
+        this._unitMlString = null;
+        const idAttr = element.attrs.find((attr) => attr.name === 'id');
+        if (!idAttr) {
+          this._addError(element, `<${_UNIT_TAG}> misses the "id" attribute`);
+        } else {
+          const id = idAttr.value;
+          if (this._msgIdToHtml.hasOwnProperty(id)) {
+            this._addError(element, `Duplicated translations for msg ${id}`);
+          } else {
+            ml.visitAll(this, element.children, null);
+            if (typeof this._unitMlString === 'string') {
+              this._msgIdToHtml[id] = this._unitMlString;
+            } else {
+              this._addError(element, `Message ${id} misses a translation`);
+            }
+          }
+        }
+        break;
+
+      case _SOURCE_TAG:
+        // ignore source message
+        break;
+
+      case _TARGET_TAG:
+        const innerTextStart = element.startSourceSpan.end.offset;
+        const innerTextEnd = element.endSourceSpan.start.offset;
+        const content = element.startSourceSpan.start.file.content;
+        const innerText = content.slice(innerTextStart, innerTextEnd);
+        this._unitMlString = innerText;
+        break;
+
+      case _XLIFF_TAG:
+        const localeAttr = element.attrs.find((attr) => attr.name === 'trgLang');
+        if (localeAttr) {
+          this._locale = localeAttr.value;
+        }
+
+        const versionAttr = element.attrs.find((attr) => attr.name === 'version');
+        if (versionAttr) {
+          const version = versionAttr.value;
+          if (version !== '2.0') {
+            this._addError(
+                element,
+                `The XLIFF file version ${version} is not compatible with XLIFF 2.0 serializer`);
+          } else {
+            ml.visitAll(this, element.children, null);
+          }
+        }
+        break;
+      default:
+        ml.visitAll(this, element.children, null);
+    }
+  }
+
+  visitAttribute(attribute: ml.Attribute, context: any): any {}
+
+  visitText(text: ml.Text, context: any): any {}
+
+  visitComment(comment: ml.Comment, context: any): any {}
+
+  visitExpansion(expansion: ml.Expansion, context: any): any {}
+
+  visitExpansionCase(expansionCase: ml.ExpansionCase, context: any): any {}
+
+  private _addError(node: ml.Node, message: string): void {
+    this._errors.push(new I18nError(node.sourceSpan, message));
+  }
+}
+
+// Convert ml nodes (xliff syntax) to i18n nodes
+class XmlToI18n implements ml.Visitor {
+  private _errors: I18nError[];
+
+  convert(message: string, url: string) {
+    const xmlIcu = new XmlParser().parse(message, url, true);
+    this._errors = xmlIcu.errors;
+
+    const i18nNodes = this._errors.length > 0 || xmlIcu.rootNodes.length == 0 ?
+        [] :
+        [].concat(...ml.visitAll(this, xmlIcu.rootNodes));
+
+    return {
+      i18nNodes,
+      errors: this._errors,
+    };
+  }
+
+  visitText(text: ml.Text, context: any) { return new i18n.Text(text.value, text.sourceSpan); }
+
+  visitElement(el: ml.Element, context: any): i18n.Node[] {
+    switch (el.name) {
+      case _PLACEHOLDER_TAG:
+        const nameAttr = el.attrs.find((attr) => attr.name === 'equiv');
+        if (nameAttr) {
+          return [new i18n.Placeholder('', nameAttr.value, el.sourceSpan)];
+        }
+
+        this._addError(el, `<${_PLACEHOLDER_TAG}> misses the "equiv" attribute`);
+        break;
+      case _PLACEHOLDER_SPANNING_TAG:
+        const startAttr = el.attrs.find((attr) => attr.name === 'equivStart');
+        const endAttr = el.attrs.find((attr) => attr.name === 'equivEnd');
+
+        if (!startAttr) {
+          this._addError(el, `<${_PLACEHOLDER_TAG}> misses the "equivStart" attribute`);
+        } else if (!endAttr) {
+          this._addError(el, `<${_PLACEHOLDER_TAG}> misses the "equivEnd" attribute`);
+        } else {
+          const startId = startAttr.value;
+          const endId = endAttr.value;
+
+          return [].concat(
+              new i18n.Placeholder('', startId, el.sourceSpan),
+              ...el.children.map(node => node.visit(this, null)),
+              new i18n.Placeholder('', endId, el.sourceSpan));
+        }
+        break;
+      default:
+        this._addError(el, `Unexpected tag`);
+    }
+  }
+
+  visitExpansion(icu: ml.Expansion, context: any) {
+    const caseMap: {[value: string]: i18n.Node} = {};
+
+    ml.visitAll(this, icu.cases).forEach((c: any) => {
+      caseMap[c.value] = new i18n.Container(c.nodes, icu.sourceSpan);
+    });
+
+    return new i18n.Icu(icu.switchValue, icu.type, caseMap, icu.sourceSpan);
+  }
+
+  visitExpansionCase(icuCase: ml.ExpansionCase, context: any): any {
+    return {
+      value: icuCase.value,
+      nodes: [].concat(...ml.visitAll(this, icuCase.expression)),
+    };
+  }
+
+  visitComment(comment: ml.Comment, context: any) {}
+
+  visitAttribute(attribute: ml.Attribute, context: any) {}
+
+  private _addError(node: ml.Node, message: string): void {
+    this._errors.push(new I18nError(node.sourceSpan, message));
+  }
+}
+
+function getTypeForTag(tag: string): string {
+  switch (tag.toLowerCase()) {
+    case 'br':
+    case 'b':
+    case 'i':
+    case 'u':
+      return 'fmt';
+    case 'img':
+      return 'image';
+    case 'a':
+      return 'link';
+    default:
+      return 'other';
+  }
+}

packages/compiler/test/i18n/serializers/xliff2_spec.ts

@@ -0,0 +1,336 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {escapeRegExp} from '@angular/compiler/src/util';
+
+import {serializeNodes} from '../../../src/i18n/digest';
+import {MessageBundle} from '../../../src/i18n/message_bundle';
+import {Xliff2} from '../../../src/i18n/serializers/xliff2';
+import {HtmlParser} from '../../../src/ml_parser/html_parser';
+import {DEFAULT_INTERPOLATION_CONFIG} from '../../../src/ml_parser/interpolation_config';
+
+const HTML = `
+<p i18n-title title="translatable attribute">not translatable</p>
+<p i18n>translatable element <b>with placeholders</b> {{ interpolation}}</p>
+<!-- i18n -->{ count, plural, =0 {<p>test</p>}}<!-- /i18n -->
+<p i18n="m|d@@i">foo</p>
+<p i18n="nested"><b><u>{{interpolation}} Text</u></b></p>
+<p i18n="ph names"><br><img src="1.jpg"><img src="2.jpg"></p>
+<p i18n="empty element">hello <span></span></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 WRITE_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit id="1933478729560469763">
+      <segment>
+        <source>translatable attribute</source>
+      </segment>
+    </unit>
+    <unit id="7056919470098446707">
+      <segment>
+        <source>translatable element <pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">with placeholders</pc> <ph id="1" equiv="INTERPOLATION" disp="{{ interpolation}}"/></source>
+      </segment>
+    </unit>
+    <unit id="2981514368455622387">
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">test</pc>} }</source>
+      </segment>
+    </unit>
+    <unit id="i">
+      <notes>
+        <note category="description">d</note>
+        <note category="meaning">m</note>
+      </notes>
+      <segment>
+        <source>foo</source>
+      </segment>
+    </unit>
+    <unit id="6440235004920703622">
+      <notes>
+        <note category="description">nested</note>
+      </notes>
+      <segment>
+        <source><pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;"><pc id="1" equivStart="START_UNDERLINED_TEXT" equivEnd="CLOSE_UNDERLINED_TEXT" type="fmt" dispStart="&lt;u&gt;" dispEnd="&lt;/u&gt;"><ph id="2" equiv="INTERPOLATION" disp="{{interpolation}}"/> Text</pc></pc></source>
+      </segment>
+    </unit>
+    <unit id="8779402634269838862">
+      <notes>
+        <note category="description">ph names</note>
+      </notes>
+      <segment>
+        <source><ph id="0" equiv="LINE_BREAK" type="fmt" disp="&lt;br/&gt;"/><ph id="1" equiv="TAG_IMG" type="image" disp="&lt;img/&gt;"/><ph id="2" equiv="TAG_IMG_1" type="image" disp="&lt;img/&gt;"/></source>
+      </segment>
+    </unit>
+    <unit id="6536355551500405293">
+      <notes>
+        <note category="description">empty element</note>
+      </notes>
+      <segment>
+        <source>hello <pc id="0" equivStart="START_TAG_SPAN" equivEnd="CLOSE_TAG_SPAN" type="other" dispStart="&lt;span&gt;" dispEnd="&lt;/span&gt;"></pc></source>
+      </segment>
+    </unit>
+    <unit id="baz">
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">deeply nested</pc>} } } }</source>
+      </segment>
+    </unit>
+    <unit id="2015957479576096115">
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">deeply nested</pc>} } } }</source>
+      </segment>
+    </unit>
+  </file>
+</xliff>
+`;
+
+const LOAD_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en" trgLang="fr">
+  <file original="ng.template" id="ngi18n">
+    <unit id="1933478729560469763">
+      <segment>
+        <source>translatable attribute</source>
+        <target>etubirtta elbatalsnart</target>
+      </segment>
+    </unit>
+    <unit id="7056919470098446707">
+      <segment>
+        <source>translatable element <pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">with placeholders</pc> <ph id="1" equiv="INTERPOLATION" disp="{{ interpolation}}"/></source>
+        <target><ph id="1" equiv="INTERPOLATION" disp="{{ interpolation}}"/> <pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;">sredlohecalp htiw</pc> tnemele elbatalsnart</target>
+      </segment>
+    </unit>
+    <unit id="2981514368455622387">
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">test</pc>} }</source>
+        <target>{VAR_PLURAL, plural, =0 {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">TEST</pc>} }</target>
+      </segment>
+    </unit>
+    <unit id="i">
+      <notes>
+        <note category="description">d</note>
+        <note category="meaning">m</note>
+      </notes>
+      <segment>
+        <source>foo</source>
+        <target>oof</target>
+      </segment>
+    </unit>
+    <unit id="6440235004920703622">
+      <notes>
+        <note category="description">nested</note>
+      </notes>
+      <segment>
+        <source><pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;"><pc id="1" equivStart="START_UNDERLINED_TEXT" equivEnd="CLOSE_UNDERLINED_TEXT" type="fmt" dispStart="&lt;u&gt;" dispEnd="&lt;/u&gt;"><ph id="2" equiv="INTERPOLATION" disp="{{interpolation}}"/> Text</pc></pc></source>
+        <target><pc id="0" equivStart="START_BOLD_TEXT" equivEnd="CLOSE_BOLD_TEXT" type="fmt" dispStart="&lt;b&gt;" dispEnd="&lt;/b&gt;"><pc id="1" equivStart="START_UNDERLINED_TEXT" equivEnd="CLOSE_UNDERLINED_TEXT" type="fmt" dispStart="&lt;u&gt;" dispEnd="&lt;/u&gt;">txeT <ph id="2" equiv="INTERPOLATION" disp="{{interpolation}}"/></pc></pc></target>
+      </segment>
+    </unit>
+    <unit id="8779402634269838862">
+      <notes>
+        <note category="description">ph names</note>
+      </notes>
+      <segment>
+        <source><ph id="0" equiv="LINE_BREAK" type="fmt" disp="&lt;br/&gt;"/><ph id="1" equiv="TAG_IMG" type="image" disp="&lt;img/&gt;"/><ph id="2" equiv="TAG_IMG_1" type="image" disp="&lt;img/&gt;"/></source>
+        <target><ph id="2" equiv="TAG_IMG_1" type="image" disp="&lt;img/&gt;"/><ph id="1" equiv="TAG_IMG" type="image" disp="&lt;img/&gt;"/><ph id="0" equiv="LINE_BREAK" type="fmt" disp="&lt;br/&gt;"/></target>
+      </segment>
+    </unit>
+    <unit id="6536355551500405293">
+      <notes>
+        <note category="description">empty element</note>
+      </notes>
+      <segment>
+        <source>hello <pc id="0" equivStart="START_TAG_SPAN" equivEnd="CLOSE_TAG_SPAN" type="other" dispStart="&lt;span&gt;" dispEnd="&lt;/span&gt;"></pc></source>
+        <target><pc id="0" equivStart="START_TAG_SPAN" equivEnd="CLOSE_TAG_SPAN" type="other" dispStart="&lt;span&gt;" dispEnd="&lt;/span&gt;"></pc> olleh</target>
+      </segment>
+    </unit>
+    <unit id="baz">
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">deeply nested</pc>} } } }</source>
+        <target>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">profondément imbriqué</pc>} } } }</target>
+      </segment>
+    </unit>
+    <unit id="2015957479576096115">
+      <segment>
+        <source>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">deeply nested</pc>} } } }</source>
+        <target>{VAR_PLURAL, plural, =0 {{VAR_SELECT, select, other {<pc id="0" equivStart="START_PARAGRAPH" equivEnd="CLOSE_PARAGRAPH" type="other" dispStart="&lt;p&gt;" dispEnd="&lt;/p&gt;">profondément imbriqué</pc>} } } }</target>
+      </segment>
+    </unit>
+  </file>
+</xliff>
+`;
+
+export function main(): void {
+  const serializer = new Xliff2();
+
+  function toXliff(html: string, locale: string | null = null): string {
+    const catalog = new MessageBundle(new HtmlParser, [], {}, locale);
+    catalog.updateFromTemplate(html, '', DEFAULT_INTERPOLATION_CONFIG);
+    return catalog.write(serializer);
+  }
+
+  function loadAsMap(xliff: string): {[id: string]: string} {
+    const {i18nNodesByMsgId} = serializer.load(xliff, 'url');
+
+    const msgMap: {[id: string]: string} = {};
+    Object.keys(i18nNodesByMsgId)
+        .forEach(id => msgMap[id] = serializeNodes(i18nNodesByMsgId[id]).join(''));
+
+    return msgMap;
+  }
+
+  describe('XLIFF 2.0 serializer', () => {
+    describe('write', () => {
+      it('should write a valid xliff 2.0 file',
+         () => { expect(toXliff(HTML)).toEqual(WRITE_XLIFF); });
+      it('should write a valid xliff 2.0 file with a source language',
+         () => { expect(toXliff(HTML, 'fr')).toContain('srcLang="fr"'); });
+    });
+
+    describe('load', () => {
+      it('should load XLIFF files', () => {
+        expect(loadAsMap(LOAD_XLIFF)).toEqual({
+          '1933478729560469763': 'etubirtta elbatalsnart',
+          '7056919470098446707':
+              '<ph name="INTERPOLATION"/> <ph name="START_BOLD_TEXT"/>sredlohecalp htiw<ph name="CLOSE_BOLD_TEXT"/> tnemele elbatalsnart',
+          '2981514368455622387':
+              '{VAR_PLURAL, plural, =0 {[<ph name="START_PARAGRAPH"/>, TEST, <ph name="CLOSE_PARAGRAPH"/>]}}',
+          'i': 'oof',
+          '6440235004920703622':
+              '<ph name="START_BOLD_TEXT"/><ph name="START_UNDERLINED_TEXT"/>txeT <ph name="INTERPOLATION"/><ph name="CLOSE_UNDERLINED_TEXT"/><ph name="CLOSE_BOLD_TEXT"/>',
+          '8779402634269838862':
+              '<ph name="TAG_IMG_1"/><ph name="TAG_IMG"/><ph name="LINE_BREAK"/>',
+          '6536355551500405293': '<ph name="START_TAG_SPAN"/><ph name="CLOSE_TAG_SPAN"/> olleh',
+          'baz':
+              '{VAR_PLURAL, plural, =0 {[{VAR_SELECT, select, other {[<ph name="START_PARAGRAPH"/>, profondément imbriqué, <ph name="CLOSE_PARAGRAPH"/>]}},  ]}}',
+          '2015957479576096115':
+              '{VAR_PLURAL, plural, =0 {[{VAR_SELECT, select, other {[<ph name="START_PARAGRAPH"/>, profondément imbriqué, <ph name="CLOSE_PARAGRAPH"/>]}},  ]}}'
+        });
+      });
+
+      it('should return the target locale',
+         () => { expect(serializer.load(LOAD_XLIFF, 'url').locale).toEqual('fr'); });
+    });
+
+    describe('structure errors', () => {
+      it('should throw when a wrong xliff version is used', () => {
+        const XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en" datatype="plaintext" original="ng2.template">
+    <body>
+      <trans-unit id="deadbeef">
+        <source/>
+        <target/>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>`;
+
+        expect(() => {
+          loadAsMap(XLIFF);
+        }).toThrowError(/The XLIFF file version 1.2 is not compatible with XLIFF 2.0 serializer/);
+      });
+
+      it('should throw when an unit has no translation', () => {
+        const XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit id="missingtarget">
+      <segment>
+        <source/>
+      </segment>
+    </unit>
+  </file>
+</xliff>`;
+
+        expect(() => {
+          loadAsMap(XLIFF);
+        }).toThrowError(/Message missingtarget misses a translation/);
+      });
+
+
+      it('should throw when an unit has no id attribute', () => {
+        const XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit>
+      <segment>
+        <source/>
+        <target/>
+      </segment>
+    </unit>
+  </file>
+</xliff>`;
+
+        expect(() => { loadAsMap(XLIFF); }).toThrowError(/<unit> misses the "id" attribute/);
+      });
+
+      it('should throw on duplicate unit id', () => {
+        const XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit id="deadbeef">
+      <segment>
+        <source/>
+        <target/>
+      </segment>
+    </unit>
+    <unit id="deadbeef">
+      <segment>
+        <source/>
+        <target/>
+      </segment>
+    </unit>
+  </file>
+</xliff>`;
+
+        expect(() => {
+          loadAsMap(XLIFF);
+        }).toThrowError(/Duplicated translations for msg deadbeef/);
+      });
+    });
+
+    describe('message errors', () => {
+      it('should throw on unknown message tags', () => {
+        const XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit id="deadbeef">
+      <segment>
+        <source/>
+        <target><b>msg should contain only ph and pc tags</b></target>
+      </segment>
+    </unit>
+  </file>
+</xliff>`;
+
+        expect(() => { loadAsMap(XLIFF); })
+            .toThrowError(new RegExp(
+                escapeRegExp(`[ERROR ->]<b>msg should contain only ph and pc tags</b>`)));
+      });
+
+      it('should throw when a placeholder misses an id attribute', () => {
+        const XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="2.0" xmlns="urn:oasis:names:tc:xliff:document:2.0" srcLang="en">
+  <file original="ng.template" id="ngi18n">
+    <unit id="deadbeef">
+      <segment>
+        <source/>
+        <target><ph/></target>
+      </segment>
+    </unit>
+  </file>
+</xliff>`;
+
+        expect(() => {
+          loadAsMap(XLIFF);
+        }).toThrowError(new RegExp(escapeRegExp(`<ph> misses the "equiv" attribute`)));
+      });
+    });
+  });
+}

scripts/ci/offline_compiler_test.sh

@@ -58,6 +58,7 @@ cp -v package.json $TMP
   ./node_modules/.bin/ngc -p tsconfig-build.json --i18nFile=src/messages.fi.xlf --locale=fi --i18nFormat=xlf
 
   ./node_modules/.bin/ng-xi18n -p tsconfig-xi18n.json --i18nFormat=xlf --locale=fr
+  ./node_modules/.bin/ng-xi18n -p tsconfig-xi18n.json --i18nFormat=xlf2 --outFile=messages.xliff2.xlf
   ./node_modules/.bin/ng-xi18n -p tsconfig-xi18n.json --i18nFormat=xmb --outFile=custom_file.xmb
 
   # Removed until #15219 is fixed