Using structural directive with ngFor, ngTemplateOutlet causes runtime error in production mode

[log2-hwan]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

@Directive({
	selector: 'template[carouselItem]'
})
export class CarouselItem {
	id: string;

	constructor(public templateRef: TemplateRef<any>) {}
}

@Component({
	selector: 'carousel',
	template: `
	<div class="banner-group">
		<div class="banner" *ngFor="let item of item_list">
			<template [ngTemplateOutlet]="item.templateRef"></template>
		</div>
	</div>
	`
})
export class Carousel {
}

@Component({
  selector: 'my-app',
  template: `
    <carousel>
      <template ngFor let-t [ngForOf]="[0, 1]">
        <div *carouselItem>Test!</div>
      </template>
    </carousel>
  `
})
export class App {
}

This code worked fine until version 2.1.2.
But after upgrading to 2.2.0 it is broken and showing this error.

core.umd.js:2840 TypeError: Cannot read property 'appendChild' of null
    at appendChild (platform-browser.umd.js:1200)
    at View_App1.visitRootNodesInternal (VM2335 component.ngfactory.js:123)
    at View_App1.AppView._renderAttach (core.umd.js:9256)
    at View_App1.AppView.attachAfter (core.umd.js:9234)
    at ViewContainer.attachView (core.umd.js:9561)
    at ViewContainerRef_.insert (core.umd.js:7137)
    at ViewContainerRef_.createEmbeddedView (core.umd.js:7117)
    at eval (common.umd.js:1338)
    at DefaultIterableDiffer.forEachOperation (core.umd.js:3343)
    at NgFor._applyChanges (common.umd.js:1336)

I don't know much about Angular2's internal code, but seems this error is caused by Direct renderer which is newly introduced by 2.2.0.

Minimal reproduction of the problem with instructions
Working version (angular 2.1.2): http://plnkr.co/edit/qeIrSjXXCYJPKTwLxiIV
Broken version (angular 2.2.0): http://plnkr.co/edit/wEhMdzVmANgB2a1TpOwU

Please tell us about your environment: macOS 10.12.1

• Angular version: 2.2.0

• Browser: all

• Language: TypeScript 2.0.3

[michalstepien]

For me it is a serious mistake. My reproduction:
http://plnkr.co/edit/tKeCv9gfp1wUw3VeL6Na?p=preview
If you remove *ngIf="!closed" in alert.ts it will be worked. Pls help :(

[ghaiat]

same here

[ericmartinezr]

See #12890 and #12853 (similar error message). Those issues are not the same as this one, but the error message is the same or very similar.

[kurapatijayaram]

same issue, after building using webpack.

[theFifthElf]

Similar error

build.js?=11161939:3 TypeError: Cannot read property 'appendChild' of null
    at appendChild (build.js?=11161939:7)
    at e.visitRootNodesInternal (build.js?=11161939:39)
    at e.t._renderAttach (build.js?=11161939:6)
    at e.t.attachAfter (build.js?=11161939:6)
    at t.attachView (build.js?=11161939:6)
    at t.insert (build.js?=11161939:5)
    at t.createEmbeddedView (build.js?=11161939:5)
    at build.js?=11161939:6
    at t.forEachOperation (build.js?=11161939:3)
    at t._applyChanges (build.js?=11161939:6)

I did use a template but removed it and still got the error, I wonder if it's because I'm nesting some components and using ContentChildren and QueryList (which is the only thing that differs from all my other components)

[vicb]

same issue as #12890

[tbosch]

The root cause is using a template directive (like ngIf / ngFor) as content children of a component element.

[michalstepien]

Hi, when will be next relase?

[naveedahmed1]

Any update on this?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}