I've got pretty much this error:
AngularJS ngSanitize Error
short version: "lowercase is not a function".
While my application has AngularJS enforced to 1.4.9, we didn't enforce angular-sanitize, so it resolves to 1.7.0 and on that version of AngularJS lowercase function doesn't exist anymore, producing an error.
Probably by forcing angular-sanitize to a fixed version would fix that, but I want to go beyond fixing it and understand what is causing the problem and why, because I find a few inconsistencies.
AngularJS is forced to 1.4.9. bower-components folder holds this version, build folder after compiling also holds this version, developer panel on Chrome show only this version is fetched. This version does have lowercase method.
Angular-sanitize has angular 1.7.0 as a dependency, but it's never downloaded, never. Not in any single folder or subfolder on the entire project, not at compiling, not from Chrome either. So I guess the only angular.js he's got access to is 1.4.9, which does have lowercase method.
I don't quite understand why then "lowercase is not a function" error appears if the only available angular.js still has that method. Also I don't understand why angular-sanitize 1.7.0 demanding angular 1.7.0 uses non-existing methods on AngularJS 1.7.0 (Angular developers mistake? but I find hard to believe it.)
Probably sanitize is downloading and accessing angular 1.7.0 somehow, but I would like to know how. Just out of curiosity. And also to confirm if this is an angular developers mistake or if there's something I've missed.
It is explained in the official Angular 1.6 to 1.7 Migration Guide:
Due to 1daa4f, the helper functions angular.lowercase and angular.uppercase have been removed.
These functions have been deprecated since 1.5.0. They are internally used, but should not be exposed as they contain special locale handling (for Turkish) to maintain internal consistency regardless of user-set locale.
Developers should generally use the built-ins toLowerCase and toUpperCase or toLocaleLowerCase and toLocaleUpperCase for special cases.
Further, we generally discourage using the angular.x helpers in application code.
Related
I'm getting the following error message when attempting to do a gulp serve on my AngularJS (ver 1.6.10) app:
Error: [$injector:modulerr] Failed to instantiate module myAppName due to:
$compileProvider.preAssignBindingsEnabled is not a function
#http://localhost:9805/app/scripts/app.js:43:9
invoke#http://localhost:9805/lib/angular/angular.js:5108:16
runInvokeQueue#http://localhost:9805/lib/angular/angular.js:4997:11
loadModules/<#http://localhost:9805/lib/angular/angular.js:5007:11
forEach#http://localhost:9805/lib/angular/angular.js:387:11
loadModules#http://localhost:9805/lib/angular/angular.js:4987:5
createInjector#http://localhost:9805/lib/angular/angular.js:4904:19
doBootstrap#http://localhost:9805/lib/angular/angular.js:1936:20
bootstrap#http://localhost:9805/lib/angular/angular.js:1957:12
angularInit#http://localhost:9805/lib/angular/angular.js:1842:5
#http://localhost:9805/lib/angular/angular.js:35431:5
mightThrow#http://localhost:9805/lib/jquery/dist/jquery.js:3534:21
The calling code looks like this:
/*
* Main module of the application.
*/
angular
.module('dataPipelineApp', [
//various parameters
])
.config(['$compileProvider', '$httpProvider', '$breadcrumbProvider', function ($compileProvider, $httpProvider, $breadcrumbProvider) {
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
$compileProvider.preAssignBindingsEnabled(true); //err here
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
// extra
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
$compileProvider.debugInfoEnabled(false); // speed up angular performance to not print debug info;
$breadcrumbProvider.setOptions({
templateUrl: 'app/views/headerBar.html'
});
//$httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
$httpProvider.interceptors.push("AddToken");
$httpProvider.interceptors.push("UnauthorizeInterceptor");
}])
Similar searches seem to insist that this is a versioning discrepancy. Similar searches for this issue also seem to say there is an issue with the versioning of angular-mocks, however we are not using angular mocks at all. I have tried downgrading my Angular to 1.5.5, which other searches suggest you cannot exceed - despite all my colleagues running this on Angular 1.6.10 or higher. I have also tried using npm to install angular-mocks, despite being unused, and syncing the version to match that of our Angular, but to no avail. I'm really not sure what to do, nor am I sure what's actually happening, why can't it find that function?
EDIT: I also checked in the browser, searching using the console by running a angular.version search - and it turns up 1.7.2 as my Angular version, despite me redoing gulp build and gulp inject serve after npm installing the older versions. It seems it isn't properly choosing the right version - is there something I'm missing to enforce the downgraded installations?
The $compileProvider.preAssignBindingsEnabled flag is deprecated in AngularJS V1.6 and has been removed from AngularJS V1.7.
The AngularJS team strongly recommends migrating your applications to not rely on it as soon as possible. AngularJS V1.6 went end-of-life on 1July2018.
From the Docs:
Due to 38f8c9, directive bindings are no longer available in the constructor.
Previously, the $compileProvider.preAssignBindingsEnabled flag was supported. The flag controlled whether bindings were available inside the controller constructor or only in the $onInit hook. The bindings are now no longer available in the constructor.
To migrate your code:
If you specified $compileProvider.preAssignBindingsEnabled(true) you need to first migrate your code so that the flag can be flipped to false. The instructions on how to do that are available in the "Migrating from 1.5 to 1.6" guide. Afterwards, remove the $compileProvider.preAssignBindingsEnabled(true) statement.
— AngularJS Developer Guide - Migrating to V1.7 - Compile
From the Docs:
Due to bcd0d4, pre-assigning bindings on component/directive controller instances is disabled by default, which means that they will no longer be available inside the constructors. It is still possible to turn it back on, which should help during the migration. Pre-assigning bindings has been deprecated and will be removed in a future version, so we strongly recommend migrating your applications to not rely on it as soon as possible.
Initialization logic that relies on bindings being present should be put in the controller's $onInit() method, which is guaranteed to always be called after the bindings have been assigned.
— AngularJS Developer Guide - Migrating to 1.6 - Compile
Note:
On 1July2018, support for AngularJS 1.6 ended. For more information, see AngularJS MISC - Version Support Status.
It is not supported anymore since AngularJS 1.6. For people who are still migrating their application to a more recent version of AngularJs, If you specified $compileProvider.preAssignBindingsEnabled(true) you need
to first migrate your code so that the flag can be flipped to false. and take a look to this guide https://docs.angularjs.org/guide/migration#migrating-from-1-5-to-1-6
AngularJs commit reference: https://github.com/angular/angular.js/commit/38f8c97af74649ce224b6dd45f433cc665acfbfb
Is there a way for WebStorm to "see" the methods in my HTML and link them with their respective component class?
Details
I usually write my component controller in one file and the component template (html) in another file.
When I do this, methods that are only used in the template are marked as "unused" by WebStorm, and they throw a warning.
For example, in the component ctrl I have a handleViewChange() method.
In the template file I have vm.handleViewChange();
WebStorm warns me that handleViewChange is an unused method even though I have used it in the template.
Please note: I am aware that I can suppress the warn for this particular statement. I would rather WebStorm recognized the method is actually used.
Particularly relevant with refactor-happy colleagues (or refactor-happy future me).
Edit #1
I have already enabled the AngularJS library in Webstorm settings, but it does not fix this particular issues.
Downloading angular TypeScript community stubs per suggestion at this post doesn't enable AngularJS support for your project.
You need to have angular.js file (debug version, uncompressed!) in your project (either in your project directory or configured as JavaScript library) - normally it's enough to get Angular directives/methods recognized. See http://blog.jetbrains.com/webstorm/2014/03/angularjs-workflow-in-webstorm/, 'Include angular.js in Your Project' section.
I have just taken a look at ngDoc, and even though documentation is sparse, I understand it needs a very specific namespacing syntax in the #name tag, for instance
moduleName.directive:directiveName
in the case of a directive (gleaned this from here).
However, the officially endorsed Angular styleguide says we should namespace our modules with dots (e.g. app.users).
Now, am I just not getting it, or are those two things mutually exclusive?!?
Is there a way to escape the moduleName for ngDoc? I really don't feel particularly like renaming all my modules (plus, I happen to think the styleguide makes sense)...
Never mind. For anyone coming across this and experiencing the same behavior:
If you happen to be using the grunt-ngdocs plugin, try uninstalling and reinstalling it:
npm remove grunt-ngdocs
npm install grunt-ngdocs
The ngNewRouter (now named ngComponentRouter) was supposed to be in 1.4, but was delayed and is now supposed to go into 1.5 (as I understand it). However, it's not in the 1.5 beta2 package. I do see angular1_router on github, but I don't see that built module included in the 2.0 alpha packages either.
Does anyone know if the new router will actually be in the 1.5 release?
Is there a current build of the new router hosted anywhere? I managed to find a copy of the compiled js from a random plunker, but haven't been able to compile the source myself (issues with node-gyp & msbuild, still working on that).
Does anyone know of any up-to-date documentation or working samples on the new component router? The best site I've found so far is pretty close (it says it was published in February, but it uses ngComponentRouter rather than ngNewRouter so it's clearly being updated), but the post still has things wrong - like it says to create controllers for the components you're loading for the routes, but I discovered that you actually need to be creating them as directives (optimally using the new "component" wrapper in 1.5) with the restrict set to "A" (that was fun to figure out).
You can get the new router via npm with:
npm install #angular/router
For more information on the current API you can have a look at:
https://angular.io/docs/js/latest/api/router/Router-class.html
It's for Angular 2 but the core mechanics of the router are the same, and it should give you some hints on how the API has been changed compared to the ngNewRouter.
It looks like the component router has been released. Here is the official documentation: https://docs.angularjs.org/guide/component-router
I'm not seeing any official announcements saying it was released yet though, so I'm not sure if it's supposed to be "official" or not.
I'm working on an AngularJS web app using the ngbp framework (formerly ng-boilerplate) which by default uses AngularJS 1.2. The project is in early stages so we're experimenting with using AngularJS 1.3 instead of 1.2, as it has some nice features we'd like to make use of. We're also working under the assumption that AngularJS 1.3 will likely be the release version by the time we go live.
So I simply switched the AngularJS version number in the bower.json file and everything seems to work fine in Chrome, Safari, and Firefox except for when I enable strict dependency injection (ng-strict-di). When strict DI mode is on I get the error below (more detail here), but it only occurs in Chrome (FF & Safari both still work as expected).
Failed to instantiate module ng due to:
Error: [$injector:strictdi] function($provide) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.3.0-build.3121+sha.a4520a7/...)
at http://localhost:8080/assets/ngbp-0.3.2.js:87:12
at annotate (http://localhost:8080/assets/ngbp-0.3.2.js:3352:17)
at Object.invoke (http://localhost:8080/assets/ngbp-0.3.2.js:4036:21)
at runInvokeQueue (http://localhost:8080/assets/ngbp-0.3.2.js:3964:35)
at http://localhost:8080/assets/ngbp-0.3.2.js:3973:11
at forEach (http://localhost:8080/assets/ngbp-0.3.2.js:338:20)
at loadModules (http://localhost:8080/assets/ngbp-0.3.2.js:3954:5)
at createInjector (http://localhost:8080/assets/ngbp-0.3.2.js:3894:11)
at doBootstrap (http://localhost:8080/assets/ngbp-0.3.2.js:1494:20)
at bootstrap (http://localhost:8080/assets/ngbp-0.3.2.js:1509:12
It seems that for some reason the angular source code itself is failing the strict DI test and thus won't load in the Chrome browser from within the ngbp framework. The above error comes from a fresh clone of ngbp with the only change being the version of AngularJS (1.3), not from our actual project (though the error is the same in both cases). I know that this version of ngbp doesn't officially support Angular 1.3 but as I said the app seems to work just fine with this change, even though it fails this test. I'm wondering if anyone might have some insight into what is causing this error and whether or not it would be ill-advised to proceed with this combination of AngularJS 1.3 and ngbp (version: 0.3.2)? Is there something else within ngbp that needs to be changed along with the version of AngularJS?
If it helps I'm serving up the files locally via cd ../bin; http-server -p 8080. If any other information would help just let me know and I'd be happy to provide it if possible.
Thanks for your time.
EDIT: If it helps I tested on OS X 10.9.4 with the following browser versions:
Chrome (Version 36.0.1985.143)
64-bit Chrome (Version 37.0.2062.94)
Firefox (31.0)
Safari (Version 7.0.5 (9537.77.4))
Looks like you might be using batarang, it does not work well with ng-strict-di. Try disabling batarang from google chrome developer tools and the app should start normally again.
[edit] AngularJS batarang now support ng-strict-di since v0.5.0. This error should no longer happen.