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
Related
I am aware of siiar questions, such as Angularjs 1.7.9 - Possibly unhandled rejection and those mentioned in it as duplicates.
However, my code does not use promises (that I am aware of; certainly no $promise or $http).
I am just knocking up a simple ui-router demo for a friend. It is just two views, each with a button that toggles to the other view. It works just fine with AngulrJs 1.5, and breaks with the above error in 1.7.
A simple as it is, it's a bit too much code to post. In case, rather than finding the error in my code, I woudl like a canonical answer to help others who read this question in future : how to go about denugging this error message?
Error: transition failed (caused by "Possibly unhandled rejection: {}")
at r [as $get] (http://localhost/common/js/third_party/ui-router_zero_pint_2_point_11/angular-ui-router.min.js:7:11365)
at Object.invoke (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:45:62)
at http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:46:365
at d (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:43:495)
at e (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:44:235)
at Object.invoke (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:44:320)
at http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:47:18
at r (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:8:76)
at fb (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:46:499)
at c (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:22:57)
The latest version of UI-router (1.0.25) solved the problem. Feel free to post an answer.
You will get a more informative stack trace if you use angular.js instead of angular.min.js and angular-ui-router.js instead of angular-ui-router.min.js. Angular-UI-Router uses promises in its transition module. It looks like you upgraded your version of AngularJS without upgrading the version of Angular-UI-Router. Upgrade your router from V0.2.11 to V0.4.3. It looks like your problem is caused by sloppy Angular-UI-Router code. If they didn't fix the issue by V0.4.3, you can either patch the library or live with the messages.
Debugging "possibly unhandled rejection"
The stack trace will show the file and the line number from which the error originates. Examine the code and fix the problem. If the error orginates in a third- party library, try upgrading to the latest version or contacting the third-party library vendor.
As a last resort, disable the "possibly unhandled rejection" messages:
app.config(functon ($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
});
This is not recommended as it allows other problems to silently fail.
If one doesn't care about a specific promise failing, add a .catch handler:
$http(config).then(function(response) {
//...
}).catch(function(response) {
//I don't care about errors
if (debug) console.log(response);
//Re-throw error response
throw response;
})
Upgrading AngularJS
When upgrading AngularJS, it is best to upgrade all of the AngularJS modules at the same time. That is when migrating from angular.js#1.4 to angular.js#1.5, at the same time upgrade to angular-animate#1.5, angular-resource#1.5, angular-route.js#1.5, etc. I have seen unpleasant problems when trying to mix and match versions of AngularJS modules.
When migrating, I recommend upgrading one minor version at a time. For example, upgrade from V1.4 to V1.5 first, fix what breaks, then upgrade to V1.6.
The current version is 1.7.9 pollution-eradication (2019-11-19). I recommend using the latest version as the AngularJS team has committed to fixing security bugs only in both V1.2.x and the latest version.
For more information, see
AngularJS Developer Guide - Migrating from Previous Versions
AngularJS Version Support Status - Long Term Support
Upgrading Angular-UI-Router
UI-Router for AngularJS has two major versions
Version 0.4.3 UI-Router-Legacy
Version 1.0.25 UI-Router for AngularJS
I recommend upgrading to the latest version of UI-Router-Legacy before migrating to the latest version of UI-Router for AngularJS. There have been major breaking changes between the two and it is best to deal with it incrementally.
For more informaton, see
Angular-UI Guide: UI-Router 1.0 Migration
One way to debug ui-router is the following:
From the console inject the $state service typing the following:
var test = angular.element(document.body).injector().get('$state');
Then simulate and perform the transition that causes the problem:
test.go('root.details') // use the state url here
After that, details of the transition will be printed in console. Into $$state object, you may find more details about the failed transition and reasons of failure:
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.
I'm trying to setup the angular-django-registration-auth AngularJS module to help smooth the login/logout process for my in-progress web app, which has an AngularJS frontend consuming a Django REST Framework API and django-rest-auth for authentication/registration.
The rest-auth endpoints for login and logout work just fine, however I'm having issues injecting the Angular helper module as described on the module's github page. I've added the requisite dependency to my main app declaration:
var app = angular.module('myApp', ['ui.router', 'ngRoute', 'xeditable', 'angularDjangoRegistrationAuthApp']);
But I get several of the following errors on load:
Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.0/$injector/nomod?p0=angularDjangoRegistrationAuthApp
This error seems pretty clear initially- that the app hasn't been declared, however I'm not sure how to do so beyond the injection above (I'm new to a lot of this in general, and definitely the frontend part). Even if I remove the angularDjangoRegistrationAuthApp dependency from the var app = declaration above, I still get instances of the $injector:nomod error, which seem to originate from the included djangoAuth.js file that contains all of the helper functions, and comes straight from the provided module.
The module repo hasn't been active since early last year, but a recently opened issue notes some changes that have to be made for Angular 1.4+ (I'm using 1.5) so it seems that it largely still works. I made those syntax changes but still hit the error. Have I neglected to do something simple as far as declaring the auth helper app?
I know this app has it's own dependencies, so could that be what I missed? I thought the files I added would handle those, so I haven't installed anything outside of angularDjangoRegistrationAuthApp
I ended up figuring this out, I believe it's related to something with my development environment (Windows, Python 3.4, Visual Studio 2015 + Python Tools for Visual Studio).
I simply declared the angularDjangoRegistrationAuthApp at the top of my JS file, above the line where I declared my own app with the registration app as a dependency. So it looks like this:
angular.module('angularDjangoRegistrationAuthApp', []);
var app = angular.module('myApp', ['ui.router', 'ngRoute', 'xeditable', 'angularDjangoRegistrationAuthApp']);
I'm not sure why this is necessary, as the person I'm working with (not using VS + PTVS) doesn't require the extra declaration in order to successfully load the module. I've had to add similar declarations for a couple other Angular modules I'm using, while my friend has had no issue simply adding them as dependencies in the main app declaration.
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.
When I have an Angular directive that uses a controller I've been able to access the directive's scope in my tests by doing this:
element = angular.element('<my-directive></my-directive>');
element = $compile(element)($rootScope);
$rootScope.$digest();
scope = element.scope();
That enables me to set/get scope properties and directly call functions defined by the directive's controller.
However, as soon as I introduced jQuery to the project (required by another dependency I want to use) this stopped working. Specifically in the test element.scope() is returning undefined. Using dev tools I can see that this is not the case when the app is running for real – i.e. I can do $('.blah').scope() and get back a non-undefined value.
Anyone got an idea why this wouldn't work? I've added jQuery to my karma.conf.js (I'm using the Yeoman Angular generator) in the same order as it's included in the HTML file.
I found the problem. I'm running my tests in PhantomJS and was pulling in jQuery 2.0.3. Downgrading to jQuery 1.10.2 made everything work again. I'm kind of surprised that PhantomJS would have a compatibility issue but that seems to have been the problem.