Hot Reload for Angular - node.js

With Angular, Typescript, and Node, I'm always waiting for a long compile before being able to test any changes. Is there any concept of a better way to test small changes without the long compile I'm always waiting on? With Flutter & Dart, you are suppose to be able to do a hot reload and see changes right away. Does Angular offer anything in this category?
Thanks in advance for your response.

It depend's on your pc... but, if you are using Angular 11, you can run with Hot Module Replacement: ng serve --hmr

Adding the watch flag '-w' reduced my update times from 90 seconds to 5 seconds.

Related

Angular SSR Hot reload not working, no error, hung

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.

Angular 9 - is it possible to prerender routes without complete build?

I'm using Angular 9's built in npm run prerender --routesFile=routes.txt
Every time, I run this, it first runs complete Angular build for both server and browser.
Is there a better way to simply run the prerendering steps and avoid repeated builds which takes a lot of time?
I understand that Angular internally uses webpack, but I can't find any documentations on this.
Thanks!

Do I have to stop the react native server everytime I want to install a new node module

React noobie here.
I have a question, I am working on a react native project, and I search for extensions I can add for my applications, whenever I want to install a new module, I have to stop the server and let the installation finish, then run the server again. This process takes too much time, is there a way I can circumvent that?
Yes it is good because the restart assures that all new files are added at the start of the app. I think it is a good thing even though it can be annoying but installing dependecies when the app is running would only make it harder to code imo.

Why do I get "Waiting for wzrd.in..." for a minute?

I am running a firebase project locally with
firebase serve
However it takes a long time for the initial HTML page to load. I just see this message for about a minute:
Waiting for wzrd.in...
I have no idea what is going on. I have been away from this project for half a year, but I do not remember seeing something like it before.
Could it be related to this?
Warning: You're using Node.js v10.15.1 but Google Cloud Functions only supports v6.11.5.
EDIT: The corresponding page in the deployed project loads fast.
I think I have found the problem. This line in the html file:
<script src="http://wzrd.in/standalone/uuid%2Fv4#latest"></script>
Seems to be related to Browserify which I do not use, but tried to test (half a year ago).

'preact build' does not finish

I am new to preact and react. Whenever I build my preact pwa using 'preact build', as per the output the build never reaches 100%. It only goes upto 91% but looking at the built code it seems the build is 100% completed (I have deployed the build and it is working). Can someone please put a light on this?
As long as everything works as expected you can just ignore that. Seems like it's a small bug in the UI and nothing more. It may or may not be changed in the future 😉

Resources