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 asking this question coz, the app that I'm testing flows from a non-angular app. I'm my case the whole page is non-angular and it contains a link. On clicking on it opens the new angular view. The problem that I'm facing is that the app is manually bootstrapped. I even added the ng-app under a div and mentioned that as rootElement in the script. However this is throwing an error saying "unable to synchronize with the page. No injector found. The reason maybe that it's not under ng-app. Later when I turn off the synchronization I can't locate elements using their binding values.
I've tried most of the workarounds on net and none of them seems to fix this. Could any of please help
Manually bootstrapped apps are a pain. When you turn off browser synchronization you are telling Protractor that Angular is not and will not ever be present. Because by.binding is Angular-only, and there is no Angular present to bind to, that particular locator isn't going to return an element. I use Protractor for non-Angular apps quite often and it works just fine as long as you don't try to use locators that are Angular-specific. Your options are:
Test all of the non-Angular stuff manually, then the Angular stuff separately
Test everything without the Angular locators
How can I tell whether a (Drupal 7) web app was built using Angular by looking at the page source, and not having to ask the developers?
The best way to check is to write "angular" on browser console. If you get any object [With child objects as "bind","bootstrap","callbacks","module" etc.] then its an angular web app.
You can install a chrome or firefox extension called Wappalyzer. It tells you which site you are navigated on in your browser and the stack they use.
Find it here: https://www.wappalyzer.com
You could try: angular.version.full first. If this doesn't work, try getAllAngularRootElements()[0].attributes["ng-version"]. The reason being in Angular 1 the former will work and from angular 2 onwards the later will work.
If it's an online site you can use http://builtwith.com/ and it usually can give you a good and useful bunch of information about that site.
However if they are using angular you can take a look at their page sources to see if they are using any attributes of angular like ng-repeat for example
You can also take a look at the sources that your browser get while browsing that site to see if javascript files for angularjs are included among the sources.
Application declared using ng-app directive
very simple controller and directive
check for ng-model, ng-repeater attributes in the code. All these attibutes are written in small letters.
Also you can check by typing in the console(ctrl + shift + i) and navigate to console tab. There type in window.angular.version --> it displays the version of the site your are currently inspecting.
Try
https://builtwith.com/
This is the website that currently gives you the most detailed information about what technologies a site uses. They will let you do 5 free lookups a day.
https://wappalyzer.com/
is a good one too, and serve as a complement to builtwith. I don't think there is a limit of lookups, but the results are less detailed.
Those two used together may give you more insight.
use window.getAllAngularRootElements() in the browser console if it return some value its an angular application
For Angular, in Chrome's inspector, in the Elements tab, inside the body element is an element called app-root containing ng-version, which shows the Angular version it's using.
There is a Google Chrome extension called 'ng-detector'. It may be obtained from the Google webstore:
https://chrome.google.com/webstore/detail/ng-detector/fedicaemhcfcmelihceehhaodggfeffm
It creates a small icon next to the URL bar that indicates whether or not it thinks the page was created using Angular, although I have not thoroughly tested its validity.
Install chrome extension React-Detector, it works!
window.getAllAngularRootElements() worked for me
You can install a Chrome or Firefox extension called Augury. It tells you if app is an angular or not.
I am learning angular and wanted to use some modules. I have used a angular module and made it to work on a html page by itself. But When I merged this module into my main html it stopped working. Say for example ng-click is not working. Since this is a third party module and since it did not throw any exception in the console of chrome developer tools I cannot figure out what is the exception or what is causing it not to work
Please advise..
I know this question is generic but if in such scenarios what is the best way to solve the problem
Thanks
I've run into an issue with an angular app I'm working on. I've defined a controller which adds one variable to the scope. After the page loads, I can see that the scope doesn't have the variable - when I try to inspect it in chrome dev tools, it returns an undefined. I've put a break point in the controller code which initialises the variable and I can see that it is not being hit. I've checked for javascript errors and there are none.
But now I'm stuck - I don't know how to proceed with debugging this issue. Why would a controller that has been specified on the page with an ng-controller directive not be initialised? And what techniques are available for debugging such an issue?
Update: I've already tried batarang - doesn't help. The moment I try to enable inspection in batarang, it reloads the page. I'm able to inspect the scope using techniques specified in ng-book (https://www.ng-book.com/p/Debugging-AngularJS/) but I'm still not making much headway.
Finally figured out the problem: There were 2 issues:
angular auto bootstrap - there were two nested elements in the DOM which were trying to do auto bootstrap. This is not supported according to the documentation.
the angular bootstrap was kicking in before the DOM had finished loading.
So we used requirejs' domready plugin to defer angular bootstrapping till the dom is ready.
Try the chrome extension Batarang, it extends developer tools. Its handy for debugging scopes, models & dependencies.
https://github.com/angular/angularjs-batarang/
https://chrome.google.com/webstore/detail/ighdmehidhipcmcojjgiloacoafjmpfk
UpDate:
Just found this, javascript stack trace Spy-js:
https://github.com/spy-js/spy-js
http://spy-js.com/