Angular 1.5 Component Error

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.

Angular 1.5 Component Error was originally published by Dave Ceddia at Angularity on March 01, 2016.

CodeProject