Angular 1.5 Component Error

Dave Ceddia bio photo By Dave Ceddia Comment

Angular 1.5 has a new .component feature that wraps directives. Todd Motto has a great writeup about it. It’s a nice way to ease into the Angular 2 way of thinking (or even React, for that matter). Components!!

One key difference of .component versus our old standby .directive is that the new function takes an Object, whereas directive takes a Function that returns an object. It’s a small thing, and easy to miss if your head is still in 1.4-land, like mine was the other day.

// The old way (a function):
function myDirective() {
	return {
		restrict: 'E',
		templateUrl: 'stuff.html',
		controller: 'MyDirectiveCtrl'
	};
}
angular.directive('myDirective', myDirective);

// The new way (an object):
var myComponent = {
	templateUrl: 'stuff.html',
	controller: 'MyComponentCtrl'
};
angular.component('myComponent', myComponent);

If you mess it up, you might get the error “[ng:areq] Argument ‘fn’ is not a function, got Object”.

This might mean you passed an Object to a .directive – check your code. Make sure you’ve matched component => an object and directive => a function that returns an object.

comments powered by Disqus