Apache rewrite rules not being applied for angularjs

Question

I am trying to setup apache 2.2 with AngularJS with an almost exact structure as the one from the following closed question.

rewrite rules for apache 2 to use with angular js

I would like to redirect all requests to app/index.html except for requests to /api.

My directory structure is as followed

/
/app
/app/index.html
/app/css
/app/js
/api

I am trying to apply these redirect rules in the httpd-vhosts file as such which was posted as the correct answer https://stackoverflow.com/a/15284848/671095 to the question.

<VirtualHost *:80>
ServerName www.test.com
DocumentRoot "C:/websites/test"
Alias /CFIDE "C:/websites/CFIDE"

RewriteEngine On

# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{REQUEST_URI} !/api

# otherwise forward it to index.html 
RewriteRule ^.*$ - [NC,L]
RewriteRule ^app/. /app/index.html [NC,L]

</VirtualHost>

However when I try visit / in the browser I am presented with a blank screen. If I enter to /app/index.html in the browser however I am able to view the html page in my browser but none of the css.or js can be accessed and is returning a 404.

I have been going nuts over this which seems like a simple thing to accomplish as an apache rewrite.

Any help would be much appreciated

score 14 · Answer 1 · answered May 04 '13 at 05:35

14

This is now much easier in Apache 2.2.16+ using the FallbackResource directive.

FallbackResource /app/index.html

http://httpd.apache.org/docs/2.2/mod/mod_dir.html#fallbackresource

Depending on how you're forwarding access to your API you may need to also leverage the enclosure to disable the fallback resource on specifically on API requests (2.2.24+).

<Directory /api>
    FallbackResource disabled
</Directory>

answered May 04 '13 at 05:35

pk__

221
1
7

Works like a charm with apache 2.4.x ! – Timothy Dalton Dec 28 '16 at 19:30

score 11 · Answer 2 · answered May 11 '13 at 07:30

11

This works for me:

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]
</ifModule>

answered May 11 '13 at 07:30

qais

1,708
2
19
30

Just to add to this comment, if your Angular app is not located at the root of the host, i.e. contents live in a directory like http://example.com/moo/, you need to add the appropriate `` tag. For the example of http://example.com/moo/, your tag needs to be `` - this is so your assets and templates load correctly – BahamutWC Jul 10 '13 at 17:26
@BahamutWC: Use of the base tag is discouraged; http://docs.angularjs.org/guide/dev_guide.services.$location – Daan Dec 17 '13 at 13:24
1

@Daan it is only discouraged as far as Angular recommends that you serve it from the root document. However if you cannot for whatever reason, you must use the `` tag. – BahamutWC Dec 18 '13 at 18:25
1

I kept getting Bad Request using this method. What fixed it was putting a slash in front of the index.html like so `RewriteRule (.*) /index.html [L]` – element11 Dec 23 '15 at 20:35
This one was perfect for me, as front-end (angular) is index.html and subfolder/ is a backend laravel index.php, so defining index.`html` made it work for me. – Terje Nesthus May 18 '16 at 01:22

score 2 · Answer 3 · edited Mar 14 '13 at 23:47

2

I had this same issue. But I'm ignorant in mod_rewrite so had to Google a lot. I found the solution in this email:

https://groups.google.com/d/msg/angular/GmNiNVyvonk/mmffPbIcnRoJ

So I think your .htaccess should look as follows:

Options +FollowSymLinks
IndexIgnore */*

RewriteEngine on

# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{REQUEST_URI} !/api
RewriteRule ^.*$ - [NC,L]

# otherwise forward it to index.html 
RewriteRule ^app/(.*) /app/#/$1 [NC,L]

Notice the (.*) and the #/$1

Note: you MUST use absolute paths in your includes CSS, JS, etc. if not you are going to get the error:

resource interpreted as script but transferred with mime type text/html

edited Mar 14 '13 at 23:47

Bojangles

91,543
47
160
197

answered Mar 14 '13 at 17:16

elviejo79

4,522
2
29
35

I have applied these rules to httpd-vhosts file but when I try to access `mywebsite.com` it does not pass through to the index.html file also now when I access `mywebsite.com/app/` I am presented with a 404 in the browser – matthew Mar 14 '13 at 23:52
I used your code and I see the "Internal Server Error" message. Any ideas on how to fix this? – Devner Oct 23 '15 at 11:02

score 1 · Answer 4 · edited May 23 '17 at 10:29

Don't know if you are still having this problem, but I was having the same symptoms with AngularJS and Apache 2.

My problem was actually that I was using IE and it was automatically coming up in compatability mode. I used the line below in my HTML and it worked.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Described further here: < What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do? >.

Apache rewrite rules not being applied for angularjs

4 Answers4

Linked