When accessing URLs directly in my Angular app either through the address bar or from external links, all routes default back to the home page. However, when navigating within the app, routes work as expected.
I have come across similar issues on Stack Overflow:
AngularJS HTML5Mode
Angular routing doesn't work when URL is directly visited in browser but works when clicked to?
It seems that the Angular code does not run when URLs are accessed directly because the page renders before the app code executes. This requires server-side rewrites to direct the browser to index.html where the app can then handle the routes.
Using Firebase hosting with rewrite rules, I've followed suggested fixes without success. My app's routes configuration looks like this:
app.js
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/posts.html',
controller: 'PostsCtrl'
})
// Other route configurations...
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
})
In my firebase.json file, the rewrite rule is set as follows:
firebase.json
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
Additionally, I have <base href="/"> in my <head>, following Angular's HTML5 Mode guidelines. Firebase has verified that the rewrites are functioning correctly.
NOTE: The issue also persists when running the app locally without HTML5 Mode (using /#/) in the URL.
Could the problem be related to my routing setup? I've tried altering the 'otherwise' function to test if errors originate there, but it still redirects to the home page.
Any insights or assistance would be greatly appreciated. Thank you.