.htaccess in Angular works only for subfolder-CodePudding

I have deployed the app into a Debian 11 Apache server into a folder in var/www/html, i.e. var/www/html/foo. Being my first time deploying an Angular app, I've noticed problems with routing and hard refreshing (indeed, a 404 error occurs whenever I try to refresh a page of my app). My app has several routes, such as:

site.com/items
site.com/map
site.com/item/4
...

I've read that I need to create an .htaccess file in order to fix that, so I've created one and placed it into the root (i.e., html).

.htaccess

RewriteEngine On
    RewriteBase /
    # If an existing asset or directory is requested go to it as it is
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    # If the requested resource doesn't exist, use index.html
    RewriteRule ^ /index.html

Being var/www/html a shared folder with other apps (e.g. var/www/html/bar1, var/www/html/bar2) that I don't manage, I've also created other .htaccess files with RewriteEngine Off and placed them into those app folders in order to avoid issues.

For sake of clarity, this is the tree structure of my folder:

var/www/html:.
│   .htaccess
│   ...
│   ...
├───foo (my app)
├───bar1
│   │   .htaccess (RewriteEngine Off)
│   │   ...
└───bar2
        .htaccess (RewriteEngine Off)
        ...

Unfortunately this .htaccess doesn't seem to work properly. I'm still experiencing hard refresh problems when using site.com/foo app.

Now for the "funny" part: for testing purposes I've created another foo subfolder inside the var/www/html/foo folder that is exactly the copy of the parent folder (minus the .htaccess) containing the dist of the Angular app. And whenever I access site.com/foo/foo the app works as expected (no hard refresh problems); conversely, if I access site.com/foo the hard refresh doesn't work anymore. Again, for the sake of clarity, here's the tree structure. Notice that I've placed another .htaccess inside the parent foo.

var/www/html/foo:.
│   .htaccess
│   favicon.ico
│   index.html
│   main.js
│   main.js.map
│   polyfills.js
│   polyfills.js.map
│   runtime.js
│   runtime.js.map
│   scripts.js
│   scripts.js.map
│   styles.css
│   styles.css.map
│   vendor.js
│   vendor.js.map
│   
├───assets
│   │   ...
│   ├───img
│   │       ...
│           
└───foo
    │   favicon.ico
    │   index.html
    │   main.js
    │   main.js.map
    │   polyfills.js
    │   polyfills.js.map
    │   runtime.js
    │   runtime.js.map
    │   scripts.js
    │   scripts.js.map
    │   styles.css
    │   styles.css.map
    │   vendor.js
    │   vendor.js.map
    │   
    └───assets
        │   ...  
        ├───img
        │       ...

The folders and their contents are absolutely identical, so I'm guessing it has to do with the .htaccess. Any idea on why this happens and how to fix the hard refresh problem in the first foo folder? Also, I'd like to move the content of foo to the html folder, in order to have my app at mysite.com. Is it okay to leave the .htaccess in the root (i.e. html).

Thank you for your help!

CodePudding user response：

So, At first I am assuming that you're using Apache/httpd server with all necessary extensions enabled. It's not an issue with Angular itself, but with Apache/.htaccess configuration. Basycally what you need to do, is to configure your http traffic for domain, to always point onto your index.html file.

Please check out this .htaccess file, that you're putting in root (next to index.html) to which domain should be pointed.

<IfModule mod_rewrite.c>
    RewriteEngine On
    # -- REDIRECTION to https (optional):
    # If you need this, uncomment the next two commands
    # RewriteCond %{HTTPS} !on
    # RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
    # --

    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d

    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) index.html [NC,L]
</IfModule>

If it's not working, then I will recommend to check your Apache configuration and enable mod_rewrite

sudo a2enmod rewrite

as also I would check vhost configuration to make sure

AllowOverride all

is included

IMPORTANT! Remember to restart your Apache server after changes.