Ionic 7 Angular 15 - this.router.navigate(['home/mypage']) works fine on ionic-serve but not in production

Question

I have an app where one of the pages redirects the user to a different page after a certain task. The code below works fine when using the development mode and ionic serve. It redirects the user to mypage.

this.router.navigate(['home/mypage']);

However, when I do a prod build for a web app and host it on a server, everything else works fine except this.router.navigate. It gives a 404 error (e.g http://localhost/home/mypage not found). I have tried it with a slash in front of home too but not success.

I have tried it for different pages and actions but the result is still the same. I have researched quite a bit today but couldn't find a solution. Any tips would be great.

I am using Ionic 7 and Angular 15.

Answer 1

I was using window.location.reload(); to refresh my list. Since this is a single page application, it will show white screen. Instead, I started redirecting the page to a different view so that I don't have to refresh the window. However, it is disappointing to see that window.location.reload(); worked find in the ionic serve mode but not production.

Answer 2

you can use navigateByUrl without [] as follow :

this.router.navigateByUrl(/home/${path});