What am I doing wrong with Angular js manual bootstrap process? - javascript

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

Related

Webpack chunks are not reloaded on deploy

I've been having this issue for awhile now, first describe here. After upgrading to Webpack 4, it seemed like the issue resolved itself, but it doesn't seem to be the case.
The issue here, is that after deploy, when the chunks get updated, the server is not aware of it? It's quite hard to reproduce this issue and I never were able to do it on demand. But sometimes, if I have the page hanging, the browser will try to grab, what I assume, cached versions of webpack chunks for css and js. But as those are outdated now, I end up with this and a empty website:
Reloading the page, sometimes having to do a force reload, is the only way to fix this, as browser redownload the correct chunks. I'd love to get some pointers to resolve this, as I've never managed to find anything written on this and how to fix this. I am planning to either drop chunks all together or provide an inline JS that will ask to reload the page if it detects any of these 404s... which is not ideal way to do this.
You can find my webpack configuration in the link above. I am deploying this to Heroku, my app is Rails 5.1, with Vue.js 2

Javascript files not loading consistently?

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".

Buildfire - Issue Loading Plugin in Previewer

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?

JS Injection in Wordpress

I just upgraded to WP 4.3.1 on one of my websites. After upgrade (which seemed to go with no problems at all), I noticed that the layout of my pages has changed. There is a bar across the top of my page (not the admin bar) that wasn't there before. When I inspect the element there, I see a whole bunch of new code that is not being created by any of my plugins. And I cannot find the source of this injection in any of the provided php files. I have no idea where it is coming from, but I suspect that something in the WP 4.3.1 package has been compromised, or maybe there is a callout to a site somewhere that injects this code.
Anyway, this is a BIG problem and I don't know how to fix it.
I've copied the injected injected code below. It appears in all the pages on my site, right below the tag. Interestingly it can only be seen by "inspecting element" in the browser; page source does not reveal it (I've added some line breaks to make it more readable, but this is exactly what shows up in my page.
This same problem occurs on every site where I upgrade to WP 4.3.1. I hope someone can fix this problem IMMEDIATELY!!
Clearing cache, history & cookies doesn't resolve the problem. I can't tell where this injected code is coming from. Also, Google doesn't seem to be much help in telling me anything useful about http://kfc.i.illuminationes.com/snitch, which is one of the links that is being created.
Our site was infected, this is what we did to get rid of it
Thanks to this discussion which led me to a more detailed one
Connect via ssh to the server
Check the directory structure and find out recently created / modified directories
Check recently modified files for <script>. I found many files having JavaScript inserted which would connect to external sites.
As these calls were made on each page, I checked header.php in wp-content/themes/your-theme directory. (check the ones you are not using as well as that might be infected but may not show in radar)
You might also want to check footer.php for infection.
Re check file permissions on server as per WordPress Hardening guidelines on Codex
Delete unrequired ftp accounts in FileZilla (or its equivalent)
If you use any caching, delete entire cache.
You can verify if this worked using devtools network tab.

Angular JS Page Load Issue in IE9

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.

Categories