Angular 1.5 Component Error

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.

Learning React can be a struggle -- so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, read my book Pure React.

Loved it! Very well written and put together. Love that you focused only on React. Wish I had stumbled onto your book first before I messed around with all those scary "boilerplate" projects.
— John Lyon-Smith
comments powered by Disqus