I am currently working on my very first angularjs application using version 1.6x, and I am encountering some 404 errors with my router.
Here is how my router is set up:
app.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/account', {
templateUrl: 'views/account/welcome.html',
}) //works
.when('/account/emails', {
templateUrl: 'views/account/email.html',
controller: 'emailController'
}) //404 error
.when('/account/wallet', {
templateUrl: 'views/account/wallet.html',
}) //404 error
.when('/account/settings', {
templateUrl: 'views/account/settings.html',
}) //404 error
.when('/account/logout', {
templateUrl: 'views/account/logout.html',
}) //404 error
.otherwise({
redirectTo: '/'
}) //works
});
Along with that, here is the configuration of my htaccess file:
Options +FollowSymLinks
<ifModule mod_rewrite.c>
RewriteEngine On
Options FollowSymLinks
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
</ifModule>
Everything seems to be functioning smoothly within the app itself, but if I try to refresh the page or access a direct path like //localhost/account/emails from the browser, it leads to a 404 error. However, paths like //localhost/ and //localhost/account work fine as they exist in the app's file system with their respective index.html files. Can anyone help me figure out what might be causing this issue?