Angular2 Component inside ngFor throws Error (viewFactory is not a function)

Question

I have a a ComponentB in a Angular 2 app (beta 1). It works perfectly fine until I place it inside a ngFor loop in ComponentA. I receive the rather cryptic error of:

EXCEPTION: TypeError: viewFactory_ComponentB0 is not a function in [numbers in ComponentA@1:23]BrowserDomAdapter.logError @ angular2.dev.js:22690BrowserDomAdapter.logGroup @ angular2.dev.js:22701ExceptionHandler.call @ angular2.dev.js:1163(anonymous function) @ angular2.dev.js:12416NgZone._notifyOnError @ angular2.dev.js:13324collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13228run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:13247NgZone.run @ angular2.dev.js:13209(anonymous function) @ angular2.dev.js:12499schedulerFn @ angular2.dev.js:12742tryCatcher @ Rx.js:31Subscriber.next @ Rx.js:9500Subject._next @ Rx.js:9999Subject.next @ Rx.js:9963EventEmitter.emit @ angular2.dev.js:12723(anonymous function) @ angular2.dev.js:13140run @ angular2-polyfills.js:138NgZone._notifyOnTurnDone @ angular2.dev.js:13139(anonymous function) @ angular2.dev.js:13254zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305 angular2.dev.js:22690 ORIGINAL EXCEPTION: TypeError: viewFactory_ComponentB0 is not a functionBrowserDomAdapter.logError @ angular2.dev.js:22690ExceptionHandler.call @ angular2.dev.js:1172(anonymous function) @ angular2.dev.js:12416NgZone._notifyOnError @ angular2.dev.js:13324collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13228run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:13247NgZone.run @ angular2.dev.js:13209(anonymous function) @ angular2.dev.js:12499schedulerFn @ angular2.dev.js:12742tryCatcher @ Rx.js:31Subscriber.next @ Rx.js:9500Subject._next @ Rx.js:9999Subject.next @ Rx.js:9963EventEmitter.emit @ angular2.dev.js:12723(anonymous function) @ angular2.dev.js:13140run @ angular2-polyfills.js:138NgZone._notifyOnTurnDone @ angular2.dev.js:13139(anonymous function) @ angular2.dev.js:13254zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305 angular2.dev.js:22690 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:22690ExceptionHandler.call @ angular2.dev.js:1175(anonymous function) @ angular2.dev.js:12416NgZone._notifyOnError @ angular2.dev.js:13324collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13228run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:13247NgZone.run @ angular2.dev.js:13209(anonymous function) @ angular2.dev.js:12499schedulerFn @ angular2.dev.js:12742tryCatcher @ Rx.js:31Subscriber.next @ Rx.js:9500Subject._next @ Rx.js:9999Subject.next @ Rx.js:9963EventEmitter.emit @ angular2.dev.js:12723(anonymous function) @ angular2.dev.js:13140run @ angular2-polyfills.js:138NgZone._notifyOnTurnDone @ angular2.dev.js:13139(anonymous function) @ angular2.dev.js:13254zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305 angular2.dev.js:22690 TypeError: viewFactory_ComponentB0 is not a function at AppElement.viewFactory_ComponentA1 [as embeddedViewFactory] (viewFactory_ComponentA:388) at AppViewManager_.createEmbeddedViewInContainer (angular2.dev.js:9185) at ViewContainerRef_.createEmbeddedView (angular2.dev.js:5890) at NgFor._bulkInsert (angular2.dev.js:14608) at NgFor._applyChanges (angular2.dev.js:14567) at NgFor.ngDoCheck (angular2.dev.js:14552) at AbstractChangeDetector.ChangeDetector_ComponentA_0.detectChangesInRecordsInternal (viewFactory_ComponentA:45) at AbstractChangeDetector.detectChangesInRecords (angular2.dev.js:7825) at AbstractChangeDetector.runDetectChanges (angular2.dev.js:7808) at AbstractChangeDetector._detectChangesInViewChildren (angular2.dev.js:7892)

ComponentA:

@Component({
  selector: 'component-a'
  , directives: [
    FORM_DIRECTIVES
    , ComponentB
  ]
  , template: `
    <!-- works --><component-b [(ngFormControl)]="_formControl"></component-b>
    <!-- fails --><component-b *ngFor="#number of numbers" [(ngFormControl)]="_formControls[number]"></component-b>
  `
})

export class ComponentA {}

Any hints/help highly appreciated.

Answer 1

As suggested by @TylerDurden

This error message is produced by a bug introduced in cycle detection (see #6404).

There's already a fix in master (see #6474) not yet released. This will for sure be in beta.2.

The recommendation is to downgrade to beta.0 until the storm is over.

Update

This issue has been fixed in beta.2 (issues with minification are still there). See changelog for more details.