Развернуть приложение angular в папке apache

#angular #apache

Вопрос:

У меня есть сервер Apache, на котором запущено приложение Angular 6 под /var/www/html/<angular_root> . Я попытался добавить одну папку, /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>

1. Правильно ли вы задаете базовую ссылку Href в вашем angular index.html файл?

2. @MikeOne и @sancelot правильно диагностировали проблему. По умолчанию DocumentRoot установлено значение /var/www/html , и поскольку вы используете admin directory, вы должны были использовать базовую ссылку как ‘/admin’ вместо значения по умолчанию ‘/’ во время компиляции. Позже вы можете изменить его в сгенерированном index.html , если хотите. @DmitryK использовал DocumentRoot то же, что и путь к каталогу для размещения кода Angular, поэтому базовая ссылка по умолчанию работает нормально.

3. Я написал статью о том же angular-6-deploy-on-apache-server-by-solving-404, надеюсь, это поможет вам: joeljoseph.net /…

Ответ №1:

Неверен базовый href вашего проекта angular. при развертывании приложения укажите base-href в командной строке :

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

для справки https://angular.io/guide/deployment

Ответ №2:

Вот мой рабочий пример:

 <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

1. В качестве дополнительного примечания, поскольку вы размещаете только код Angular, Options не следует определять с помощью «Индексов», «Следующих ссылок», «Включает» и «ExecCGI» по соображениям безопасности.

Ответ №3:

Вам нужно добавить правила перезаписи в .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

Ответ №4:

В одном из моих проектов, который был на tomcat сервере, я выполнил следующее:

Создайте новую папку внутри src/WEB-INF .
Внутри 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>

Обновите свой раздел angular.json build > assets, когда вы создадите свой проект, он будет скопирован в конечную ./dist папку.

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

Обновите свой index.html файл <base href="./">

Надеюсь, это кому-нибудь поможет.