weirdest thing just happened. My angular app was working fine until last night. This morning, when I run it, it doesn't work on Chrome. I haven't modified anything to the code, and I see no errors on the developer console. What makes it even more weird is, the app works just fine all other browsers and even in incognito mode in Chrome. I tried disabling some extensions but that didn't do the trick either. On the surface, what seems to be the problem is that the any paths following the hashtag is not being populated whether I use ui.router or ngroute. Manually typing the paths does not work either. Does anybody have the same problem? What is going on?!
Just clearing cache didn't work. I had to to clear the cookies and plugin data as well. I'm thinking it might be related to recent Auth0 implementation. Will need to look into it so the problem doesn't occur again. For now though, I will close the question.
Related
I have a create-react-app build being served by flask. It works fine in other browsers; however on Firefox, when I do a reload, the main.js file is stuck at the fetch method. After 3 minutes, it timesout then renders what it suppose to. I am looking for guidance on where to look from hereon. The production server does not log that the endpoint is receiving the fetch request; however, once the 3 minutes is up, the client side renders the updated information (as if it hit the server side). Everything looks like it should be working in the code I wrote, but I am not able scope out where I should be looking in debugging this issue.
Note: I am giving a broad description of the problem at the moment, but will disclose specifics such as codes, logs, and others items once I am able to get some guidance of the matter. As of now, there are no resources pointing out this specific issue, thus displaying code will simply be a "garbage" dump.
After working on the problem for quite some time, we found these two articles to be very helpful:
https://www.andreasreiterer.at/fix-whitescreen-static-react-app/
https://blog.miguelgrinberg.com/post/how-to-deploy-a-react--flask-project
After testing different sources, we first found that article one's suggestion of changing the homepage to the base url worked. After realizing that the nginx was getting confused on which static files to server, we proceeded to follow article 2's steps.
We did not have any issues on other browsers, but only on firefox. I hope this will help those that are experiencing the same Firefox issue.
I'm doing development work using gatsby develop. Basically, this script monitors the source code files and re-builds whenever there are changes.
When the re-build succeeds, the browser automatically refreshes and shows the newly built page.
However, when the re-build fails, the browser does nothing, and if I were to manually refresh the webpage, it still loads the last working version, leading to confusion as to why my changes are not reflected.
The only way to tell that the re-build failed is by looking at the terminal output of gatsby develop, which I often hide in order to maximize screen real estate.
Is there a way to for me to just look at the browser and code, and be able to tell that a re-build has failed? The best would be to have the errors show up in the browser, much like the javascript errors, where the re-build was successful, but the code ran into issues in the browser, i.e. TypeErrors, undefined etc.
Thank you.
After #gnujoow's comments, I did a quick check and realized that build failures already show up in the browser.
For some reason, my browser does not always refresh when there are build failures. Thanks #gnujoow
I have an angular application that run ok on chrome and firefox.
But on IE the application does not work.
My Big problem is that I can't find the error reason. and got some generic error.
How can I debug the application on IE or how can I find the reason for the Error
This means that ng module is failing to load. :)
Please look at your browser's console to find if any files are missing or not being downloaded correctly. Also it helps if you click on the link to http://errors.angularjs.org in your console, it will give details about which particular module is failing to load.
Check below link for complete details for resolution:
http://blog.technovert.com/2014/10/dependency-injection-fails-angularjs/
IE Debugging : First of all you need to ensure your Angular application works on IE please consider the use ng-style tags instead of style="{{ someCss }}". The latter works in Chrome and Firefox but does not work in Internet Explorer <= 11. Arguably, this is the biggest annoyance of IE—the page just doesn’t load and doesn’t give any errors. Sometimes you need to view the page again in Firefox. If it’s not an IE specific error, Firebug will pick it up. If Firebug loads normally, the chances are it’s one of two IE specific errors: a trailing comma, or unsupported XML syntax.
For minimize the application files I use
bundles.Add(new ScriptBundle("~/app").IncludeDirectory("~/Assets/app", "*.js", true)
);
(Part of asp.net mvc)
And from the layout page I take all the application files
#Scripts.Render("~/app")
Like I said this part of code worked for me in some browsers, But on IE It fail.
By Changing the script src to all specific files, I resolve this problem. and now on IE it work like the other browsers.
Maybe I miss a comma or ";" (end row) or something like that.
Thanks
need to check this page or api
http://henriquat.re/appendix/angularjs-and-ie8/necessary-changes-for-ie8-compatibility.html
https://docs.angularjs.org/guide/ie
So, this is the second time I have seen this but cannot for the life of me explain why?!?
All of a sudden the DebugKit plugin stopped working and would not display in the browser. Looking at the console I can see the following:
debug_kit/js/toolbar.js net::ERR_CONTENT_DECODING_FAILED
So far I have tried rebooting laptop & server. Clearing cache/cookies in browser. Re-uploading the DebugKit plugin folder but still to no avail. Does anyone have any ideas what could be causing this? I have tried the good ol' "Google" approach
I had the same problem.
just make sure you don't have any extra line or space after ?> in your modals, controllers and mainly on bootstrap ( I had a extra line one of my bootstraps's plugin).
or you can delete the ?>, php will work fine.
I've ran into an issue with Safari on iOS 5.1.1 and Angular where I am doing paginated results. After I decide to leave the page that is hosting the app, and then come back to the page by using the browser's history back button.
The application is not initialized so as I scroll again, the pagination functionality is not triggered.
Since 5.1.1 doesn't provide a web inspector, I had to rely on console.log to print events that I want to see that it's executing. On initial load, I see everything ok, but when I am back through the back button nothing fires.
My usual ways of fixing this are not working. Here are the things I've tried:
Used manual bootstrapping of Angular app
Made the page not support caching and expire the page as soon as it's rendered.
Neither of these helped, which is why I am here asking for some suggestions. Unfortunately it's not a very easy thing to replicate through a Fiddle or a hosted HTML file so I am unable to provide one. Hoping that some of you may have experienced this before.
Thanks in advance for any help.
Answer is quite late and I hope you found a solution already but it might be useful for others.
Unfortunately I won't be able to answer why the app is not initialized (due to the lack of code) but I can give you some tools/tips to ease the debugging (assuming you have the iOS simulator).
Debuging on mobile safari can be done either :
with weinre and get the features of the web concole,
or by enabling remote debugging in Mobile Safari itself, see here
Yea, same problem here with iOS 7. It must send the DOM structure over before running any javascript. Kinda pointless...
Since the problem is with mobile safari and since it supports popstate event, you can use this event to detect when the user is back in combination with $location.path(), for example:
$(window).bind("popstate", function () {
alert(location.pathname + $location.path());
});