404 when reloading route o ng build --prod

[Abubarrett]

Info

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

-Mac OSX El Capitan

1. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.11-webpack
node: 6.3.0
os: darwin x64

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

I'm geting a weird error, when I reload on any route with the cli (example "app/route"), everything works fine, but if I i "ng build --prod", and then test it, if I reload on that particular route ('app/route'), it gives me a 404 error instead of actually working, Am I doing something wrong?

[filipesilva]

Can you provide me with a repo where this happens so I can debug please?

[Abubarrett]

Yes. Here it is https://github.com/Abubarrett/Heelum-Website

when i ng serve it works fine when you reload /trabajo , but if I ng build --prod, then when reloading /trabajo it just gives me a 404, thats how i think you could reproduce the issue.

Edit: Updated repo to RC5 and webpack.2, issue persists

[filipesilva]

Heya @Abubarrett, apologies for taking so long to get back to this issue.

I used your repo and could verify that with ng serve accessing http://localhost:4200/trabajo works, a page is displayed.

Then I tried ng serve --prod and I could still access http://localhost:4200/trabajo. This makes me think there's no bug in production builds as I initially thought.

I noticed you never actually mentioned you did ng serve --prod, but rather ng build --prod. How are you serving your app? For Angular 2 apps you need to serve them with URL rewriting for routes to work so things like http-server won't do.

If you're serving on apache, you can use this guide: https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/. It's for Angular 1 but the gist of it is the same - both Angular 1 in HTML5 mode and Angular 2 use the same kind of routing.

[Abubarrett]

Thank you @filipesilva, sorry for the confusion haha

[psotelo]

Hi! have you resolved this error? I've got the same problem at this moment, my application works with ng serve but all the routes are broken when I use ng build

[Abubarrett]

Yeah the basic idea is that the server loads routes based on files, but your whole angular app runs on index.html and it tells the browser which route to show, so with htaccess you pretty much route all server incoming traffic to index.html and it all runs smoothly :)
This is the .htaccess I'm using:

RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

[psotelo]

Thank you! I've used it but I continue getting errors like this:

http://192.168.0.156:8000/Observable.js.map
[Error] Failed to load resource: the server responded with a status of 404 (File not found) (Observable.js.map, line 0)

[Daniel122593]

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator at webmaster@localhost to inform them of the time this error occurred, and the actions you performed just before this error.

More information about this error may be available in the server error log.

Al usar htaccess me da el siguiente error, a que se debe el error ?

[musaddiq-pk]

Hi @Abubarrett ,
I used the above .htaccess file. When I click on any link it's working nice. But when I refresh that page it just display the contents of index page.

Any idea, what I m doing wrong?
Thanks

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}