在Angular 2 CLI应用中构建NG构建后，刷新显示404个错误

Question

我已经成功创建并运行了一个angualr2-cli应用程序。我还将应用程序部署在Apache服务器上，为此，我使用的是Angular2-CLI命令ng build

的帮助

但是，我的应用程序下降（未发现404页的错误），同时刷新孩子页面。

请执行以下步骤，您将意识到我提到的问题。

1. 单击此链接加载网页

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

3. 然后刷新页面

您可以看到我的问题。该页面消失并显示404错误。为什么部署到Apache服务器后会发生。当我使用ng serve命令

Answer 1

我在本指南之后解决了此问题。我的配置没有错。问题是添加.httaccess并允许在服务器设置上重写规则。

我总结了我为解决此问题所做的步骤。

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

   <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

在Apache Server上的Rewite Mod。

3.重新启动Apache Server service apache2 restart

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

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

就是这样！将任何链接重定向到我的index.html并起作用。因为所有路线都是从index.html的路由

Answer 2

这是IIS服务器的解决方案

1. 创建包括以下内容的Web.config文件：

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

2. 将此文件放在yor root部署文件夹中。