Angular 7: no compile errors, but blank screen - javascript

I've been working on an Angular app for a couple months now, and recently I started seeing a condition where the app compiles without errors, but when it reloads in Chrome there's just a blank screen. Also, no errors in the console. When I look at the markup, I can see the tag for my root component, but nothing else renders. I'm fairly certain I should NOT see the tag for the root component, but rather the rendered HTML, right? So it loads index.html, then craps out without any indication of what the issue could be. I have been attempting to move my components out of app.module and into feature modules to clean things up, but when I reverse those changes I still can't get the app to load. I've tried stopping and restarting the live dev server, but still no joy.
I'd post code here, but there's a ton of code in this app, and I don't know where the problem is. Why would Angular refuse to render without any compile or console errors, or any indication of what I can do to fix this?? If anyone has any idea where I can start to look, I'll be happy to post code.
FYI, I'm using Angular CLI 7.2.3, Angular 7.2.2. I'm developing in Visual Studio Code with the latest updates on a Windows 10 machine. I should also say that this has happened a few times during development, but I was always able to figure out what was causing the problem.

As requested, here is my answer. It's a bit embarrassing, given that I've been doing web development for over 20 years, but I forgot that I had disabled some options in the Chrome debugger settings. So Angular WAS sending errors when I got the blank screens, I just couldn't see those errors because I had disabled them. Once I reset the options to the default for Chrome, I was able to see all of the errors causing the page not to render. I realized this when I loaded the app in IE Edge and was able to see the errors in the console. I figured if IE is showing me the errors, I must have disabled them in Chrome.

Related

Required props undefined in chrome 83

So after installing chrome 83 one of my pages in my app crashes. It says some of my props that's required is undefined. This only happens in chrome. I've tested in IE 11, Edge, Firefox and it works fine in those. It doesn't happen all the time either in chrome. Especially if i restart my localhost it might work a couple of times and then it starts breaking. I've also checked sha1d on master branch couple of weeks back and it also breaks there. This was never an issue before and started just recently. There has been no code changes for weeks related to that page. Any ideas what can cause this in chrome?
Based on what you are saying if problem only started happening recently in chrome, and this could be the failure of the prop-types library, its the library responsible for showing such a warning a required prop is undefined.
To make sure that it is indeed the problem of the prop-types library, you can switch environment to production, as this library should not work in prod. If indeed its the problem of this library you could try the following
Maybe try removing react dev tools and see if problem still happens
clean install of the library
update the library

Blank screen when running reactjs webapp in browser

I'm using Reactjs to create a browser based web application which interacts with MongoDB. Everything was working fine until I added webpack. Now, everything still seems to be working fine except when I try to run the application I get a blank screen.
I've went through my code and can't see what I've done wrong and after doing some online research I believe the issue could be caused by any number of things.
Are there any logs which could be used to help investigate this? Failing that, is there a recommended way to investigate this?
As #konekoya stated, the Browser developer tools can be used to identify issues. In my case it showed the error that was preventing my browser from loading properly, I was then able to troubleshoot and solve my issue off the back of it.

XAMPP won't update web source files until they're committed to Git on Chrome

I'm trying to create a web application for university. I've been doing fine with XAMPP, using Visual Studio Code and Sublime Text as my editors and so far so good. However, a couple of days ago, I ran into what seemed to be a bug.
While accessing "localhost" on Chrome, the website didn't seem to reflect the last changes to the HTML and CSS code. I also modified some Javascript and it didn't work either, the website stayed the same.
Not even simple things like changing a colour on CSS or adding an alert window on Javascript would appear on the actual web.
Inspecting the website in Chrome shows the old documents and source code, however, when going to the "htdocs" folder at XAMPP, the documents were successfully changed, and no matter what I did, relaunching XAMPP or Chrome didn't fix it either.
I decided to give up for the day and committed the changes to my GitHub repository. To my surprise, I refreshed the website afterwards and it worked.
I thought it was an isolated bug, but it seems like it is not, it happened today again while working on a completely different project.
What's more surprising, this behaviour doesn't seem to happen on Firefox or even Safari, I've tried both and it seems to be fine. However, I prefer the tools included in Chrome, so I'd rather use this one.
Has anyone else had the same issue? If so, how did you fix it? Or in case it is intended to work like that, why is it? I don't see any possible scenario where this could be useful.
Thank you in advance.
This is more of a workaround than a solution really, but you could just try ctrl+F5, this will clear your cache and you're good to go again.
This is probably the single worst Chrome bug when you're doing incremental small changes but Chrome loads it from the cache and not the original files.
What does Ctrl+F5 do?
This ignores the page saved in the cache and does a fresh GET. This should serve well enough as any changes made will be reflected in Chrome on doing so. Or you can manually clear the cache from the Chrome settings.

iOS crash in WebCore::StorageMap::key(unsigned int)

I'm getting EXC_BAD_ACCESS crashes in a WebThread, while my app is trying to process some javascript on a page startup. The javascript is long and involved and is probably what's bringing this down. The only hint is that the call stack says it's happening in WebCore::StorageMap::key(unsigned int). Can't debug it in the web debugger because it crashes on page startup so I never get to a point where the page can be selected in the developer menu. Has anyone seen an error like this, or have a good way to track this down?
We finally figured out what was wrong. There were two pages - both used a third party Javascript library. When you ran either of them, it was fine. It was only after you ran one after the other where the second one crashed. The reason was although they were running the same library, they were running different versions of the same library, which stayed resident in cache. When the second page tried to run the library of the first page (because it was still in cache) it crashed.

Viewing the updated HTML in ie6

I am working with ie6 (unfortunately) and i am having a javascript error. Its wondrous error message gives me a line in the html source, but unfortunately the javascript that does run changes the code for the page(dramatically). So the error that its pointing me to is a closing div tag, not actual code.
Is there a way to view the updated code for the page so I can at least know where my code is breaking?
I should also point out what im developing in.
I am developing a sharepoint 2007 solution for an winxp and ie6 user base. I am working via remote desktop on a sandbox winserver 2008 r2 and can access the site from my terminal. Now, unfortunately in my sandbox server i have ie 8 in which my code works. So im stuck on ideas. If anyone knows how to view the updated source on the page, i would be very grateful.
Thanks.
Edit. I should also mention i dont have admin access on my terminal. So i cant install visual studio. It would take a couple weeks for an issue ticket for temp admin access to install it, and this is sort of important.
If you can't install anything and the error console information isn't meaningful, then about all you can do is start modifying your code until you can find which section is causing the error. The kinds of modifications you can do are as follows:
Comment out a chunk of code in a way that won't cause more errors. If the error goes away, then you know it's in that block of code or something that code calls. Put that block back in and then comment out a piece of it and so on until you narrow down where the problem is.
Start inserting alert("1"), alert("2") prompts into your code with the goal of identifying which alert the error comes before and after until you've eventually tracked down where it is. When you rule out an area, remove the alerts to make it feasible to still run the app.
On a more modern computer (e.g. Vista/Win7) go to Microsoft's site and download both Microsoft Virtual PC and the Windows image for XP with IE6. You can then actually install things into the VM and do real IE6 debugging or at least see what the actual error is.
Find a computer with XP/IE6 on it that you can install real debugging tools on.
Build your own dummy little debug window using a textarea and a couple functions that append text to it. Put that into your browser page and start sprinkling mydebug("Entering function foo") statements throughout your code so you can narrow down which statements occur before and after the error and eventually find the error. This is how I've done some IE6 debugging when it was't worth the trouble of setting up a full-blown debug environment for IE6. This works much better than alerts for some types of problems because it doesn't interrupt the flow of the app or require lots of user intervention and you can scroll back through the history.
If you are using visual studio you can use it to debug js errors in ie.
Go to the Advanced Internet settings in ie and make sure that the two
Disable script debugging settings are turned off (so that script debugging is enabled)
and that the setting
display a notification on every script error is enabled.
If you don't have visual studio installed you can download and install microsofts script debugger (it's free just google it) and use that, tho it is not as easy to work with and won't give you as much useful information

Categories