I have an angularjs SPA that is running into problems in IE9. The app works great in Chrome and Firefox. There is quite a bit data to download on the initial load and many dependencies managed through requirejs.
When I view the page in a fresh IE session I get a part of the webpage i.e. some parts just don't display on the screen. I check the network requests and they are short some items. If I reload at this point, the page will load fine because it already cached some of the files so it doesn't need to download them. However if I clear cache and retry the same thing will happen.
Missing files are not consistent, meaning that it's not always the same files.
Additionally, in console I can see the following error:
$digest already in progress
This app is an open source project that I am intimately familiar with, however I am not sure even where to start troubleshooting this.
Any ideas?
Thanks in advance
You've got something trying to start up a digest cycle when one is already running. You should check directives and any other code you have which calls either $apply() or $digest() directly.
I would try commenting out all of those $apply() and $digest() calls and see what happens. My guess is that the page will load successfully but you might not get everything on it updated. So then you can open another question and we can see what can be done to get rid of the call which is trying to start another digest cycle.
Related
I am using Angular 1.7.2 in a project i'm working on. (I prefer Angular 1.x)
I am doing the bootstrap process manually (because i'm adding scripts programmatically).
But, I am having 2 issues with the manual bootstrap process.
I have to use a setTimeout, else the bootstrap never works. And my problem with this is, the more files I add to my project, the longer i have to make the timeout.
Sometimes when I load my web page or refresh the site, not all my components are loaded. If i monitor the network traffic, i can sometimes see that the html files are not retrieved at all. And there are no errors in the console or anything.
It seems to me there must be something happening in the angular.boostrap process that is failing or getting stuck, but i can't figure it out.
For my first issue, why is the setTimeout required, is there a way to not need this?
Second, why does my site not load sometimes?
Could it be related to the OS locking the files temporarily because of all the source control, anti-virus, other services running on my computer? If so, how can i tell?
I put together a test project with relevant code here on github
I previously thought this was related to the routing, but it's not (see here), But it seems not related to angular-routing after all.
Any information would be much appreciated, this is driving me mad.
Update 1:
I have the code running here on github pages.
Best chance to replicate issue is to use google chrome, enter url, open dev tools (f12), then actually load url. Sometimes, the page doesn't load completely.
I have updated the test website to better reflect my project where I add scripts dynamically.
I think i found the solution thanks to a comment by igor
I moved my app.route.js file to be loaded before any of my angular component and directives and from what I can tell this solves my problem.
I will update the linked sample project too
We have a .net web forms application, running on iis on our own server that has show some strange behaviour in the last 24 hours.
Rollbar notified me of multiple errors all saying certain js functions/variables can't be found from a host of users - essentially breaking the app. I've come into work today, loaded the site up in chrome dev tools only to find it did not have any source file shown, and therefore no js files to load/step through (css & image files are there though).
To make matters more confusing, after refreshing the page everything is there as it should be?!
An updated build of the app was released yesterday, so I'm guessing that has something to do with it?
Honestly any speculative pointers on things we can look into to prevent it happening again would be appreciated.
If you have multiple javascript files and your code is running before its dependencies are loaded, then you get 'undefined' errors.
After page refresh the dependency files are already cached, so they load immediately, almost synchronously. That's why you dont get errors next times.
Try to disable cache in devTools and reload it a few times checking if next attempts are still working.
If that is the problem, you might consider modularizing your JavaScript code and loading it as asynchronous dependencies, for example by using browserify, webpack or even require.js. Anyways, you can find more in the subject looking for "javascript load order".
For some reason, trying to load my plugin in the previewer does not work. It begins to load with a white screen and little loading animation, but after about 2 seconds, sometimes quicker, the load seems to stop. his is characterized by the loading animation going away, leaving only a pure white screen.
When hooking it up to the debugger and loading the plugin again I can see warnings in the console that say "Pending rest calls taking too long. Stopping spinner." From this it seems that some type of request is being made to retrieve something on load of the plugin and it is obviously hanging.
I'm not sure how that interaction or case is taken care of internally in the previewer. when I check the network logs, I don't see any of the files required for the plugin even being requested. The only files that are requested are analytics files.
Moreover, I tried loading another plugin like the places the plugin. It seems to exhibit similar behavior when it has no data. The only difference is that it will actually load a view, and then immediately switch it out for a blank white view. I checked the debugger network tab for that too and it shows various GET requests for templates stuck in a state of "Pending." In this case however the warning about pending requests taking too long is not shown.
My plugin that I am trying to load has been stripped of all external calls to data sources. This means that the only files being loaded should be the ones packaged in the zip folder when I uploaded it. I'm not sure how to fix what seems to be a request error for the previewer.
I'm not able to reproduce the issues that you are seeing with the places plugin. Do you have the latest version of the SDK?
Does this issue occur for you for all plugins, or just certain plugins? What other plugins do you see it in, in addition to places and your custom plugin?
It might help if you can share the code of you custom plugin, too.
One last thing ... what App ID are you using in the plugin tester?
I'm running an angularjs app, and can't figure out why my page is loading slowly. The css and js files all load quickly, but there is a long delay between that and when the html loads, where the app just seems to stay suspended doing nothing
headertemplate.jtml, footertemplate.html, and notelist.html are the partials being loaded to make up the view
Angular uses ajax to retrieve templates. You should be able to look at the network tab in developer tools to see the ajax request for each template. That might give you a clue as to what the hold up is.
I'm not sure why it's taking so long to receive them, but one way you can speed that up would be to pre-cache the templates with a tool like HTML2JS. This way, your templates are just another JS file that you include along with your program code and templates are loaded as soon as your program code is loaded. It will increase your initial download size, but will greatly improve the speed of fetching templates.
You can cache all templates in $templateCache which will make angular app never make xhr request for partial htmls.
https://docs.angularjs.org/api/ng/service/$templateCache
There are various gulp and grunt modules to automate that process.
https://www.npmjs.com/package/gulp-angular-templatecache
https://github.com/ericclemmons/grunt-angular-templates
By the way are you making any server calls in angular.forEach, for some reason they don't show up in network tab (idk why?? o.O)
Or may be you are using resolve in ui-router's state config which is taking time to activate the state and calling html partial..
Here's a typical workflow:
Edit JS file
Save file, watchify automatically starts rebuilding it for me
alt-tab to browser
ctrl+R to reload page
That's great, except if watchify takes longer than steps 3 and 4, it sucks because you either get the stale code or an error.
Is there an easy way to guarantee that doesn't ever happen? Like a way for watchify to signal to my server that it should wait another split second before trying to load the requested page? If such a thing doesn't exist, how do people deal with this problem in practice?
I must suck at Googling because I can't even find people talking about this problem except this which says "Add a simple (Node-based) server that will block on requests until the watch is done running: this would avoid the always-frustrating phenomenom of reloading the page only to find the watch hasn't quite run yet." -- but unfortunately that's an entry in a todo list, not something that exists in that repo.
If you are using Grunt or Gulp you can use the live reload plugin.
Or you can play a beep when the task is complete, so that you know when to reload the page.
Also it may be worth looking at livereloadify.