angularjs routing / html5mode and htaccess giving 404 error

Question

I am building my first angularjs app in 1.6x and my router is resulting in a 404 errors

my router looks like this:

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
});

and my htaccess looks like this:

Options +FollowSymLinks

<ifModule mod_rewrite.c>

    RewriteEngine On 
    Options FollowSymLinks
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ /#/$1 [L]

</ifModule>

So my router works correctly within the app, but if my browser address is at say //localhost/account/emailsor a similar path and I refresh the page, I get a 404 error. This also happens when I address the path directly from the browser.

//localhost/ and //localhost/account work because the are actual paths in the apps file system with respective index.html files. What am I doing wrong here?

Martin Adámek · Answer 1 · 2017-10-29T21:10:35.977

0

You have wrong RewriteRule in your .htaccess. You want to use HTML5 mode, so your URLs will not be prefixed with /#/ anymore.

This could work:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteCond %{REQUEST_URI} !^/account.*$
RewriteRule ^(.*) /account/index.html [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

edited Oct 29 '17 at 21:10

answered Oct 29 '17 at 20:47

Martin Adámek

16,771
5
45
64

//localhost/account/emails when I try to access this path directly still gives me a 404 with this :( – Sandra Willford Oct 29 '17 at 20:51
Have you tried the latest version, with `RewriteRule ^(.*) /index.html [NC,L]`? Is your `index.html` in root (`localhost/index.html`)? – Martin Adámek Oct 29 '17 at 20:55
Yes I replaced mine with your entire code block. There is an index.html in the root and /account directories – Sandra Willford Oct 29 '17 at 21:01
Why do you have 2 index files? Maybe you should route to `/account/index.html` instead... – Martin Adámek Oct 29 '17 at 21:02
because the root directory hosts the sites main pages, while the /account directory holds the files for the user account that will be logged in. I guess two separate applications is the best way to explain it. – Sandra Willford Oct 29 '17 at 21:03
Ok than you need to rewrite rules for each index file I guess – Martin Adámek Oct 29 '17 at 21:05
still a 404 for the angular created paths – Sandra Willford Oct 29 '17 at 21:14
You will need to debug this with apache error.log then. The problem is definitely there. – Martin Adámek Oct 29 '17 at 21:18
[Sun Oct 29 16:50:03.494193 2017] [core:alert] [pid 57] [client ::1:10029] /var/www/html/june_frontend/.htaccess: Invalid command 'RewriteEngine', perhaps misspelled or defined by a module not included in the server configuration, referer: http://localhost/ – Sandra Willford Oct 29 '17 at 21:22
So you do not have mod_rewrite enabled at all... https://stackoverflow.com/questions/869092/how-to-enable-mod-rewrite-for-apache-2-2 – Martin Adámek Oct 29 '17 at 21:24

angularjs routing / html5mode and htaccess giving 404 error

1 Answers1