[SOLVED] My Angular web app is routing through buttons as expected, but when I type the page path in the url, routing doesn't work. While hosted on firebase

Issue

When I run the program on my localhost, I can navigate through my program using the url, but not when it is hosted on firebase.

eg)
Typing "www.localhost:4200/home" Takes me home.

Typing "www.localhost:4200/contact" Takes me to contact page.

BUT

When I host the website on firebase, I can only access it directly:" www.portfoliotest.web.app " and routing through the buttons work, but not when I type "www.portfoliotest.web.app/home" or "www.portfoliotest.web.app/contact" but i get a "Page not found" firebase error instead.

How can I set up my routing so that I can access my pages through the url?

Thank you.

Solution

Your routing isn’t your issue: it’s how you’ve set up Firebase.

In your firebase.json, you need to redirect all URLs to index.html:

"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]

That way, your Angular routing takes precedence over static file service.

Answered By – Will Alexander

Answer Checked By – Gilberto Lyons (BugsFixing Admin)