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
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With