Angular 6 Application Breaks on reload after production build

Question

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.

Ankit Sharma · Accepted Answer · 2018-08-09T06:18:51.237

6

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 })

edited Aug 09 '18 at 06:18

answered Aug 09 '18 at 06:07

Ankit Sharma

1,674
8
11

OK let me try this & see – Jignesh Mistry Aug 09 '18 at 06:10
1

Which one did you use? Configuring server or the `useHash`? It is recommended to configure your server rather than using the `HashLocationStrategy`. – Ankit Sharma Aug 09 '18 at 06:15
2

Have a look at https://angular.io/guide/deployment#server-configuration if you don't want to use `HashLocationStrategy` – Ash Aug 09 '18 at 06:15
i used useHash:true – Jignesh Mistry Aug 09 '18 at 06:17

score 4 · Answer 2 · answered Aug 09 '18 at 06:13

Let me clearify - you are doing the following:

visit yourdomain.com/dist - apps load fine
you do some navigations to eg. yourdomain.com/dist/somemodule/somethingelse
You hit f5
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

I have checked the Fallback configuration examples but the list doesn't contain one for Nodejs /Express https://angular.io/guide/deployment#fallback-configuration-examples . Can you point to a valid example. — Prateek, May 14 '19 at 10:02

score 1 · Answer 3 · answered Aug 09 '18 at 06:06

1

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

answered Aug 09 '18 at 06:06

Vanch

296
1
13

with out --base-href it thorws erros of main.js pollyfill etc – Jignesh Mistry Aug 09 '18 at 06:08

score 0 · Answer 4 · answered Jul 20 '19 at 15:59

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

Angular 6 Application Breaks on reload after production build

4 Answers4

Linked