I've got a problem, when I'm trying to use an angularJS component inside of angular 2, during the UpgradeComponent.initializeBindings
method it encounters this error:
at Function.keys (<anonymous>)
at AsItemListSmallDirective.UpgradeComponent.initializeBindings (static.js?85d2:1455)
at AsItemListSmallDirective.UpgradeComponent (static.js?85d2:1361)
at new AsItemListSmallDirective (as-item-list-small.directive.ts?5b28:67)
at createClass (core.js?4dd3:22151)
at createDirectiveInstance (core.js?4dd3:22028)
at createViewNodes (core.js?4dd3:23254)
at callViewAction (core.js?4dd3:23570)
at execComponentViewsAction (core.js?4dd3:23489)
at createViewNodes (core.js?4dd3:23282)
I believe it might be trying to build the component in Angular but it's having an issue with copying the bindings over from the angularJS code. I've included my JS component definition below, can anyone offer any help on this one?
import { Directive, ElementRef, Injector, Input, Output } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
import { EventEmitter } from 'events';
@Directive({
selector: 'as-item-list-small'
})
export class AsItemListSmallDirective extends UpgradeComponent {
@Input()
products: any[];
@Input()
stores: any[];
@Input()
metrics: any[];
@Input()
attributes: any[];
@Input()
productsTitle: string;
@Input()
storesTitle: string;
@Input()
metricsTitle: string;
@Input()
attributesTitle: string;
@Input()
limitTo: number;
@Input()
showRemove: boolean;
@Input()
showRemoveAll: boolean;
@Input()
showBorder: boolean;
@Input()
noHover: any;
@Output()
onRemove: EventEmitter = new EventEmitter();
@Output()
onRemoveDone: EventEmitter = new EventEmitter();
@Input()
selectionMaxHeight: number;
@Input()
isDisabled: boolean;
constructor(elementRef: ElementRef, injector: Injector) {
super('asItemListSmall', elementRef, injector);
}
}
export function AsItemListSmall() {
return {
restrict: 'E',
bindToController: {
products: '=',
stores: '=',
metrics: '=',
attributes: '=',
productsTitle: '@',
storesTitle: '@',
metricsTitle: '@',
attributesTitle: '@',
limitTo: '=?',
showRemove: '=?',
showRemoveAll: '=?',
showBorder: '=?',
noHover: '=?',
onRemove: '&?',
onRemoveDone: '&?',
selectionMaxHeight: '@',
isDisabled: '=?'
},
template: require('./as-item-list-small.directive.html'),
controller: AsItemListSmallController,
controllerAs: '$ctrl'
};
}