title: Angular 6 build failed to load resources
body: <p>I am trying to build my app using the command <code>ng build --prod</code> but when I try to load the index.html file in the <code>dist</code> folder, I get the following errors:</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>In the <strong>index.html</strong> file I have the following: </p>
  
  <pre><code>&lt;base href="/"&gt;
  </code></pre>
  
  <p><strong>angular.json file</strong></p>
  
  <pre><code>{
    "$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"
      }
    }
  }
  </code></pre>
  
  <p><strong>Other information:</strong> </p>
  
  <pre><code>Angular CLI: 6.2.7
  Node: 8.10.0
  OS: darwin x64
  Angular: 6.1.10
  </code></pre>
  
  <p>Files in <code>dist</code> folder</p>
  
  <pre><code>3rdpartylicenses.txt
  assets
  favicon.ico
  index.html
  main.4ee5dbfc414143867b55.js
  polyfills.f6ae3e8b63939c618130.js
  runtime.06daa30a2963fa413676.js
  scripts.f11023cbae55e24a4eeb.js
  styles.76a1111b5a6844e3fc2b.css
  </code></pre>