Deploy angular application in apache folder

Question

I have Apache server which is running Angular 6 application under /var/www/html/<angular_root>. I tried to add one folder /var/www/html/admin/<angular_root> but I get errors Failed to load resource: the server responded with a status of 404 (Not Found). Do you know what configuration I need to implement?

My current apache configuration is:

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

Are you setting the correct base Href in your angular index.html file? — MikeOne
– MikeOne, Commented Mar 25, 2019 at 19:13
@MikeOne and @sancelot have correctly diagnosed the issue. By default, DocumentRoot is set to /var/www/html, and since you are using admin directory, you should have used base ref as '/admin' instead of default '/' at the time of compilation. You can later change it within generated index.html if you wish. @DmitryK has used DocumentRoot same as path of directory to host Angular code, so default base ref is working fine. — Kishan Parekh
– Kishan Parekh, Commented Apr 2, 2019 at 2:29
I have written a article about the same angular-6-deploy-on-apache-server-by-solving-404 , hope this helps you : joeljoseph.net/… — Joel Joseph
– Joel Joseph, Commented Apr 3, 2019 at 9:33

sancelot · Accepted Answer · 2019-04-01 19:12:21Z

5

Your angular project(s base href is wrong. when you deploy your application, specify base-href on the cmdline :

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

for reference https://angular.io/guide/deployment

answered Apr 1, 2019 at 19:12

sancelot

2,07414 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miro J. Jan 24 at 13:19

For people coming late to this answer, the property --prod is deprecated. Use ng build --configuration production

Dmitry K · Accepted Answer · 2019-03-28 01:11:29Z

3

+50

Here is my working example:

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

Where dist/browser is a generated sources with index.html

answered Mar 28, 2019 at 1:11

Dmitry K

3592 silver badges9 bronze badges

1 Comment

Kishan Parekh Over a year ago

As a side note, since you only host Angular code, Options should not be defined with "Indexes", "FollowSymLinks", "Includes" and "ExecCGI" for security reasons.

Felix Friedman · Accepted Answer · 2019-04-02 02:19:58Z

3

You need to add rewrite rules to .htaccess. Otherwise the requests to your routes won't be redirected back to index.html for rendering. Look at the following link for Apache deployment: 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

answered Apr 2, 2019 at 2:19

Felix Friedman

515 bronze badges

Comments

Anjum.... · Accepted Answer · 2019-04-03 06:01:01Z

One of my project which was on tomcat server, I have done the following:

Create a new folder inside src/WEB-INF.
Inside WEB-INF folder create web.xml with below code.

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

Update your angular.json build > assets section, when you build your project it will get copied to final ./dist folder.

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

Update your index.html file <base href="./">

Hope this will helps someone.

Collectives™ on Stack Overflow

Deploy angular application in apache folder

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related