How to host Angular 4 multi-language on Apache?

Viewed 631

I have a website that uses both English and French. I use the following command to build the application:

ng build --output-path=dist/fr --aot --prod --bh /fr/ --i18n-file=src/locale/messages.fr.xlf --i18n-format=xlf --locale=fr
ng build --output-path=dist/en --aot --prod --bh /en/

I copy both en and fr folders to the web root. Each folder has its own .htaccess as following:

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteBase /crisis-center/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

I also added a .htaccess to the web root:

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteBase /crisis-center/
  RewriteRule ^index\.html$ - [L]

  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d


  RewriteCond %{HTTP:Accept-Language} ^fr [NC]
  RewriteRule ^$ /fr/ [R]
  RewriteCond %{HTTP:Accept-Language} !^fr [NC]
  RewriteRule ^$ /en/ [R]
</IfModule>

Everything works, except one issue: I can not refresh page. It will show a 404 error. I guess it's because of the .htaccess settings.

What is the problem?

0 Answers
Related