CODEWITHSUNDEEP
angular
Sandhu
Sandhu

Reputation: 390

404 on route refresh in angular 4, nginx server and apache

I created a new component in Angular 4 and added its route 'account'. When I run ng serve home page opens and there is a link to account page. On clicking account page link account page opens. If I refresh the page, it works.

The problem is that when I make build with ng build and upload build to apache. If I click on 'account' link the account page opens. But if I refresh or try open account route directly i get 404 error on.

If I add 'use hash', then it works with '#', but I don't want this.

I am using angular 4.2.4

Upvotes: 4

Views: 7905

Answers (4)

Alamgir Hossen
Alamgir Hossen

Reputation: 1

Just put this on .htaccess in root

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]

Upvotes: 0

Asanka
Asanka

Reputation: 1648

In back-end (server side) just map all (404) error/unrecognized requests to your index (which includes all angular build scripts).then it returns the index. In front-end, u can get what u need.It maps to the page which u need.

eg:- In spring Boot back-end this is an example answer

Upvotes: 1

Rahul Singh
Rahul Singh

Reputation: 19622

You can check this Link on how to deploy Angular Apps on Apache.

How to Serve index.html in apache

This can be achieved by adding a .htaccess file (in the same directory where the index.html resides) with the following contents.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Upvotes: 7

skipper21
skipper21

Reputation: 2445

Try adding query_string in your nginx conf file

location / {
    alias /var/www/my_project/dist/;
    index index.html;
    try_files $uri $uri/ /index.html?$query_string;
}

Upvotes: 2

Related Questions