skip to Main Content

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>

4

Answers


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

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
  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
    
    Login or Signup to reply.
  4. One of my project which was on tomcat server, I have done the following:

    1. Create a new folder inside src/WEB-INF.
    2. 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>
    
    
    1. 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"
        ],
    
    1. Update your index.html file <base href="./">

    Hope this will helps someone.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search