I am having issues with routing in my Angular app when a url is visited directly via the address bar, or linked to directly from elsewhere - all addresses revert to the home page.
However, routes work fine when visited via a link in the app.
There are already a few similar questions on this
Angular routing doesn't work when URL is directly visited in browser but works when clicked to?
As I understand it, the Angular code does not run when visited directly as the page renders before the app code runs, therefore server side rewrites need to happen pointing the browser at index.html at which point the app runs and the routes get picked up.
I am using Firebase hosting, which has rewrite rules.
However I have followed the fixes listed above, and elsewhere on the site, and I am still having issues.
My routes look like this:
app.js
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/posts.html',
controller: 'PostsCtrl'
})
.when('/posts/:postId', {
templateUrl: 'views/postview.html',
controller: 'PostViewCtrl'
})
.when('/new', {
templateUrl: 'views/new-post.html',
controller: 'AddPostCtrl'
})
.when('/register', {
templateUrl: 'views/register.html',
controller: 'AuthCtrl',
resolve: {
user: function(Auth) {
return Auth.resolveUser();
}
}
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'AuthCtrl',
resolve: {
user: function(Auth) {
return Auth.resolveUser();
}
}
})
.when('/edit-profile', {
templateUrl: 'views/edit-profile.html',
controller: 'EditProfileCtrl',
resolve: {
user: function(Auth) {
return Auth.resolveUser();
}
}
})
.when('/change-password', {
templateUrl: 'views/change-password.html',
controller: 'ChangePasswordCtrl',
resolve: {
user: function(Auth) {
return Auth.resolveUser();
}
}
})
.when('/@:userId', {
templateUrl: 'views/profile.html',
controller: 'ProfileCtrl',
resolve: {
user: function(Auth) {
return Auth.resolveUser();
}
}
})
.when('/users/:userId', {
templateUrl: 'views/profile.html',
controller: 'ProfileCtrl',
resolve: {
user: function(Auth) {
return Auth.resolveUser();
}
}
})
.when('/search', {
templateUrl: 'views/search.html',
controller: 'SearchCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
})
My firebase rewrite rules are as follows
firebase.json
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
I also have <base href="/"> in my <head> as outlined in the Angular docs for the HTML5 Mode
I have contacted Firebase and they have confirmed that the rewrites are working correctly on the app.
NOTE: I should also say that I am also having this issue when running the app locally without the HTML5 Mode (so with /#/ in the URL).
What am I doing wrong? I'm assuming it must be something to do with my routing. I have already tried changing my 'otherwise' to go to another route to see if that is where this error is being picked up, but it still reverts back to the home page.
Any help here would be hugely appreciated, many thanks.
