Having recently created a new Angular SPA project using the .Net core 2.0 SPA templates, I find myself facing some challenges as a newcomer to Angular/Typescript and HMR.
While most functionalities were working smoothly at first, I noticed a peculiar issue where refreshing any page with F5 or manually typing a URL led to a blank page displaying only the word "Value". To navigate to different pages, I had to rely on links in my navigation bar. For instance, accessing MCV views for managing users, products, and roles required me to type in the URLs manually, such as 'localhost:53212/roles', which resulted in the same value page being displayed. Even upon hitting refresh (F5) on any SPA view, I encountered the white page with the value content. Upon inspection in the Chrome debugger, I observed that the value was enclosed within a 'pre' tag, traced back to the Vendor.js file containing the following code snippet:
// Regular expression for URI component breakdown
...
The verbose explanation and breakdown of components in the regular expression remain somewhat esoteric to my understanding, leaving me perplexed about its relevance. Furthermore, I suspect that HMR might be playing a role in this confusion, given my unfamiliarity with it. The dilemma persists around why a simple act like refreshing the page or manual routing could trigger such issues.
I would greatly appreciate any assistance in deciphering these complexities. Should more details be necessary, I am prepared to provide them; I simply didn't want to inundate you with excessive information if I'm not on the right path.