Configure htaccess to use Angular and PHP routing

Question

I'm trying to use Angular 4 and PHP routing, but I'm not able to configure it in order to use both at the same time. I could make it work with one or the other, but not both.

This is my folder structure:

root
│ index.html
│ vendor.bundle.js    
| [..other angular files..]  
│
└─api
│  │ index.php
│  │ init.php
│  │
│  └─vendor
└─assets
└─[..other project files..]

On the file api/index.php is where I'm setting the PHP route.

So, when I use this .htaccess, the PHP route works as expected, but the Angular route doesn't work when I refresh the page, because it treats as a PHP route.

<IfModule mod_rewrite.c>
    RewriteEngine on

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule . api/index.php [L]

    RewriteBase /
    RewriteRule ^index.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

I tried to change the .htaccess to redirect only if the url being called contain the route /api/, but it didn't worked. Like this:

<IfModule mod_rewrite.c>
    RewriteEngine on

    RewriteCond %{REQUEST_URI} api
    RewriteRule . api/index.php [L]

    RewriteBase /
    RewriteRule ^index.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

With this code, the Angular route works, even when I refresh the page, but the PHP route never redirects to the index.php file, so it always return null.

What do I need to do to fix this problem?

Dexkill · Accepted Answer · 2019-11-11 10:37:22Z

2

Since I don't know a lot about htaccess, I don't know if this answer is 100% right, but I managed to make it work.

What I did was to move the line RewriteBase / to the top and remove the RewriteRule ^index.html.., with a final .htaccess that looks like this:

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /

RewriteCond %{REQUEST_URI} api
RewriteRule . api/index.php [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

Now this is working as expected. I'll leave the question open in case someone has a better answer.

edited Nov 11, 2019 at 10:37

Dexkill

32 bronze badges

answered Sep 1, 2017 at 23:30

celsomtrindade

4,68118 gold badges65 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Configure htaccess to use Angular and PHP routing

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related