fix(core): support ngTemplateOutlet in production mode (#12921)

Fixes #12911
angular · Nov 17, 2016 · 4628798 · 4628798
1 parent dae0d0f
commit 4628798
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/modules/@angular/core/src/linker/view.ts b/modules/@angular/core/src/linker/view.ts
@@ -232,8 +232,10 @@ export abstract class AppView<T> {
       if (nextSibling) {
         this.visitRootNodesInternal(this._directRenderer.insertBefore, nextSibling);
       } else {
-        this.visitRootNodesInternal(
-            this._directRenderer.appendChild, this._directRenderer.parentElement(prevNode));
+        const parentElement = this._directRenderer.parentElement(prevNode);
+        if (parentElement) {
+          this.visitRootNodesInternal(this._directRenderer.appendChild, parentElement);
+        }
       }
     } else {
       this.renderer.attachViewAfter(prevNode, this.flatRootNodes);

diff --git a/modules/@angular/core/test/linker/direct_rendering_integration_spec.ts b/modules/@angular/core/test/linker/direct_rendering_integration_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Injectable, RenderComponentType, Renderer, RootRenderer} from '@angular/core';
+import {Component, ContentChild, Injectable, Input, RenderComponentType, Renderer, RootRenderer, TemplateRef} from '@angular/core';
 import {DebugDomRenderer} from '@angular/core/src/debug/debug_renderer';
 import {DirectRenderer} from '@angular/core/src/render/api';
 import {TestBed, inject} from '@angular/core/testing';
@@ -125,6 +125,46 @@ export function main() {
       const projectedNode = childHostEl.childNodes[1];
       expect(directRenderer.appendChild).toHaveBeenCalledWith(projectedNode, childHostEl);
     });
+
+    it('should support using structural directives with ngTemplateOutlet', () => {
+      @Component({
+        template:
+            '<child [templateCtx]="templateCtx"><template let-shown="shown" #tpl><span *ngIf="shown">hello</span></template></child>'
+      })
+      class Parent {
+        templateCtx = {shown: false};
+      }
+
+      @Component({
+        selector: 'child',
+        template:
+            '(<template [ngTemplateOutlet]="templateRef" [ngOutletContext]="templateCtx"></template>)'
+      })
+      class Child {
+        @Input()
+        templateCtx: any;
+
+        @ContentChild('tpl')
+        templateRef: TemplateRef<any>;
+      }
+
+      TestBed.configureTestingModule({declarations: [Parent, Child]});
+
+      let fixture = TestBed.createComponent(Parent);
+      fixture.componentInstance.templateCtx.shown = false;
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveText('()');
+      fixture.destroy();
+
+      fixture = TestBed.createComponent(Parent);
+      fixture.componentInstance.templateCtx.shown = true;
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveText('(hello)');
+
+      fixture.componentInstance.templateCtx.shown = false;
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveText('()');
+    });
   });
 }