fix(compiler): allow empty translations for attributes (#14085)

fixes #13897

modules/@angular/compiler/src/i18n/extractor_merger.ts

@@ -327,6 +327,7 @@ class _Visitor implements html.Visitor {
   }
 
   // Translates the given message given the `TranslationBundle`
+  // This is used for translating elements / blocks - see `_translateAttributes` for attributes
   // no-op when called in extraction mode (returns [])
   private _translateMessage(el: html.Node, message: i18n.Message): html.Node[] {
     if (message && this._mode === _VisitorMode.Merge) {
@@ -368,7 +369,9 @@ class _Visitor implements html.Visitor {
         const message: i18n.Message = this._createI18nMessage([attr], meaning, '', '');
         const nodes = this._translations.get(message);
         if (nodes) {
-          if (nodes[0] instanceof html.Text) {
+          if (nodes.length == 0) {
+            translatedAttributes.push(new html.Attribute(attr.name, '', attr.sourceSpan));
+          } else if (nodes[0] instanceof html.Text) {
             const value = (nodes[0] as html.Text).value;
             translatedAttributes.push(new html.Attribute(attr.name, value, attr.sourceSpan));
           } else {

modules/@angular/compiler/test/i18n/extractor_merger_spec.ts

@@ -383,6 +383,24 @@ export function main() {
         const HTML = `<div>before<p i18n="m|d">foo</p><!-- comment --></div>`;
         expect(fakeTranslate(HTML)).toEqual('<div>before<p>**foo**</p></div>');
       });
+
+      it('should merge empty messages', () => {
+        const HTML = `<div i18n>some element</div>`;
+        const htmlNodes: html.Node[] = parseHtml(HTML);
+        const messages: i18n.Message[] =
+            extractMessages(htmlNodes, DEFAULT_INTERPOLATION_CONFIG, [], {}).messages;
+
+        expect(messages.length).toEqual(1);
+        const i18nMsgMap: {[id: string]: i18n.Node[]} = {};
+        i18nMsgMap[digest(messages[0])] = [];
+        const translations = new TranslationBundle(i18nMsgMap, digest);
+
+        const output =
+            mergeTranslations(htmlNodes, translations, DEFAULT_INTERPOLATION_CONFIG, [], {});
+        expect(output.errors).toEqual([]);
+
+        expect(serializeHtmlNodes(output.rootNodes).join('')).toEqual(`<div></div>`);
+      });
     });
 
     describe('blocks', () => {
@@ -422,6 +440,25 @@ export function main() {
         const HTML = `<p i18n-title="m|d" title=""></p>`;
         expect(fakeTranslate(HTML)).toEqual('<p title=""></p>');
       });
+
+      it('should merge empty attributes', () => {
+        const HTML = `<div i18n-title title="some attribute">some element</div>`;
+        const htmlNodes: html.Node[] = parseHtml(HTML);
+        const messages: i18n.Message[] =
+            extractMessages(htmlNodes, DEFAULT_INTERPOLATION_CONFIG, [], {}).messages;
+
+        expect(messages.length).toEqual(1);
+        const i18nMsgMap: {[id: string]: i18n.Node[]} = {};
+        i18nMsgMap[digest(messages[0])] = [];
+        const translations = new TranslationBundle(i18nMsgMap, digest);
+
+        const output =
+            mergeTranslations(htmlNodes, translations, DEFAULT_INTERPOLATION_CONFIG, [], {});
+        expect(output.errors).toEqual([]);
+
+        expect(serializeHtmlNodes(output.rootNodes).join(''))
+            .toEqual(`<div title="">some element</div>`);
+      });
     });
   });
 }
@@ -453,12 +490,11 @@ function fakeTranslate(
 
   const translations = new TranslationBundle(i18nMsgMap, digest);
 
-  const translatedNodes =
+  const output = mergeTranslations(
-      mergeTranslations(
+      htmlNodes, translations, DEFAULT_INTERPOLATION_CONFIG, implicitTags, implicitAttrs);
-          htmlNodes, translations, DEFAULT_INTERPOLATION_CONFIG, implicitTags, implicitAttrs)
+  expect(output.errors).toEqual([]);
-          .rootNodes;
 
-  return serializeHtmlNodes(translatedNodes).join('');
+  return serializeHtmlNodes(output.rootNodes).join('');
 }
 
 function extract(

modules/@angular/compiler/test/i18n/serializers/xliff_spec.ts

@@ -94,6 +94,11 @@ const LOAD_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
         <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>
         <note priority="1" from="description">ph names</note>
       </trans-unit>            
+      <trans-unit id="empty target" 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/>
+        <note priority="1" from="description">ph names</note>
+      </trans-unit>
     </body>
   </file>
 </xliff>
@@ -110,6 +115,7 @@ export function main(): void {
 
   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(''));
@@ -133,6 +139,7 @@ export function main(): void {
           'bar': 'tata',
           'd7fa2d59aaedcaa5309f13028c59af8c85b8c49d':
               '<ph name="START_TAG_DIV"/><ph name="CLOSE_TAG_DIV"/><ph name="TAG_IMG"/><ph name="LINE_BREAK"/>',
+          'empty target': '',
         });
       });