All geek questions in one place

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

I have a ComponentB component in an Angular 2 application (beta 1). It works fine until I put it inside the ngFor loop in ComponentA. I get a rather cryptic error:

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 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: 9999 Subject.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_AdponentB0 is not a function of @Browseromd .js: 22690ExceptionHandler.call @ angular2.dev.js: 1172 (anonymous function) @ angular2.dev.js: 12416NgZone._notifyOnError @ angular2.dev.js: 13324collection_1.StringMapWrapper.merge.onError @ angular2.dev.uns: 132 @ 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: 13 139 (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 ang 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 $ prom $ asap $$ flush @ angular2 -polyfills.js: 1305 angular2.dev. js: 22690 TypeError: viewFactory_ComponentB0 is not a function in AppElement.viewFactory_ComponentA1 [like embeddedViewFactory] (viewFactory_ComponentA: 388) in AppViewManager_.createEmbeddedViewInContainer (angular2.dev.jef: 918cer ._bulkInsert (angular2.dev.js: 14608) in NgFor._applyChanges (angular2.dev.js: 14567) in NgFor.ngDoCheck (angular2.dev.js: 14552) in AbstractChangeDetector.ChangeDetector_ComponentA_0.detectChangesInRecInternecturn entA: 45) in AbstractChangeDetector.detectChangesInRecords (angular2.dev.js: 7825) in AbstractChangeDetector.runDetectChanges (angular2.dev.js: 7808) in 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 is greatly appreciated.

+5
source share
2 answers

As suggested by @TylerDurden

This error message is generated by an error that was entered when a loop was detected (see # 6404 ).

There has already been fixed in master (see # 6474 ) not yet released. It will probably be in beta.

The recommendation is to switch to beta until the storm is over.

Update

This issue was fixed in beta 2 (minification issues still exist). See changelog for details.

+6
source

Is this problem really resolved? I was working on beta-0, and the following code worked for me, but when updating the beta-2 files it 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 need to use the function forwardRef(function() {return RowIteratorComponent;} and forwardRef(function() {return ColumIteratorComponent;}) respectively for the loop in version Beta 0 and not have problems, but in versioned beta2 I 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...
+1
source

Source: https://habr.com/ru/post/1240781/

More articles:


All Articles