The question is based on version differences where while re-rendering after Changes in My project the web page is becoming irresponsive and again i need to reload the page.May i know why this is caused and how to resolve this?
Technology:- React Js
Node Version-14.16.1
Npm Version-6.14.12
Changes in Code and getting unresponsive Screen and again i need to reload
Related
I added angular universal to my project and upon saving, it compiles successfully though in the network tab I can see the request for whatever route im on gets hung on pending and the website stays loading forever in the browser. This issue is not present during CRS. Things I have tried that did not work:
I have cloned the same project elsewhere to see if it was some fat finger accident
I have not only add logic to stop DOM methods from being used, I have outright removed the use of them everywhere in the app
I added 3rd party libraries like Domino js to mock methods on Node
I started a completely blank angular project, added nothing to it other than angular universal and I get the same issue!
I will try it on another computer soon to see if it is just an issue on this machine.
What could the issue be? I don't get any errors and refreshing the page it works.
Is hot reload broken for me? missing anything?
EDIT: I have now tried it on a 2 other Windows machines and the result is the same. Perhaps this is a bug. Essentially makes Angular useless to me.
Angular Version 12.1
I was able to get it to work by upgrading my Angular to version 14, and starting a fresh project with SSR added. Frustratingly to say the least but I can finish my project and I copied back in most of my code from the project I was working on.
For what ever reason Angular 11 and 12 were giving me this issue on multiple machines on fresh angular projects. It never gave me any errors to show. I will report back if any time during the rest of the porting of code if the issue persists.
I had the same hassle when initially integrated the Angular Universal to my project.
After a period of time I consider the according workaround:
SSR for the single page applications is useful in production for SEO, Open Graph, etc.
Angular Universal adds additional files:
main.server.ts
app.server.module.ts
Then the classic angular approaches are still possible to be used (the old app.module.ts).
Now for the local development environment I'm continue using the classic "ng serve" command and the Angular continue reloads normally on each file change.
And the SSR is compileing only for the production build.
Then if I want to debug something related to the SSR I'm deploying the production build to the test environment and calling the test urls to see the results.
I have a similar issue in an iOS react-native app after iOS 15 upgrade but with not a crash.
Here the UI was totally broken, and the only way to fix it was to force restart the app.
If someone opens the app after 1 hour from the last time he/she opened it, the app skips the SplashScreen and after that nothing renders correctly. The positioning and order of components are wrong.
This happens only the first time after 1hour of app being closed.
I have cloned a git repo regarding the swagger framework for API documentations. It is an already built project, ready to run.
However, I would like to effect some styling changes, hide certain elements and tweak with the default links and examples it provides. Indeed the changes have been easy, but by saving them and re-running the project as a web app they were not visible. It is my understanding that one has to rebuild a project in order for changes to come live. It is a React app, running on node.js, so I proceeded by following the script commands within package.json and rebuilt the project.
Still, although the changes have been saved within the dev files, they are not visible within the web app. Inspecting the DOM elements of interest confirms that no changes are in effect. My question is whether I can rebuild this project so that the changes will eventually become available, or if there is another way to achieve this.
I am new to Node and working on an application using NodeJS, Express, MySql and Sequelize. Its an application that performs CRUD operations.
For learning Purpose, I am working in a github project.
I came across .hbs file in Views folder.
I tried to edit the Heading name in this file, but still my changes are not reflecting in Browser View.
Is there anything I am missing? Even after restarting server, my changes are not visible.
Reason :
Handlebars (hbs) is a server side view template. It needs to be compiled on the server when any changes are made to it. It is not a .html for which you don't need to restart the node server to see the changes.
Solution :
Restart the node app to reflect any changes or better use nodemon.
Cheers.
P.S : Mark the answer as accepted if it solves your problem.
I have the latest nodejs server installed with the yalr module on the backend.
On the frontend I use the WebStorm IDE which auto-saves changes. This forces a refresh in my browser. After the refresh the changes are not shown! I still see the old version!
How could I configure yalr to refresh with the newly changed source files?
I've tried setting the debounce parameter, however it seem to do nothing no matter what I set it. The sleepAfter parameter didn't help either.
I should note that sometimes the page refreshes twice which, while annoying, DOES actually load the changes. But I can't depend on that.
How did you set up live-reload for the frontend?