I have used AngularJS in a section of my site (for 2 pages, using routes). When I navigate to one of these pages from a non-Angular page, I just get an empty container in which nothing loads. If now I try to navigate to the other Angular-based page, I have the same problem - nothing loads. I get no Angular errors in the console, no nothing.
However, if I refresh the page, the content will load and then everything will work!
I have made a screen recording of this issue: http://screencast.com/t/y72wrr8iO
How can I fix this?
I had this issue also. I found out that it was caused by a chrome extension (AngularJS Batarang), so removing/disabling the extension helped.
If it works after refreshing it means that it is something with loading order in your site. Check if you have correct order of loading, like:
vendor lbirariers -> your libraries -> (...) -> your controller
also check your dependency injection headers in js files, cause you might skipped something
Related
In a Next.js project, I am coming across a situation where I get a new URL path from an API. And I have to update that URL path in the browser without reloading that page.
I am doing that with the help of History.pushState()
window.history.pushState(nextState,nextTitle,nextURL);
window.history.replaceState(nextState,nextTitle,nextURL);
With help of History.pushState() I am able to update the URL in the browser without reloading that page. But If after I change that URL multiple times and change to some other page. Then if I start pressing the browser back button, I am not able to get that page with the last URL path showing in the browser.
Only that last URL path shows up in the browser URL input, but that page data is not reflected.
Attaching the sample code and reproducing steps video link below. Any help and suggestions are appreciated.
Source Code
Codesandbox
Reproducing Steps
I am also facing same problem, after using history.pushState() browser back button will not work in that page, because according to browser you never went to that page.
That location doesn't exists in JavaScript history object.
I have been trying to figure out Netlify redirects. My Netlify app is at this link (however this is a blockchain application and requires that you have metamask, so I will try to explain my problem so that you don't have to install it to actually answer my question): rekt.netlify.app
I have two main problems:
I have already tried the whole _redirects file with /* /index.html 200 in it. This works when I go to rekt.netlify.app/games and refresh, it will actually come back to that page. That's good. The issue is when I then go to rekt.netlify.app/games/Valorant for example, it will be a white page on refresh, and I cannot figure out why. In my react application, I have react router set up so the path is path="/games/:game"
I went to the Networks tab in the google inspect and I found that this was the request URL when I refresh the page on /games/Valorant: https://rekt.netlify.app/games/static/css/2.80dce9aa.chunk.css
As you can see, the issue is probably something to do with that /games/ comes before /static/ in the URL. I'm a beginner so I don't know what that actually means.
The second issue I am having is that, the img tags of the games load on the /games page, however, when you click on a specific game and attempt to go to a /games/Valorant for example the image will not load. I believe this is due to a similar problem. I have gone into Network tab of google inspect and when I look at the image being loaded in the /games page, it attempts to GET https://rekt.netlify.app/static/media/league_wallpaper.f5e6bf5f.jpg which works. However, when being loaded in the /games/Valorant page, it attempts to GET https://rekt.netlify.app/games/static/media/league_wallpaper.f5e6bf5f.jpg and this does not work, it's a blank page.
You can notice that the second link there has /games/ in it which I believe is preventing it from getting the image. Potentially the problem here is that anything more than one / in the URL is messing things up? I'm not sure. This is the link to my github project: https://github.com/jacob-tucker/ReKt
Edit: Here are some screenshots that will hopefully help. This first one shows that the request URL is trying to get the image from /games/static (which I don't think makes sense). This is happening on the /games/Valorant page.
And then here is a screenshot of /games/Valorant trying to load as well after I refresh the page and get a blank white screen (it returns a status code of 200 because I have /* /index.html 200 in my _redirects file.
I had a the same issue a while ago, I've just added
"homepage": "https://my-app.netlify.app",
in package.json and it worked perfectly.
I want to route my parent application with sub-application in the project folder
So I notice the URL Changes but didn't display the page I navigate to
Case of study of the issue m facing
Localhost4020/Super
If I want to navigate to Login
The URL change to Localhost4020/Super/Login
But the login page won't show
Check first your Login page code. Probably you have some errors causing the page don't showed. Although your code is compiled you may have errors only showed in the console of your browser: try F12 to show it...
Have you added <router-outlet></router-outlet> in your component file? If yes then pls share your code.
I have an angularjs application hosted in my local IIS with route configured. For example '/services' will use servicesController and services.partial.html view.
It worked well if I clicked the link on the main page and the browser address changed to http://localhost/services. But if I refresh or type this URL directly I got 404 error.
Can anyone help me what I did wrong.
when you refresh or type you page, the entire page while be reloaded out of angular's control, in fact its the browser that is taking control. thus you localhost have to return a valid resource for /services. without html being returned, there is no way angular can control the behavior of the route.
basically what you should do is config you server and return the same page for /services as /
Use http://localhost/#/services instead of http://localhost/services and this would work fine as I see.
I have silverlight navigation pages (with NavigationCacheMode="Required").
When i normally navigate to these pages (via mouse clicks) the pages get loaded as expected (they are only created once due to the cache attribute).
However, I have a need to update the url in the browser address bar.
When I update this via javascript ("window.location.hash=#...") the address and page gets displayed, BUT the page gets re-created - which is causing other issues.
In particular the issue that this is causing is that the page has a Prism.regions defined in the xaml. So it throws an error complaining about a region that has already been registered.
Has anyone tried something similar to this?
I dont think there is a way to update the url in the address bar without the browser navigating to it. Note that the url that im trying to update to includes query string paramters, which is not directly "known" by the silverlight navigation framework.
The last resort that i havent tried is to register all the unique Urls with the navigation framework.
I found an hack. simply cancel the frame_navigating event when ever the url is being updated manually. works great.