Url Not found on reload + Angular5

Question

I am facing one issue related to the angular app, using components in my app then when I go with the single page the page loaded successfully but when I open that URL in a new tab or reload it, give error Not found.

I am using AWS apache server for this and only facing this issue on it, in my Godaddy server page reloading working properly.

Here I am attaching my screenshot of the error.[

Thankx in advance

Answer 1

I think your .htaccess file is not reachable,

Create .htaccess file inside /var/www/html i.e. in the folder where your index.html is.

Put following code in it:-

RewriteEngine On
    # If an existing asset or directory is requested go to it as it is
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html 

Than goto /etc/apache2 folder and open apache2.conf file with sudo.

cd /etc/apache2
sudo vim apache2.conf

Remove comment(#) of AccessFileName it will look like

AccessFileName .htaccess 

Then find the line where there is

<Directory /var/www/>
     Options Indexes FollowSymLinks
     AllowOverride None
     Require all granted
</Directory>

replace "None" with "All"

AllowOverride All

Done!

Now run command

sudo service apache2 restart

And check now!