fix(ivy): don't project removed placeholders with runtime i18n

When translated content was projected, all of the content was reappended, even the placeholders that had been removed in the translation.
To avoid that we added a new flag on `TNode` that specifies that a node is detached, in which case it should be ignored by the projection.

FW-1319 #resolve

packages/core/src/render3/i18n.ts

@@ -19,7 +19,7 @@ import {attachI18nOpCodesDebug} from './instructions/lview_debug';
 import {allocExpando, elementPropertyInternal, getOrCreateTNode, setInputsForProperty} from './instructions/shared';
 import {LContainer, NATIVE} from './interfaces/container';
 import {COMMENT_MARKER, ELEMENT_MARKER, I18nMutateOpCode, I18nMutateOpCodes, I18nUpdateOpCode, I18nUpdateOpCodes, IcuType, TI18n, TIcu} from './interfaces/i18n';
-import {TElementNode, TIcuContainerNode, TNode, TNodeType, TProjectionNode} from './interfaces/node';
+import {TElementNode, TIcuContainerNode, TNode, TNodeFlags, TNodeType, TProjectionNode} from './interfaces/node';
 import {RComment, RElement, RText} from './interfaces/renderer';
 import {SanitizerFn} from './interfaces/sanitization';
 import {StylingContext} from './interfaces/styling';
@@ -910,6 +910,8 @@ function removeNode(index: number, viewData: LView) {
     }
   }
 
+  // Define this node as detached so that we don't risk projecting it
+  removedPhTNode.flags |= TNodeFlags.isDetached;
   ngDevMode && ngDevMode.rendererRemoveNode++;
 }
 

packages/core/src/render3/interfaces/node.ts

@@ -47,19 +47,22 @@ export const enum TNodeType {
  */
 export const enum TNodeFlags {
   /** This bit is set if the node is a component */
-  isComponent = 0b00001,
+  isComponent = 0b000001,
 
   /** This bit is set if the node has been projected */
-  isProjected = 0b00010,
+  isProjected = 0b000010,
 
   /** This bit is set if any directive on this node has content queries */
-  hasContentQuery = 0b00100,
+  hasContentQuery = 0b000100,
 
   /** This bit is set if the node has any "class" inputs */
-  hasClassInput = 0b01000,
+  hasClassInput = 0b001000,
 
   /** This bit is set if the node has any "style" inputs */
-  hasStyleInput = 0b10000,
+  hasStyleInput = 0b010000,
+
+  /** This bit is set if the node has been detached by i18n */
+  isDetached = 0b100000,
 }
 
 /**

packages/core/src/render3/node_manipulation.ts

@@ -784,15 +784,17 @@ export function appendProjectedNodes(
     appendChild(nodeToProject, tProjectionNode, lView);
   } else {
     while (nodeToProject) {
-      if (nodeToProject.type === TNodeType.Projection) {
-        appendProjectedNodes(
-            lView, tProjectionNode, (nodeToProject as TProjectionNode).projection,
-            findComponentView(projectedView));
-      } else {
-        // This flag must be set now or we won't know that this node is projected
-        // if the nodes are inserted into a container later.
-        nodeToProject.flags |= TNodeFlags.isProjected;
-        appendProjectedNode(nodeToProject, tProjectionNode, lView, projectedView);
+      if (!(nodeToProject.flags & TNodeFlags.isDetached)) {
+        if (nodeToProject.type === TNodeType.Projection) {
+          appendProjectedNodes(
+              lView, tProjectionNode, (nodeToProject as TProjectionNode).projection,
+              findComponentView(projectedView));
+        } else {
+          // This flag must be set now or we won't know that this node is projected
+          // if the nodes are inserted into a container later.
+          nodeToProject.flags |= TNodeFlags.isProjected;
+          appendProjectedNode(nodeToProject, tProjectionNode, lView, projectedView);
+        }
       }
       nodeToProject = nodeToProject.projectionNext;
     }

packages/core/test/acceptance/i18n_spec.ts

@@ -939,8 +939,7 @@ onlyInIvy('Ivy i18n logic').describe('runtime i18n', () => {
           .toEqual('<child><grand-child><div><b>Bonjour</b> monde!</div></grand-child></child>');
     });
 
-    // FW-1319 Runtime i18n should be able to remove projected placeholders
-    xit('should be able to remove projected placeholders', () => {
+    it('should be able to remove projected placeholders', () => {
       @Component({selector: 'grand-child', template: '<div><ng-content></ng-content></div>'})
       class GrandChild {
       }