I am working on a NodeJs/Angular application that is based on the article example provided through the MEAN.js stack. I have been spending many hours developing things, and everything worked fine - until just now.
When I start my application using 'npm start' my app is found and everything seems to work as expected, but nothing is shown in my browser, even though it seems like all scripts can be found and the browser receives HTML.
When I inspect the source code in the browser window it shows a complete HTML file with all required CSS and JS files. The files can be found; clicking on a link shows the source.
I did an 'npm update' recently, and I suspect that the problems started there. Maybe there is an updated external module that doesn't interact with some other module, but I have no idea how I can find out which one.
Any ideas? Thanks in advance.
you are missing JQuery in <script>
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 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).
JHipster throws the following error message at me when tried to open the application in internet explorer. But works fine in the Chrome browser.
My jhipster has spring boot with react and is connected to IBM db2 database.
Tried opening the application after running the command 'mvnw'
and also tried with 'npm start'.
Both the commands give the same result.
An error has occurred :-(
Usual error causes
1.You started the application from an IDE and you didn't run npm start or npm run webpack:build.
2.You had a network error while running npm install. If you are behind a corporate proxy, it is likely that this error was caused by your proxy. Have a look at the JHipster error logs, you will probably have the cause of the error.
3.You installed a Node.js version that doesn't work with JHipster: please use an LTS (long-term support) version, as it's the only version we support.
Building the client side code again
If you want to go fast, run ./mvnw to build and run everything.
If you want to have more control, so you can debug your issue more easily, you should follow the following steps:
1.Install npm dependencies with the command npm install
2.Build the client with the command npm run webpack:build or npm start
3.Start the server with ./mvnw or using your IDE
Getting more help
If you have a question on how to use JHipster
Go to Stack Overflow with the "jhipster" tag.
If you have a bug or a feature request
First read our contributing guidelines.
Then, fill a ticket on our bug tracker, we'll be happy to resolve your issue!
If you want to chat with contributors and other users
Join our chat room on Gitter.im. Please note that this is a public chat room, and that we expect you to respect other people and write in a correct English language!
Check out this issue - https://github.com/jhipster/generator-jhipster/issues/8250
Looks like IE is not supported at all
Finally, after some research and help from others, I figured out we need to add the polyfills to the jhipster project, Usually in the head tag of index.html file.
I tried downloading the polyfills.js and loading into my application via a script tag, but nothing seems to work, What I did instead was used the cdn from cloudflare and inserted in index.html, Which started to work like a charm.
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.js"></script>
Note: An important thing which I learned over my experience is, It makes necessary to include these polyfills to the react project if it has to work in Internet Explorer.
Suggestion from https://github.com/jhipster/generator-jhipster/issues/11566
A quick dirty workaround, set all compile option to es5 :
tsjconfig.json "target": "es5" "lib": ["es5", "dom"],
webpack.common.js mainFields: [ 'es5', 'browser', 'module', 'main'],
Fixed!
Google is doing a great job in discovering new websites and content, but sometimes we need to force Google to crawl(reindex) our website, either all of it or individual pages.
So the reason we see "An error has occurred" - it's because at the first time Google saw our site (index.html file) it indexed without additional tags.
Step 1:
Add additional meta tag in head part your index.html page:
<meta name="Description" content="your-description-here">
Step 2:
Use Google Search Console for reindex your site.
https://search.google.com/search-console/welcome
P.S. Ask question to google: "How do I get Google to recrawl my website?". It will help you to better understand Google Search Console and why you need to use it for fixing your error.
After a little research, I found we have to run the UI app also in another window using npm start, which solved the problem for me.
I had the similar challenge recently and the application was not working on Google Chrome only. It was solved by adding the lines highlighted in blue below to the application yaml in spring-boot:
Also not that the content-security-policy needs to be understood properly before altering these changes because of injection.
Reference materials: https://www.baeldung.com/spring-security-csp and https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src
I am trying to develop a simple web page that allows a user to play a retro game (like Mario) using his browser. For this I have decided to use the js emulators that have been compiled from retroarch using emscripten. I have been told that some of the js emulators available on libretro website currently (https://buildbot.libretro.com/stable/1.7.0/emscripten/) do not work properly (example: n64 js emulator). So, I am trying to use the older version available on play-roms.com but I have not been able to make it work even after a lot of work.
The problem
I am trying to just replicate this game page to work locally on my machine: https://play-roms.com/nintendo-64/super-mario-64 Since, it is mostly dependent on HTML, CSS and JS, I simply copied all the HTML,CSS, JS files and also the emulator and .mem files. When I tried to make them work locally, they simply do not work. I get a constant warning in console in infinite loop:
"RetroArch [libretro INFO] :: mupen64plus: Memory initialized"
This warning does not allow the game to load. Please note that I do not get any other warning or errors on the console which are not already happening on the original mario page of play-roms from which I copied the files.
I assume that the problem is happening because of some issue with .mem file. Next, I tried to fetch the mem file from play-roms server itself (just for testing purpose) but that also did not help. (Please note that I am aware of CORS and know how to handle it). I still get the same error even when mem file is fetched from play-roms
I talked to someone who has worked in this area before and he confirmed that he too faced the exact same issue of "Memory initialized" in infinite loop when he tried it. He too could not solve it.
Please note that copying some other website is not my goal. I am just trying to make the retroarch js emulators work for my website.
I'm starting to learn Angular 2 and I am quite lost in some subjects... like the server.
Following the instructions for a Quick Setup I installed Node and npm... when I run the project in Node everything goes perfect. The label <label> gets recognized and it gets the template for that label (in this case an html form).
But when I run the same project in MAMP, that label doesn't get recognized and comes out a 'Failed to load resource' error in the console for the template associated to that label.
So I guess Angular 2 is dependent on Node and that's a problem because I want to upload later the project and I think my hosting plan doesn't allow me to run Node...
I don't know if I'm prejudging, maybe anybody can help me clear this... Thanks.
Angular2 has niether any Relation nor any Dependency on node.js.
You can write Angular2 app just using Angular2 packages without using node or mamp or xampp and host that app.
If you have written any thing in Angular2 and node.js combination then you can host it on free services like Heroku for testing purpose.
Final solution:
Ok, wrong again. I'm the worst detective ever.
it works with TypeScript as with JavaScript, just need the "npm start" to compile TypeScript into JavaScript. Then it automatically runs on a "localhost", but once compiled, you can run the index.html like any html, without the need of a server, like you were all saying, it's not like .php which makes all sense.
so the problem that led me to all of this misunderstandings was that the Node "localhost" worked and the Apache "localhost" didn't, and the mistake was that I was calling into #Component: templateUrl: "../template/file.html", and the path is written in "/app/whatever.js", but it's working from "index.html", so it would be just templateUrl: "template/file.html" and everything works as expected.
what I don't know is why it works, with the wrong path, when I run it from Node! an error would have saved me a lot of time... and yours...
Well, at least I have clarified a lot of concepts in this investigation. Thank you all!
Thanks, Zeeshan, in the links you gave me the clue. As I told on my original message, I started following the Quick Start, but I forgot to mention I chose TypeScript over JavaScript... and that was the "mistake", because TypeScript needs Node to compile to JavaScript, as I'm guessing for the results I get:
the TypeScript project only runs after executing it in Node via console ("npm start") and not in Apache, that doesn't get all the Angular part (it gets the tag <whatever></whatever> but doesn't translate it into the content <whatever><h1>Hey</h1></whatever>)
with JavaScript it works "as always", without need of a server, as you were telling me
So I'll have to choose between using TypeScript (and all the official documentation!) and host it in some platform like Heroku or work with JavaScript without needing an specific server so I can still work with Apache.