refactor(core): add dev mode descriptions to foreign view boundaries

Add descriptive text to foreign view head and tail comments in dev mode to
assist in debugging.

Author: leonsenft

packages/core/src/render3/foreign_view.ts

@@ -106,8 +106,12 @@ export function createForeignView(lContainer: LContainer, index: number): Foreig
   // 5. "Render" the view by creating the head and tail nodes, populating their slots, and marking
   // the view as created. This last step is normally handled by `renderView()` for native Angular
   // views with template functions.
-  const headComment = (lView[headTNode.index] = renderer.createComment(''));
-  const tailComment = (lView[tailTNode.index] = renderer.createComment(''));
+  const headComment = (lView[headTNode.index] = renderer.createComment(
+    ngDevMode ? 'foreign-view-head' : '',
+  ));
+  const tailComment = (lView[tailTNode.index] = renderer.createComment(
+    ngDevMode ? 'foreign-view-tail' : '',
+  ));
   lView[FLAGS] &= ~LViewFlags.CreationMode;
 
   // 6. Insert the view into the container

packages/core/test/render3/foreign_view_spec.ts

@@ -123,7 +123,17 @@ describe('foreign views', () => {
     vcr2.insert(viewRef);
 
     expect(fixture.nativeElement.innerHTML).toBe(
-      '<div></div><!--container--><div></div><!----><span></span><span></span><!----><!--container-->',
+      '' +
+        '<div></div>' +
+        // First <div> container
+        '<!--container-->' +
+        '<div></div>' +
+        // Foreign view
+        '<!--foreign-view-head-->' +
+        '<span></span><span></span>' +
+        '<!--foreign-view-tail-->' +
+        // Second <div> container
+        '<!--container-->',
     );
   });