Skip to content
This repository has been archived by the owner on Jan 21, 2025. It is now read-only.

Issue with step 11 of angular-tutorial #3

Closed
lmessinger opened this issue Apr 29, 2013 · 9 comments
Closed

Issue with step 11 of angular-tutorial #3

lmessinger opened this issue Apr 29, 2013 · 9 comments

Comments

@lmessinger
Copy link

trying tutorial 11 crashes the server - probably on the pre-rendering using JSDOM. crash log below. Same issue also happened on my own app, BTW.

the code below includes some of my logs (js here)

thanks!

C:\code\server\ang-cat>node server\webserver.js
Express server listening on port 3000
Express server listening on port 443
prerenderer url: http://localhost:3000/index.html
back from request
document after jsdom true
GET /index.html 200 45ms - 560
GET /js/services.js 200 12ms - 261
GET /js/app.js 200 10ms - 434
GET /js/filters.js 200 13ms - 186
GET /js/controllers.js 200 16ms - 545
GET /lib/angular/angular-resource.js 200 12ms - 15.93kb
GET /lib/angular/angular.js 200 108ms - 493.6kb

http://localhost:3000/lib/angular/angular.js:8128
throw e;
^
Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $locationWatch; newVal: 18; oldVal: 17","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngRepeatWatch; newVal: undefined; oldVal: undefined"],["fn: $locationWatch; newVal: 19; oldVal: 18","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngRepeatWatch; newVal: undefined; oldVal: undefined"],["fn: $locationWatch; newVal: 20; oldVal: 19","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngRepeatWatch; newVal: undefined; oldVal: undefined"],["fn: $locationWatch; newVal: 21; oldVal: 20","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngRepeatWatch; newVal: undefined; oldVal: undefined"],["fn: $locationWatch; newVal: 22; oldVal: 21","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngRepeatWatch; newVal: undefined; oldVal: undefined"]]
at Error (unknown source)
at Object.$get.Scope.$digest (http://localhost:3000/lib/angular/angular.js:7953:19)
at Object.$get.Scope.$apply (http://localhost:3000/lib/angular/angular.js:8125:24)
at done (http://localhost:3000/lib/angular/angular.js:9135:20)
at completeRequest (http://localhost:3000/lib/angular/angular.js:9297:7)
at xhr.onreadystatechange (http://localhost:3000/lib/angular/angular.js:9267:11)
at exports.XMLHttpRequest.dispatchEvent (C:\code\server\ang-cat\node_modules\connect-prerenderer\node_modules\jsdom\node_modules\xmlhttprequest\lib\XMLHttpRequest.js:534:25) at exports.XMLHttpRequest.setState (C:\code\server\ang-cat\node_modules\connect-prerenderer\node_modules\jsdom\node_modules\xmlhttprequest\lib\XMLHttpRequest.js:553:14)
at IncomingMessage.exports.XMLHttpRequest.send.syncFile (C:\code\server\ang-cat\node_modules\connect-prerenderer\node_modules\jsdom\node_modules\xmlhttprequest\lib\XMLHttpRequest.js:403:13) at IncomingMessage.EventEmitter.emit (events.js:123:20)
@dai-shi
Copy link
Owner

dai-shi commented Apr 29, 2013

How does your html file look like?
Is bootstrapping like the following?
angular.bootstrap(document.body, ['phonecat']);

@lmessinger
Copy link
Author

Hi

I tried with it too, same thing. Below is the html. It might have something to do with ngView, since I've tried with step 6 that doesnt have ngView and it doesnt break node (although it has ng-repeat issues that i'll post in another issue). thanks for looking at this. I hope we can mature this project as its so essential for real public-facing sites.

<!doctype html>
<html lang="en" >
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/services.js"></script>
  <script src="lib/angular/angular-resource.js"></script>
</head>
<body>

  <div ng-view></div>
  <script>
    angular.element(document).ready(function() {
        if (document.body.getAttribute('data-prerendered')) {
            document.addEventListener('click', function() {
                document.removeEventListener('click', arguments.callee, true);
                angular.bootstrap(document.body, ['phonecat']);
                return true;
            }, true);
        } else {
            angular.bootstrap(document.body, ['phonecat']);
        }
    });
</script>

</body>
</html>

and the exception:

http://localhost:3000/lib/angular/angular.js:8128
            throw e;
                  ^
Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $locationWatch; newVal: 18; oldVal: 17","fn: ngModel
Watch; newVal: undefined; oldVal: undefined","fn: ngModelWatch; newVal: undefined; oldVal: undefined
","fn: ngRepeatWatch; newVal: undefined; oldVal: undefined"],["fn: $locationWatch; newVal: 19; oldVa
l: 18","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngModelWatch; newVal: undefined
; oldVal: undefined","fn: ngRepeatWatch; newVal: undefined; oldVal: undefined"],["fn: $locationWatch
; newVal: 20; oldVal: 19","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngModelWatch
; newVal: undefined; oldVal: undefined","fn: ngRepeatWatch; newVal: undefined; oldVal: undefined"],[
"fn: $locationWatch; newVal: 21; oldVal: 20","fn: ngModelWatch; newVal: undefined; oldVal: undefined
","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngRepeatWatch; newVal: undefined; ol
dVal: undefined"],["fn: $locationWatch; newVal: 22; oldVal: 21","fn: ngModelWatch; newVal: undefined
; oldVal: undefined","fn: ngModelWatch; newVal: undefined; oldVal: undefined","fn: ngRepeatWatch; ne
wVal: undefined; oldVal: undefined"]]
    at Error (unknown source)
    at Object.$get.Scope.$digest (http://localhost:3000/lib/angular/angular.js:7953:19)
    at Object.$get.Scope.$apply (http://localhost:3000/lib/angular/angular.js:8125:24)
    at done (http://localhost:3000/lib/angular/angular.js:9135:20)
    at completeRequest (http://localhost:3000/lib/angular/angular.js:9297:7)
    at xhr.onreadystatechange (http://localhost:3000/lib/angular/angular.js:9267:11)
    at exports.XMLHttpRequest.dispatchEvent (C:\code\server\ang-cat\node_modules\connect-prerenderer
\node_modules\jsdom\node_modules\xmlhttprequest\lib\XMLHttpRequest.js:534:25)
    at exports.XMLHttpRequest.setState (C:\code\server\ang-cat\node_modules\connect-prerenderer\node
_modules\jsdom\node_modules\xmlhttprequest\lib\XMLHttpRequest.js:553:14)
    at IncomingMessage.exports.XMLHttpRequest.send.syncFile (C:\code\server\ang-cat\node_modules\con
nect-prerenderer\node_modules\jsdom\node_modules\xmlhttprequest\lib\XMLHttpRequest.js:403:13)
    at IncomingMessage.EventEmitter.emit (events.js:123:20)

@dai-shi
Copy link
Owner

dai-shi commented May 1, 2013

Hi, I could reproduce the problem and I now remember that this occurred me once in ngtest07.html.
The problem is redirectTo in the $routeProvider. The workaround for now is not to use redirectTo.
No clue yet how to fix this. I guess we need to modify JSDOM, which means it might take some time to resolve this.

@lmessinger
Copy link
Author

ok good. I've been trying with the router I'm using, angular-ui router and it crashes it much the same way - over there, it might be 'transitionTo' which crashes it, but its really a major part of the architecture and cannot be operated with it

could it relate to $locationWatch? it might be that jsdom does not update the location.href well or doesnt fire right events after updated. I found this, btw - it might help - http://stackoverflow.com/questions/10054071/jsdom-hashchange-event

@lmessinger
Copy link
Author

from some logging on angular.js it seems $locationWatch doesnt settle since oldvalue is always http://localhost:3000/catalog/productdetails/145578
but absUrl is always http://localhost:3000/#/catalog/productdetails/145578

this is with my app, using html5 more. so maybe jsdom fallbacks to hashbangs and then it fails? just a thought

@dai-shi
Copy link
Owner

dai-shi commented May 2, 2013

Thanks for investigating this. I agree that $locationWatch is a major part of angualr.js.

@dai-shi
Copy link
Owner

dai-shi commented May 2, 2013

Possible related ticket: angular/angular.js#1417

@dai-shi
Copy link
Owner

dai-shi commented Jun 22, 2013

jsdom/jsdom#433

@dai-shi
Copy link
Owner

dai-shi commented Jun 22, 2013

@lmessinger Please try your example and if it still fails, reopen the issue.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dai-shi @lmessinger