在Angular 2 Cli应用程序构建中构建后,刷新显示404错误

时间:2016-12-16 11:39:38

标签: angularjs apache angular2-cli

我已经成功创建并运行了一个angualr2-cli应用程序。我也在apache服务器上部署应用程序,为此我使用angular2-cli命令ng build的帮助

但刷新子页面时,我的应用程序出现故障(404 Page Not Found Error)。

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

  1. Click this link to load the web page

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

  3. 然后刷新页面

  4. 你可以看到我的问题。页面消失了,显示404错误。为什么在部署到apache服务器后发生。当我使用ng serve命令运行服务器时,刷新完全适用于开发环境(http://localhost:4200

2 个答案:

答案 0 :(得分:2)

我已在this guide之后解决了此问题。这在我的配置中没有错。问题是添加.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. 2.然后使用sudo a2enmod rewrite

    在apache服务器上允许reite mod

    3.重启apache服务器service apache2 restart

    4.之后打开/etc/apache2/sites-enabled/000-default.conf文件并在<VirtualHost>代码

    上添加以下规则
    <Directory "/var/www/html">
       AllowOverride All
    </Directory>
    

    就是这样!任何链接都重定向到我的index.html并且有效。因为所有路由都是来自angular2 routing中的index.html的路由

答案 1 :(得分:0)

这是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根部署文件夹中。