6

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

Improve this question
4
  • Did you tell apache to direct all non existing file request to your root index.html?
    – Poul Kruijt
    Commented Jul 4, 2016 at 11:55
  • 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]
    – Manuel
    Commented Jul 4, 2016 at 14:10
  • you should add the .htaccess in the same map as your index.html file
    – Poul Kruijt
    Commented Jul 4, 2016 at 14:19
  • 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...
    – Manuel
    Commented Jul 4, 2016 at 14:33

1 Answer 1

Reset to default
9

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

  1. 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

Improve this answer
1
  • Ahh, yes, AllowOverride. Forgot about that one! Good find :)
    – Poul Kruijt
    Commented Jul 4, 2016 at 17:42

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.