在apache文件夹中部署角度应用程序

Question

我有Apache服务器，它在/var/www/html/<angular_root>下运行Angular 6应用程序。 我尝试添加一个文件夹/var/www/html/admin/<angular_root>但是我收到错误Failed to load resource: the server responded with a status of 404 (Not Found) 。 你知道我需要实现什么配置吗？

我目前的apache配置是：

<Directory /var/www/html/admin>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

Answer 1

这是我的工作示例：

<VirtualHost fancy.local:80>
    DocumentRoot "/abs/path/to/fancy/dist/browser"
    ServerName fancy.local
    <Directory "/abs/path/to/fancy/dist/browser">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

dist/browser是index.html的生成源

Answer 2

您需要向.htaccess添加重写规则。 否则，对您的路线的请求将不会重定向回index.html进行渲染。 请查看以下Apache部署链接： https ： //angular.io/guide/deployment

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

Answer 3

您的角度项目（s base href是错误的。在部署应用程序时，在cmdline上指定base-href：

ng build --prod --base-href ./

供参考https://angular.io/guide/deployment

Answer 4

我的一个项目是在tomcat服务器上，我做了以下事情：

1. 在src/WEB-INF创建一个新文件夹。
2. 在WEB-INF文件夹中，使用以下代码创建web.xml 。

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <error-page>
        <error-code>404</error-code>
        <location>/</location>
    </error-page>
</web-app>

1. 更新angular.json build> assets部分，在构建项目时，它将被复制到最终的./dist文件夹。

"assets": [
              {
                "input": "src/assets",
                "output": "/assets/"
              },
              "src/favicon.ico",
              "src/WEB-INF"
    ],

4. 更新index.html文件<base href="./">

希望这会对某人有所帮助。