Angular CLI routing - Doesn't work on (Apache-) Server

Question

I'm currently learning Angular-CLI for a Project. I succeeded in creating a simple little project with some routing Objects. In dev mode with ng serve, everthing works just fine. I can call the localhost:port in the browser and it works with the routing.

Routing when executed with ng server.

After a successful ng build -prod and moving all the stuff from the dist directory into my Server Folder (Apache24/htdocs), I start my Server and the main Side (mywebside) just works fine, the routing however does not... (i.e. localhost/about), instead I get a standart Error-Page as shown below:

Missing Page Error

Hope I was able to describe clearly what I did and where my problems are. I didn't posted any Code because I think the problem has to be else where.

Thank you for your help!

Manuel

Versions:

angular CLI: Beta.8 (latest)

(apache): 2.4.20

• Poul Kruijt: Did you tell apache to direct all non existing file request to your root index.html?
• Manuel: I tried PierreDuc's solution: As I understood I had to created a .htaccess-file in the htdocs-directory of the Apache-Server... So I tried... :-) Long story short it didn't work, so either I made a mistake (because this was my first try with .htaccess-files or there's another mistake... If anyone has a source where its explained how to redirect non existant files to index.html with a .access-fil I'd be happy to read my self in :-) Thanks! My code: RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [L]
• Poul Kruijt: you should add the .htaccess in the same map as your index.html file
• Manuel: Oh Yes you're right - I already did that (if map means directory?), before i posted the first Comment :-), just forgot to change it ... but I got the same result...

Answer 1

OK figured it out (with help from PierreDuc!)

You have to do 2 things:

1. add a .htaccess file: (just like that no filename!) in the folder where your index.html File is saved, insert this code:

ErrorDocument 404 /index.html

2. Edit the httpd.conf:

(you find the File in the Apache24/conf/ directory) search for the line:

<Directory "c:/Apache24/htdocs"> [...] -> in my Version of apache it is in line 244

a few lines further (after a few comments) you should find this line:

AllowOverride none -> in my Version of apache it is in line 264

change this line to

AllowOverride ALL

Thats it, now your Angular-CLI Website should work in the production build with routing objects

hope it might be helpful to other Developpers!

Thanks to PierreDuc!

Manuel

• Poul Kruijt: Ahh, yes, AllowOverride. Forgot about that one! Good find :)