在Angular 2 Cli应用程序中ng生成后，刷新显示404错误

问题描述

我已经成功创建并运行了angualr2-cli应用程序.我还将应用程序部署在apache服务器上，为此，我正在使用angular2-cli命令ng build

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

但是在刷新子页面时，我的应用程序出现故障(404页面未找到错误).

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.

1. 点击此链接以加载网页

现在单击作业"侧栏菜单或任何或侧栏元素

Now Click the Job Side bar menu or any or the side bar element

然后刷新页面

您将能够看到我的问题.页面不见了，并显示404错误.部署到apache服务器后为什么会发生这种情况.当我使用ng serve命令

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

推荐答案

我已在本指南.这在我的配置中没有错.问题是要在服务器设置上添加.httaccess并允许重写规则.

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.

1. 我在index.html所在的位置添加了.httaccess文件.

1. 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.然后使用sudo a2enmod rewrite

3.重启apache服务器service apache2 restart

3.The restart the apache server service apache2 restart

4.之后，打开/etc/apache2/sites-enabled/000-default.conf文件，并在<VirtualHost>标签上添加以下规则

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>

就是这样！任何链接都重定向到我的index.html并可以使用.因为所有路由都是从angular2路由中的index.html路由

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

这篇关于在Angular 2 Cli应用程序中ng生成后，刷新显示404错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！