Invalid URL loads a semi-blank page

[amatosg]

Overview of the issue

When I type a wrong url (something like localhost:8080/#/my-entity/123123/view or localhost:8080/#/unexistant-entity/) in a new tab/window, it loads a partially blank page instead a 404 page with only the footer visible with title [object Object]
(image)

Motivation for or Use Case

There is no 404 page. When entering an invalid url, the app should show it instead of partially displaying a page.

Reproduce the error

1. Open a new tab/window
2. Enter an invalid url (invalid ID in a view page, for example)

Related issues

Searched, but none found

Suggest a Fix

I tried @ruddell's advice (this one) but it didn't work so far.

JHipster Version(s)

generator-jhipster@5.6.1

JHipster configuration, a .yo-rc.json file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.package",
      "nativeLanguage": "es"
    },
    "jhipsterVersion": "5.6.1",
    "applicationType": "monolith",
    "baseName": "FacturApp",
    "packageName": "com.package",
    "packageFolder": "com/package",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "mariadb",
    "prodDatabaseType": "mariadb",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": "eureka",
    "buildTool": "maven",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "MZeMgZL6QrzulOlY5wM6E4E34f7IVVEApDPhmnAedYR8GSpF7Oo5gCVf9D+VuUM8G53+TUiatvaBZ8ML5562pcMQQrx7Wa5dDpzM0F",
    "clientFramework": "angularX",
    "useSass": true,
    "clientPackageManager": "npm",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": true,
    "nativeLanguage": "es",
    "languages": [
      "es"
    ]
  }
}

Environment and Tools

java version "1.8.0_141"
Java(TM) SE Runtime Environment (build 1.8.0_141-b15)
Java HotSpot(TM) 64-Bit Server VM (build 25.141-b15, mixed mode)

git version 2.19.0.windows.1

node: v8.12.0

npm: 6.4.1

yeoman: 2.0.5

Docker version 18.06.1-ce, build e68fc7a

docker-compose version 1.22.0, build f46880fe

Congratulations, JHipster execution is complete!

Browsers and Operating System

I think it's irelevant.

• Checking this box is mandatory (this is just to show you read everything)

[jdubois]

Indeed, and that's because that's not a "real" 404 page. You have a 404 when you go to an invalid URL, like http://localhost:8080/yolo but here you have a hashbang, so this is served by the Angular/React front end, and you are going to a route that does not exist.

We should indeed correct that, and have some kind of "404 route" for Angular/React.

[fleboulch]

@ruddell
Have you already worked on this? If you are ok I can handle it.

I checked your answer on SO and I have another solution in mind with Http Interceptor as described here (https://medium.com/@antwaneb/catch-and-handle-all-404-errors-from-your-webservice-in-angular-5-2269b717d78f)
WDYT?

[ruddell]

I have not worked on this. That solution looks better than mine as it handles the 404s for entities as well

[DanielFran]

@ruddell #8909 has been merged so this should closed or it is missing something else?