After ng build in Angular 2 Cli application build the refresh shows 404 Error

问题

I have successfully create and run an angualr2-cli application. I also deploy the application on the apache server, For this I am using the help of angular2-cli command ng build

But My application goes down ( 404 Page Not Found Error) while refreshing the child pages.

Please do the following steps you will realize the problem I have mentioned.

Click this link to load the web page
Now Click the Job Side bar menu or any or the side bar element
Then refresh the page

You would able to see my problem. The page gone and show 404 Error. Why it is happen on after deploy into apache server. The refresh is perfectly work on development environment (http://localhost:4200 ) while I'm running the server using ng serve command

回答1:

I have fixed this issue following this guide. That is nothing wrong in my configuration. The problem is to adding the .httaccess and allow rewrite rule on the server settings.

I summarized the steps what I have done to fix this issue.

I have added .httaccess file on the location where the index.html resides.

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

2.Then allow the rewite mod on apache server using sudo a2enmod rewrite

3.The restart the apache server service apache2 restart

4.After that open the /etc/apache2/sites-enabled/000-default.conf file and add the following rule on <VirtualHost> tag

<Directory "/var/www/html">
   AllowOverride All
</Directory>

That's it!! Any of the links redirect to my index.html and works. Because All of the routes are route from index.html in angular2 routing

回答2:

Here is a solution for IIS server

Create web.config file that includes the following:

 <!-- configure the site to work with HTML5 push state -->
<rewrite>
  <rules>
    <rule name="AngularJS Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

Put this file in yor root deployed folder.

来源：https://stackoverflow.com/questions/41183578/after-ng-build-in-angular-2-cli-application-build-the-refresh-shows-404-error

标签

angularjs

apache

angular2-cli