jHipster shows "An error has occurred :-(" While opening the application in the Internet explorer but works fine in chrome browser - jhipster

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

Related

Cannot GET / error

looked for couple of hours, on how to solve that, but no luck.
I am using VS 2017 preview edition, and trying to open ASP.NET core 2.0 web application, that uses Angular template
when i open the site (f5 or ctrl-f5), the web-browser getting opened with the message
Cannot GET /
I don't know what causing that and how to fix that, tried to clean/rebuild/restart VS/change project port number/restart the computer, what else can I do to solve that?
Depending on what error you have in the client application, the server might not start at all. Local errors like undeclared locals are seldom a problem.
Usually, the web server does not start when a dependency of the module marked as bootstrap is missing, like, for example `entryComponents'.
Another thing that can cause the boostrap to fail, is a missing file: in this case you should have a look at templateUrl and styleUrls.
Manually compiling via ng build (or better ng build --prod) will point you to the offending code.

Reactjs with Azure

I have a problem, i have created webApp, using Nodejs 8.1, its operational. I uploaded my code using a zip file. I ran npm install and start (to test) in the kudu,cmd debug console, they both succeed. It's not a reactjs .Net application (not my choice ..). I still can't see my website, I have tested different web.config files,obviously not using then locally. Should I use a VM... I need ideas. I can go thru the directories if directoryBrowse enabled = True. So there is some kind of response ...
Oh boy I was sooo far off, I needed to build and upload the build.. I found the answer here. Here is the answer

docdokuplm post-installation instructions

docdokuplm
Hi !
Just checking out your PLM, looks great! I followed your instructions:
https://github.com/docdoku/docdoku-plm/wiki/Installation-Guide
I used the nightly build.
After uploading the ear file and then using http://localhost:8080 I see the Payara server page. Was there something else I need todo or where do I start to troubleshoot? Thoughts?
Thank you!
The page displayed at 8080 is the default landing page. If you have deployed the DocDokuPLM application and configured the settings detailed within the instructions, you can open the application through Payara Server. Go to Applications -> DocDokuPLM -> Launch, and you'll get a series of links which should help you troubleshoot.
If you can't see any, run through the installation procedure again to ensure that you haven't missed a step - it seems like there's a few steps which must be configured exactly correctly for the application to work.
According to this GitHub issue, this seems like a bug with DocDokuPLM. As with most software, nightly builds are inherently risky. Looking at the source, though, it seems that the code changes fairly rarely, so you might try with the previous version of Payara Server (173), though the stack traces in the GitHub issue don't look to me like an issue with Payara.
The backend server and the UI are two separated components.
If you want to install the User Interface you have to go there :
https://github.com/docdoku/docdoku-web-front
The project which you have deployed is just for backend,inorder to interact with UI just clone the web-client from this repo https://github.com/docdoku/docdoku-web-front and in command prompt use this command npm run dev then you can use this project, make sure the port number which is mentioned in app/webapp.properties.json of web-client project is same as you have given in server-config.
Read https://github.com/docdoku/docdoku-web-front/wiki/Development-Guide for more details

Angular 2: NodeJS vs XAMPP

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.

NodeJs started, working but nothing is displayed

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>

Resources