AngularJS devices not working on direct connection - using html5 mode and overwrite Firebase
I am having routing issues in my Angular app where a URL is visited directly via an address bar or linked directly to a friend - all addresses are returned to the home page.
However, the routes work fine when visited via the link in the app
In that
there are already several similar questions.As I understand it, Angular code does not start when visited directly, as the page is rendered before the application code runs, so a server side reload needs to be overridden pointing the browser to index.html, after which the application is launched and the routes are collected.
I am using Firebase hosting which rewrites the rules.
However, I have followed the fixes listed above and elsewhere on the site and 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 mine <head>
as described in Angular docs for HTML5 mode
I contacted Firebase and they have confirmed that the rewriters are working correctly in the application.
NOTE. ... I must also say that I am also having this problem when running the application locally without HTML5 mode (so with / # / in the url).
What am I doing wrong? I am guessing it must be related to my routing. I've already tried changing my "otherwise" to go to a different route to see if this error occurs, but it still returns to the home page.
Any help here would be hugely appreciated, thanks a lot.
source to share