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

5
votes

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.

2
javascriptangularangular2-template
This is a bug introduced in beta.1 (see #6404). There's already a fix (see #6474) for it, so you'll have to wait for the next release and downgrade to beta.0 if you want to avoid these bugs. – Eric Martinez
Will you provide plnkr? – micronyks
I downgraded to beta.0 as @EricMartinez pointed out and it works again now. – TylerDurden
@EricMartinez could you post your answer so I can accept it? – TylerDurden
@TylerDurden sure thing, done. – Eric Martinez

2 Answers

6
votes

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.

1
votes

Is this problem really solved? I was working on the "beta 0" and the following code worked for me, but when updating files beta 2 still gives me the same problem as in this post. This is my code:

// rowIterator.component.ts
import {Component,forwardRef} from 'angular2/core';
import {ColumIteratorComponent} from './columIterator.component';
import {ModuleIteratorComponent} from './moduleIterator.component';

@Component({
  selector: '[rowIterator]',
  template: `
    <div *ngFor="#element of rowData">
      <div columIterator *ngIf="element.column" [ngClass]="element.class" [columData]="element.column"></div>

      <div moduleIterator *ngIf="element.module" [ngClass]="element.class" [moduleData]="element.module"></div>
    </div>
    `,
  inputs: ['rowData'],
  directives: [forwardRef(function() { return ColumIteratorComponent; }),ModuleIteratorComponent]
})
export class RowIteratorComponent {
  // "rowData" is a ARRAYS
}

//columnIterator.components.ts
import {Component,forwardRef} from 'angular2/core';
import {RowIteratorComponent} from './rowIterator.component';
import {ModuleIteratorComponent} from './moduleIterator.component';

@Component({
  selector: '[columIterator]',
  template:`
    <div *ngFor="#element of columData">
      <div rowIterator *ngIf="element.row" [ngClass]="element.class" [rowData]="element.row"></div>

      <div moduleIterator *ngIf="element.module" [ngClass]="element.class" [moduleData]="element.module"></div>
    </div>
  `,
  inputs: ['columData'],
  directives: [forwardRef(function(){return RowIteratorComponent;}), ModuleIteratorComponent]
})
export class ColumIteratorComponent{
  // "columData" is a ARRAY
}

I have to use the forwardRef(function() {return RowIteratorComponent;} function and forwardRef(function() {return ColumIteratorComponent;}) respectively for the loop in the Beta 0 version and have no problems, but in Versioned beta2 get the following error:

EXCEPTION: TypeError: viewFactory_ColumIteratorComponent0 is not a function in [element.column in RowIteratorComponent@2:25]
EXCEPTION: TypeError: viewFactory_ColumIteratorComponent0 is not a function in [element.column in RowIteratorComponent@2:25]BrowserDomAdapter.logError @ angular2.dev.js:22911BrowserDomAdapter.logGroup @ angular2.dev.js:22922ExceptionHandler.call @ angular2.dev.js:1182(anonymous function) @ angular2.dev.js:12562NgZone._notifyOnError @ angular2.dev.js:13485collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13389Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13408NgZone.run @ angular2.dev.js:13370(anonymous function) @ angular2.dev.js:12661schedulerFn @ angular2.dev.js:12904tryCatcher @ Rx.js:234Subscriber.next @ Rx.js:9703Subject._next @ Rx.js:10202Subject.next @ Rx.js:10166EventEmitter.emit @ angular2.dev.js:12885(anonymous function) @ angular2.dev.js:13301Zone.run @ angular2-polyfills.js:1243NgZone._notifyOnTurnDone @ angular2.dev.js:13300(anonymous function) @ angular2.dev.js:13415zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262
angular2.dev.js:22911 ORIGINAL EXCEPTION: TypeError: viewFactory_ColumIteratorComponent0 is not a functionBrowserDomAdapter.logError @ angular2.dev.js:22911ExceptionHandler.call @ angular2.dev.js:1191(anonymous function) @ angular2.dev.js:12562NgZone._notifyOnError @ angular2.dev.js:13485collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13389Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13408NgZone.run @ angular2.dev.js:13370(anonymous function) @ angular2.dev.js:12661schedulerFn @ angular2.dev.js:12904tryCatcher @ Rx.js:234Subscriber.next @ Rx.js:9703Subject._next @ Rx.js:10202Subject.next @ Rx.js:10166EventEmitter.emit @ angular2.dev.js:12885(anonymous function) @ angular2.dev.js:13301Zone.run @ angular2-polyfills.js:1243NgZone._notifyOnTurnDone @ angular2.dev.js:13300(anonymous function) @ angular2.dev.js:13415zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262
angular2.dev.js:22911 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:22911ExceptionHandler.call @ angular2.dev.js:1194(anonymous function) @ angular2.dev.js:12562NgZone._notifyOnError @ angular2.dev.js:13485collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13389Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13408NgZone.run @ angular2.dev.js:13370(anonymous function) @ angular2.dev.js:12661schedulerFn @ angular2.dev.js:12904tryCatcher @ Rx.js:234Subscriber.next @ Rx.js:9703Subject._next @ Rx.js:10202Subject.next @ Rx.js:10166EventEmitter.emit @ angular2.dev.js:12885(anonymous function) @ angular2.dev.js:13301Zone.run @ angular2-polyfills.js:1243NgZone._notifyOnTurnDone @ angular2.dev.js:13300(anonymous function) @ angular2.dev.js:13415zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262
angular2.dev.js:22911 TypeError: viewFactory_ColumIteratorComponent0 is not a function...