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

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]

Hi, when will be next relase?

[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 😦