Angular 6 Application Breaks on reload after produ

问题:

I have an application where i have kept that dist folder which we get after success full production build on my server. All works fine all modules & components are working perfectly. Untill I reload the browser window manually, it throws the below errors. Also i have build the project using base-href -- /dist/

        Object not found!
        The requested URL was not found on this server. If you entered the URL 
        manually please check your spelling and try again.

        If you think this is a server error, please contact the webmaster.

回答1:

You have to setup your server to send index.html (generally) for any URL that does not exist.

What happens is when you move to a different route within the application, it is the JS that is handling your routing. But once you hit refresh, it is the browser asking your server to handle that request and since routes are not handled at the server side, it reports the said error.

Hence, you need to deliver the index file, no matter what route the browser asks for.

Well, if we talk about hitting the api from the front end, then you may use the concept called reverse proxy, if you have got any static server in between or handle /api route before any * route at server side, to let your request be handled by the server differently.

Take a look at this guide to configure your server.

---

There is however a clever way to handle routing as well. By using useHash: true. Please look at the guide here.

RouterModule.forRoot(routes, { useHash: true })

回答2:

Let me clearify - you are doing the following:

1. visit yourdomain.com/dist - apps load fine
2. you do some navigations to eg. yourdomain.com/dist/somemodule/somethingelse
3. You hit f5
4. 404 error code is returned.

If I am correct, than you have to configure proper URL rewriting on your web server. Basicly what it does, is returning index.html no matter what URL is requested as long as eg. path starts with /dist/

Angular Documentation explicitly explains what have to be done and even provides how example configuration for some webservers.

I am surprised that your application made to to preducton without you or integration team knowing those (basic!!!) concepts

https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml

回答3:

Have you tried building the website without the --base-href or with --base-href=""?

回答4:

As @Antonoiosss mentioned on his answer above this is due to url rewriting issues at your production server. However, the fallback option for Apache won't work for me (even with the basic settings I have in my web server) given in the url above.

The following .htaccess example worked for me,

 <IfModule mod_rewrite.c>
    RewriteEngine on

    RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
    RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

    #RewriteCond %{HTTPS} !on
    #RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

    # 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]   
</IfModule>

The above worked with Angular 6, 7 and 8. I have commented out two lines which is responsible for HTTPS routings. However, this will be most likely turned on when your app hits the real production environment.

Hope this helps someone.

Cheers.!