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

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
PR Close #30783

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,6 +784,7 @@ export function appendProjectedNodes(
     appendChild(nodeToProject, tProjectionNode, lView);
   } else {
     while (nodeToProject) {
+      if (!(nodeToProject.flags & TNodeFlags.isDetached)) {
         if (nodeToProject.type === TNodeType.Projection) {
           appendProjectedNodes(
               lView, tProjectionNode, (nodeToProject as TProjectionNode).projection,
@@ -794,6 +795,7 @@ export function appendProjectedNodes(
           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 {
       }