Uncaught TypeError: angular.lowercase is not a function

Question

Uncaught TypeError: angular.lowercase is not a function

this error in my angularjs application, and entire application is not running. This is its showing in textAngular-sanitize.js:413.

Not able to debug, i tried using same version as of angular.js, but no success. Please provide me solution for this. I dont have anything to share apart from this error message in console.

textAngular-sanitize.js:413 Uncaught TypeError: angular.lowercase is not a function
        at parseEndTag (textAngular-sanitize.js:413)
        at htmlParser (textAngular-sanitize.js:378)
        at textAngular-sanitize.js:147
        at textAngularSetup.js:443
        at Object.invoke (angular.js:5093)
        at angular.js:4892
        at forEach (angular.js:374)
        at createInjector (angular.js:4892)
        at doBootstrap (angular.js:1923)
        at bootstrap (angular.js:1944)

Kelsey

Answer 1

As you can see here, angular deprecated their lowercase util method.

The library you use has not updated yet and is therefore only compatible with an angular version before 1.6.7. But since you get this error, the angular version you use is probably higher.

You can either

(A) Downgrade angular to 1.6.7, in your bower.json:

"dependencies": {
   "angular": "1.6.7",
   ...
}
"resolutions": {
   "angular": "1.6.7"
}

(B) Create a simple workaround by adding these methods back as such:

angular.lowercase = text => text.toLowerCase();

Make sure this is done after angular is loaded but before your app starts.

Sanjak

how can i edit my bower.json to always take angular.js-1.6.7, or please tell mewhere should i put your code – Kelsey

Please tell me where should i add your code, because downgrading, again giving coockies error, so please let knoe where can i add your code? in config? and its Es6 will it work everywhere? – Kelsey

you can add it before your main app angular.module(.... declaration - i'm not sure how your app is organized so I cannot tell concretely but it should be before the app loads, but after angular library is loaded – Sanjak

OK thank you, before angular.module putting your code angular.lowercase = text => text.toLowerCase(); works fine, this i re-wrote like angular.lowercase=function(text){ return text.toLowerCase(); } – Kelsey

Just curious, why did angular ever choose to create their own lowercase method rather than use the js one? :( – Endue

from what I can gather, they're also doing some input validation (i.e. checking it's actually a string what you pass) - see github.com/angular/angular.js/blob/v1.4.14/src/Angular.js#L145 ... but other than that they were actually using the standard method, so I guess it was for reasons of consistency with other util methods that are more complex like angular.extend - of course this was pre-ES6 and things like class and Object.assign were not yet available. – Sanjak

I use angular.lowercase = text => (text || '').toLowerCase(); to prevent null and undefined values – Epistaxis

Answer 2

Angular 1.7.* still has lowercase function but it's renamed to $$lowercase. This is a possible workaround. Buyer beware based on Angular documentation.

angular.module('MyApp').config(function() {
  angular.lowercase = angular.$$lowercase;  
});

Cleft

Thanks so much @Arthur, this is the best answer because downgrade is not recommended! – Hy

Answer 3

I would like to share my views so that it will help other people who are struggling like me, the main problem is angularJS officially removed lowercase and uppercase functions from their library so people who are using textAngular-sanitize.js will get this error because textangular still has this method in its library which will through this issue.

You can either remove textAngular-sanitize.js from your project or you can include Ovidiu Dolha code in you app.js before angular.module loads as below.

angular.uppercase=function(text){
 return text.toUpperCase();
 }
 angular.lowercase=function(text){
 return text.toLowerCase();
 }

angular.module('sampleApp', ....)

The code given by Ovidiu Dolha

angular.lowercase = text => text.toLowerCase();

Can be written as

angular.lowercase=function(text){
     return text.toLowerCase();
     }

Both will work. Thank you.

Kelsey

Answer 4

Ovidiu Dolha's answer got me almost there. If you look at the pre-deprecation implementation of the lowercase function, it is a bit more. This shim implementation did the trick for me:

/**
 * @brief Shim for textAngular in order to make it compatible with the latest 
 *   version of angularjs
 */

function lowercase(string) {
  return (typeof string === 'string') ? string.toLowerCase() : string;
}

// Angular deprecated the lowercase function as of v1.6.7. TextAngular hasn't 
// updated to reflect this
angular.lowercase = lowercase;

Teaser

Answer 5

Another appropriate solution would be replace textAngular with testAngularJs as suggested here.

npm install textangularjs

Brumbaugh

Answer 6

I found a similar issue when updated to angular 1.7.5 , my solution was to update angular-sanitize and the problem was fixed. angular-sanitize

Sutter

I am using AngularJS 1.7.8. Which version of angular-translate should I be using? – Gerladina

I just added 1.7.9 and it resolved the issue for me. (for anyone coming here years later) 😇 – Preter

Answer 7

if you are using angularjs with typescript and a linter (in my case, tslint + standard), a correct workaround would be :

if (!angular.lowercase) (angular as any).lowercase = (text: string) => angular.isString(text) ? text.toLowerCase() : text

Follower

Answer 8

I am using AngularJS v1.7.5 . In my controller, I have used below code to convert a string into lowercase:

function myCtrl($scope, $filter)
{
    var sampleText = "THIS IS TEST";
    var test = $filter('lowercase')(sampleText);
}

Inject $filter in the controller and use the same to convert to lowercase.

Lattonia