angular.js and phantom.js error - angularjs

I am getting an error when i try running phantomjs via this stack: rails (3.2.11), rspec (2.12.2), capybara (1.1.4), poltergeist (1.0.2), phantomjs (1.8.1)
and angular.js (1.1.2).
I have many specs that run fine on this stack, without angular. But on a test page where I initiate angular, I get the follow error. When I run the specs using selenium driver, they pass.
{"name"=>"visit", "args"=>["http://127.0.0.1:57124/pages/angular"]}
{"response"=>{"status"=>"success"}}
{"name"=>"find", "args"=>["./descendant-or-self::*[contains(normalize-space(.), 'Hello')]"]}
{"error"=>{"name"=>"Poltergeist.JavascriptError", "args"=>[[{"message"=>"TypeError: 'undefined' is not an object (evaluating '$lastDestination.offset().top')", "stack"=>"TypeError: 'undefined' is not an object (evaluating '$lastDestination.offset().top')
at http://127.0.0.1:57124/assets/application.js:13100
at http://127.0.0.1:57124/assets/application.js:3046
at http://127.0.0.1:57124/assets/application.js:2722"}]]}}
This occurs even on the most bare bones content, only without any other ng directives (no controller instantiated etc), eg
<div ng-app>
<h1>Hello</h1>
</div>
The spec looks like
describe 'ng_posts', type: :request, js: true do
it "should load page" do
visit '/pages/angular'
page.should have_content('Hello')
end
end
This appears to be a phantom.js bug because the page loads in the browser (no errors in js console) and the specs run with Selenium. Is this a known issue? Can i get past it? Thanks.
Jon

nevermind.
Turns out it was a bug in another library, zurb-foundation (alternative to twitter bootstrap) which was fixed a week ago but the gem update didnt have it yet. Updating Gemfile as follows fixed it.
gem 'zurb-foundation', github: 'zurb/foundation'

Related

Uncaught TypeError: angular.module(...).info Ionic1

I've got some issue for 2 days, it's getting on my nerve, if someone now how to fix this it will be very helpfull :
I've got a ionic 1 project, that I have to do some update, but nothing seems to work...
when i do ionic serve, and i look the console of the navigatori got :
Uncaught TypeError: angular.module(...).info is not a function
and
ReferenceError: Connection is not defined
at Object.isOnline
i'm stuck on the entry page and ng-src ng-click seems to not working.
I've look many post but nothing seems to resolve my problem.
Not all your angular scripts are the same version. .info was introduced recently, you might have angular files with different version.
Refer to related angular issue.
https://github.com/angular/angular.js/issues/15786
I got something like this :
Uncaught TypeError: angular.module(...).info is not a function
at angular-resource.js:445
at angular-resource.js:858
angular-resource.js:445:
angular.module('ngResource', ['ng']).
info({ angularVersion: '1.6.4' }).
provider('$resource', function ResourceProvider() {
var PROTOCOL_AND_IPV6_REGEX = /^https?:\/\/\[[^\]]*][^/]*/;
at angular-resource.js:858:
})(window, window.angular);
It appears that I can't ionic serve, that app, but I can cordova build android, on the computer that has develops it , but not on my computer which I develops ionic 2 project.
I don't know if this is from my npm, node, cordova version or if is something completly diferent.

issue with running Angle - Bootstrap Admin app (angular-meteor version): TypeError: $browser.addPollFn is not a function angular-cookies.js:60

just purchased Angle - Bootstrap Admin app from wrapbootstrap
Tried to run the angular-meteor version of the app
The first issue was that meteor did not like the contents of the default index.html, so I renamed the file to be index.ng.html
Now the error I'm getting in the browser console is:
TypeError: $browser.addPollFn is not a function angular-cookies.js:60
What can be done to fix this?
Not sure about wrapbootstrap, but generally this error means you are using incompatible versions of angular and angular-cookies.
The external angular modules you use (e.g. ngAnimate, ngCookies, ngResource, ngRoute etc), should always be the same version as angular.
This issue can be Resolved by using same Version of angular.min.js and angular-cookies.js.
It always good to use same version of files

Chrome gives different results in karma than alone

I have a small app that I have been working on the UI with the client. I am using TypeScript and Angular write the client code. I created a bar bones controller to deliver hard-coded data to the UI for layout purposes and it has been working fine in Chrome and Firefox.
Now that I am ready to start adding business logic I want to implement testing, so I installed karma (which has been challenging to say the least). When I run the code with karma using the Chrome browser I get a "function is undefined" error on a function exported from a TypeScript module that still works just fine when I use Chrome outside of karma (in WebStorm). The property is there, but the defined function is not.
The js generated code seems classic and conventional to me.
Can someone tell me why the code behaves differently under karma?
When I run the code with karma using the Chrome browser I get a "function is undefined" error on a function exported from a TypeScript module that still works just fine when I use Chrome outside of karma (in WebStorm). The property is there, but the defined function is not
Mainly just ensure correct order of file (script) loading.

AngularJS 1.3 with ngbp framework doesn't load in chrome browser when using ng-strict-di

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.

Problems defining two services in modules

I try to define angular services of an angular module in serperate files.
While Chrome only mentions an Uncaught Object, Firefox throws this message:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.9/$injector/modulerr?p0=LaRa&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.9%2F%24injector%2Fnomod%3Fp0%3DLaRa%0AF%2F%3C%40http%3A%2F
This tells me nothing. See my jsfiddle failing here.
I looked up the "recommended Setup" article in the angularjs documentation for modules. When i copy their example to my jsfiddle i get the same error. see jsfiddle here.
Their plunkr example works thou.
Now jsfiddle includes the javascript inline, plunkr uses a file and there are certain other differences. Sure. But is that really it?
I never read anything about angularjs only working if you put your javascript in an external file.
If i copy from their tutorial, it should work instead of giving a weird error shouldn't it?
What am i doing wrong here?
EDIT:
If i change from onLoad to wrap-in-head it works. Yet i do not know why.
Works as expected when you actually attach the angularjs 1.2.1 in head
<div ng-controller="myController">
{{ greeting1.value }}!
{{ greeting2.value }}!
</div>
http://jsfiddle.net/Sa95B/4/

Resources