Angular 6 build failed to load resources

Question

I am trying to build my app using the command ng build --prod but when I try to load the index.html file in the dist folder, I get the following errors:

styles.76a1111….css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
runtime.06daa30….js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
polyfills.f6ae3e8….js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
scripts.f11023c….js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
main.4ee5dbf….js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
styles.76a1111….css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

In the index.html file I have the following:

<base href="/">

angular.json file

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "digital": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/digital",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.bundle.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "digital:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "digital:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "digital:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "wedigital-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "digital:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "digital:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "digital",
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }
}

Other information:

Angular CLI: 6.2.7
Node: 8.10.0
OS: darwin x64
Angular: 6.1.10

Files in dist folder

3rdpartylicenses.txt
assets
favicon.ico
index.html
main.4ee5dbfc414143867b55.js
polyfills.f6ae3e8b63939c618130.js
runtime.06daa30a2963fa413676.js
scripts.f11023cbae55e24a4eeb.js
styles.76a1111b5a6844e3fc2b.css

Answer 1

You need to change <base href="/"> to <base href="./">

Answer 2

You cannot open index.html directly from dist folder. You have to use some kind of Reverse Proxy Server.

You can use Nginx.

Modify and add the below configuration in your nginx.conf file:

location /angular {
   alias "C:\\<Your Project Location>\\dist";   
   index index.html index.htm;
   try_files $uri $uri/ /index.html =404;
}

Then you can access your project dist files as:
http://localhost/angular

And your error will also be solved.

Assuming that your angular.json file has baseHref and deployUrl properly defined.
Example:

{
  ...
  "projects": {
    "<Your project>": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            "baseHref": "/angular/",
            "deployUrl": "/angular/",
            ...
          }
        }
      }
    }
  }
}