Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are ES6 arrow functions incompatible with Angular?

Here's a normal ES5 function in my Angular code which works:

app.run(function($templateCache){ $templateCache.put('/some','thing') });

I wanted to convert it to ES6 arrow function

app.run($templateCache => $templateCache.put('/some','thing'));

but it gives the error

Uncaught Error: [$injector:unpr] Unknown provider: '/some'Provider <- '/some'
http://errors.angularjs.org/1.4.6/$injector/unpr?p0='%2Fsome'Provider%20%3C-%20'%2Fsome'
REGEX_STRING_REGEXP  @ angular.js:68
(anonymous function) @ angular.js:4287
getService           @ angular.js:4435
(anonymous function) @ angular.js:4292
getService           @ angular.js:4435
invoke               @ angular.js:4467
(anonymous function) @ angular.js:4297
forEach              @ angular.js:336
createInjector       @ angular.js:4297
doBootstrap          @ angular.js:1657
bootstrap            @ angular.js:1678
angularInit          @ angular.js:1572
(anonymous function) @ angular.js:28821
trigger              @ angular.js:3022
eventHandler         @ angular.js:3296

Are ES6 arrow functions incompatible with Angular?


EDIT: I thought perhaps Angular isn't able to infer the name $templateCache and so unable to inject it but then I logged it to console and it does show it correctly:

app.run($templateCache=>console.log($templateCache));
// => 
//  Object {}
//      destroy: function()
//      get: function(key)
//      info: function()
//      put: function(key, value)
//      remove: function(key)
//      removeAll: function()
//      __proto__: Object
like image 591
laggingreflex Avatar asked Sep 21 '15 16:09

laggingreflex


People also ask

Can I use arrow functions in angular?

Arrow methods belong to class fields proposal and not a part of existing specs. They are implemented in TypeScript and can be transpiled with Babel as well. It's generally preferable to use prototype method() { ... } than arrow method = () => { ... } because it's more flexible.

What is a reason to not use an ES6 arrow function?

An Arrow function should not be used as methods. An arrow function can not be used as constructors. An arrow function can not use yield within its body. Arrow function cannot be suitable for call apply and bind methods.

Can I use arrow functions in TypeScript?

ES6 version of TypeScript provides an arrow function which is the shorthand syntax for defining the anonymous function, i.e., for function expressions. It omits the function keyword. We can call it fat arrow (because -> is a thin arrow and => is a "fat" arrow). It is also called a Lambda function.

Does AngularJS support ES6?

If you've been using AngularJS for some time, you will most likely be familiar to ng-annotate. This is a tool, which automatically adds the minification-safe syntax for function calls, i.e. it transforms function($scope) {} to ['$scope',function($scope){}] . Luckily the ng-annotate plugin also works with ES6 files.


1 Answers

Correct. Your version of AngularJS is not compatible with arrow functions that make use of $injector.

This is mainly because AngularJS 1.4.6 makes use of (Function).toString, which does not start with function( for arrow functions, at least in Firefox:

>var a = () => 5
function a()
>a.toString()
"() => 5"  // not "function a() {return 5;}"

AngularJS supports the arrow notation from 1.5.0 onwards.

like image 60
Brian Avatar answered Sep 17 '22 20:09

Brian