I've migrated my angular application from Angular 1.3.15 to Angular 1.5.5. I'm struggling with this for about a day and tried various possible solutions mentioned in the AngularJS Error Reference, checked my code to not contain,
Multiple module definitions for the same moudule
Not contain a controller inside another controller.
Attempting to inject a scope object into anything that's not a controller or a directive.
Also tried checking the dependency issue
Couldn't find any fruitful solution to this, the whole screen seems like broken, like, angular itself hasn't been loaded, things, like interpolations are not resolved to their values.
Help is much appreciated.
Thanks!
The i18nFilter which you are referencing in your application is likely being provided via the angular-localization library.
There are a number of issues raised in the project relating to version compatibility when upgrading the AngularJS version.
I suggest you track down the version you are referencing and upgrade to a supported version for AngularJS 1.5.5
Related
I need to migrate my AngularJS version from 1.6.10 to 1.7.8. I would like to know will there be any code breakage after migration?
If anyone could provide the list of differences between 1.6.x and 1.7.x would be much more helpful.
Migrating from (AngularJS) 1.6 to 1.7 contains the information you're looking for. The most notable changes are:
$resource has now support for request and requestError interceptors
Several deprecated features have been removed:
the $controllerProvider.allowGlobals() flag
the $compileProvider.preAssignBindingsEnabled() flag
the angular.lowercase and angular.uppercase methods
the $cookieStore service from the ngCookies module
the ngClick override directive and corresponding services from the ngTouch module
the complete ngScenario module
In the linked resource there is also the full list of breaking changes.
The link for the specific version 1.7.8 is: https://code.angularjs.org/1.7.8/docs/guide/migration
I have just updated the Angular 1.5.9 to 1.6.0. All merging things done in my project, but directive parameter which is passed as argument is not getting value in directive controller. As I find undefined after updating.
Please give some suggestion, how to solve this.
After long R&D on how to solve my error, I found solution for this migration from Angular migration guide. Here mentioned to use $onInit for component, but for directive also we have to use $onInit.
Or you can place this in config file to allow for all application.
$compileProvider.preAssignBindingsEnabled(true);
So, I think this is helpful for others to solve the error on migration from 1.5 to 1.6.
Thanks.
The error message is pointing to line 13236 of the angular.js source file. It's strange, I rolled it back on the server to a point where I know I wasn't getting this error yet the error still shows up. Which makes me think it has nothing to do with my code and if it does, I have no idea what it could be so I don't know what to include here as code. Here is the github: https://github.com/muninn9/powerpot and url: https://eskil-todo-api.herokuapp.com/
I'm pretty sure the issue had to do with using jquery with Angular. I was using jquery for Bootstrap. "The way jQuery works to manipulate data in your views fights directly with how you use Angular to manipulate your views. When building out Angular projects, you should not add on the full jQuery library. jQlite is already included in Angular and this should be all the jQuery that is necessary." https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
The problem is now resolved after removing Bootstrap and jquery references and using Angular-UI Bootstrap.
I'm working on a Cordova application using AngularJS and OnsenUI. I'm having trouble with the documentation that's out there with respects to the call to ons.bootstrap().
Specifically, I am used to manually bootstrapping AngularJS applications in Cordova when needed -- i.e., either when the DOM loads, if I'm in a browser, or when the deviceready event fires, if I'm on a device, with a call to angular.bootstrap(document, [ 'myApp' ]).
I noticed that in Onsen, there's a necessary call to ons.bootstrap, with or without other parameters, such as ons.bootstrap('myApp', [...dependencies...]). I have fiddled around with this, and it seems like the only way I can get Onsen injected is if I use its bootstrapping call. However, elsewhere in my application's file, I'm still using the angular definitions (e.g., angular.module('myApp', [...dependencies...]).config(...).run(...)) and so forth.
I've found several things of questionable implementation, and haven't been able to find a definitive answer online as to this:
1) If I call angular.bootstrap within my initialization, Onsen never loads
2) If I use the ons.bootstrap call, things seem to work, but I end up repeating my dependencies within the bootstrapping call as well as my application definition using angular. This redundancy seems bad to me.
3) If I use both calls (not unexpectedly), I get a isWebView() already defined error, and the application goes nowhere.
Unfortunately, all of the examples on the Onsen website assumes all code (HTML, JS, etc.) like to reside in one spot, and doesn't seem to take Cordova into account. I've used Onsen in the past, but several versions ago, and the old methods of injection no longer seem to work.
So my question is, what is the way you're supposed to bootstrap and use Onsen, Angular, and Cordova together? Alternatively, is there a good example somewhere that doesn't involve Monaca?
Thanks in advance.
Of course there are good examples somewhere. Have you tried with the basic Onsen UI templates? They are provided in the 'Getting started' guide of Onsen UI and answer all your questions: http://onsen.io/download.html#download-templates
In short, Onsen UI is independent from Monaca and the only difference will be including Monaca's loader.js in your index.html (what includes OnsenUI, AngularJS, Cordova, etc.), or including all the libraries separately.
Also, ons.bootstrap() is optional, you can use angular.module('app', ['onsen']) if you want.
It is possible to use Cordova as well, you just need to include Cordova files as you would do in any other Cordova application. You can see it in the templates.
There are many examples out there with all of this, like the basic templates. More examples:
Onsen UI's Github: https://github.com/OnsenUI/OnsenUI/tree/master/demo
Onsen UI's blog: http://onsen.io/blog/developing-hybrid-mobile-apps-with-onsen-ui/
Hope it helps.
Well, for some reason, the only way I can get this thing to initialize appropriately is by using the Onsen bootstrap method and having it load all dependencies. Since ons.bootstrap() returns the Angular module, I'll use that for now.
So essentially, on the Cordova deviceready event, I call:
angular.module('myApp.controllers', []);
angular.module('myApp.services', []);
ons.bootstrap('myApp', [ ...dependencies... ]);
And yes, there are plenty of examples out there, but the ones that incorporate Cordova and exercise a reasonable organizational facsimile of how actual code would be used, being that different objects are defined within different files, in multiple folders, are quite lacking. Although admittedly by Google-Fu isn't necessarily great.
Thank you for your response.
I cannot get the Breeze Angular service (http://www.getbreezenow.com/documentation/breeze-angular) to configure Breeze to use Angular promises, i.e., I can never get the useNgPromises() function within breeze.bridge.angular.js to log a message to the console and thus I assume Breeze is never configured to use Angular promises.
My JS files are loaded as follows:
angular.js (v 1.3.14)
angular-route.js (v.1.3.14)
q.js (v 1.1.2) - This is here because I kept getting errors that Q was undefined if I left this out. I don't know if it is necessary to load Q.js if I use Angular promises instead.
breeze.js (v 1.5.3)
breeze.bridge.angular.js (v 1.1.0)
app.js and other app-specific JS files
So far, that satisfies steps #1 and #2 from the "Install It" section of that Breeze page.
Per steps #3 and #4 on that Breeze page and comments in breeze.bridge.angular.js, this is what my app.js looks like:
window.myApp = angular.module("myApp", [
"breeze.angular"
])
.value("breeze", window.breeze)
.config(["$routeProvider", function ($routeProvider) {
// Routing code
}])
.run(['breeze', function (breeze) {}]);
As far as I can tell, that code matches the Example #1 code on that Breeze page and satisfies steps #3 and #4 on that Breeze page.
Then I have some basic views that use controllers and datacontext JS files, the latter of which inject the breeze object as a dependency. To test whether Breeze is actually executing the configuration to work with Angular promises, I edited the breeze.bridge.angular.js file such that the following statement is included as the first line in the useNgPromises() function:
console.log("Using Angular promises!");
When I run my app, I never see that in the console, so I assume the configuration is not happening.
Am I doing something wrong in the setup? If so, what?
You absolutely do NOT need Q.js; the fact that you see errors relating to that library is an indication of a configuration mistake.
I think you found the problem when you added .value("breeze", window.breeze).
That one line wipes out the definition of the breeze service established by the 'breeze.angular' module (defined in breeze.bridge.angular.js), thus preventing the configuration of breeze for $http and $q. Without that configuration, breeze looks for a promises implementation elsewhere ... hence the complaint about missing Q.js. So ... yes ... that line was a disaster.
I wondered where you got the idea for that line. Thanks for referencing the Microsoft ASP Breeze/Angular template documentation. Wow that is old (2013). I'd kill it ... and the other defunct Visual Studio Breeze templates ... if I could (maybe I can). I thought we had made them hard to find. Looks like you found them. How?
That certainly isn't how we teach Breeze + Angular these days.
The "Todo Angular" sample is a far better guide (even if it is a year old).
I resolved the issue by commenting out the line:
.value("breeze", window.breeze)
I had included that line per the "Dependency Injection" section here: http://www.getbreezenow.com/ng-spa-template#module as well as the "Value Recipe" section here: https://docs.angularjs.org/guide/providers, but apparently it does not play well with the Breeze Angular service.
I am not sure exactly why this is the case but my best guess is that the issue was caused by Angular values not being configurable, per this explanation: https://gist.github.com/demisx/9605099, and I assume the Breeze Angular service requires the Breeze object to be configurable and therefore it should not be injected as a dependency for the app via the value recipe.
I should also note that after removing that troublesome line of code, I no longer receive an error indicating that Q.js is required since the Breeze Angular service successfully configures Breeze to use Angular's $q instead.