Show an error page for invalid segments


I don’t like that I can go to http://localhost:8100/#/asdfasd and get the normal start page. I want that to be an error page.

I tried to implement this by creating a NoSuchPageComponent and setting rootPage to that in the AppComponent. (I also made NoSuchPageComponent#ionViewDidEnter navigate to the home page when no segment is present.)

This works when the browser navigates to http://localhost:8100/#/asdfasd, but if I first open any real page and then change the address bar to http://localhost:8100/#/asdfasd, I get the Ionic error handler showing “Uncaught (in promise): invalid views to insert”

  1. Is there another way this is expected to be done?
  2. Is there somewhere I can catch that error?
  3. Does this have anything to do with lazy loading?

How can I make this work as I intend?

Here’s the full error message, modified to prevent link recognition because I’m not allowed to post more than 10 links:

Runtime Error
Uncaught (in promise): invalid views to insert
Error: Uncaught (in promise): invalid views to insert
at c (htasdftp://localhost:8100/build/polyfills.js:3:18260)
at Object.reject (htasdftp://localhost:8100/build/polyfills.js:3:17682)
at NavControllerBase._fireError (htasdftp://localhost:8100/build/vendor.js:46029:16)
at NavControllerBase._failed (htasdftp://localhost:8100/build/vendor.js:46017:14)
at htasdftp://localhost:8100/build/vendor.js:46072:59
at t.invoke (htasdftp://localhost:8100/build/polyfills.js:3:13979)
at Object.onInvoke (htasdftp://localhost:8100/build/vendor.js:4248:33)
at t.invoke (htasdftp://localhost:8100/build/polyfills.js:3:13919)
at (htasdftp://localhost:8100/build/polyfills.js:3:9146)
at htasdftp://localhost:8100/build/polyfills.js:3:18750
Ionic Framework: 3.7.0
Ionic App Scripts: 3.0.1
Angular Core: 4.4.3
Angular Compiler CLI: 4.4.3
Node: 6.12.0
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36