[Fixed] Angular routing on apache is returning internal server error

Issue

I’m using the PathLocationStrategy and deployed my angular application on apache. My angular application files are inside the folder "teste", which is inside the folder "public_html". I have changed the .htaccess file that is inside the "public_html" and I’m still getting the internal server error when I reload the page:
"Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request. …"

This is my .htaccess:

# php -- BEGIN cPanel-generated handler, do not edit
# Defina o pacote [email protected]~\[email protected]~] como a linguagem padrão de programação 
[email protected]~\[email protected]~].
<IfModule mod_rewrite.c>
  AddHandler application/x-httpd-ea-php73 .php .php7 .phtml

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

  RewriteRule ^(.*) /index.html [NC,L]
</IfModule>
# php -- END cPanel-generated handler, do not edit

What am I doing wrong? Is there anything else to do?

Solution

Since you are deploying the angular application into a subfolder of your root hosting folder i.e. public_hmtl, first build the app with the following command.

ng build --prod --base-href=/teste/

This will set the app base as below in index.html when the build is performed.

<base href="/teste/">

Now define the subfolder in RewriteRule of your htaccess file.

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

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

Leave a Reply

(*) Required, Your email will not be published