Building angular application and putting on the server

Question

I'm developing an angular6 application and I want to generate a build to test on my server, currently I use ng server and it runs working on my browser without generating any errors.

c:\Users\emiry\Desktop\Angular\Projects\StartingNewProject

when I run the ng build command it generates a build for the /dist folder and returns no errors

on my machine I have installed wamp64 so I get this build generated by ng and put it in my www folder

C:\wamp64\www\StartingNewProject

Just this would be enough for me to be able to run my application on the server?

when I try to access my application that is on the server through the http:// localhost/startingnewproject/

it returns me the following error in the browser console

Failed to load resource: the server responded with a status of 404 (Not Found) polyfills.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) styles.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) vendor.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "StartingNewProject": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/StartingNewProject",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              {
                "input": "./node_modules/bootstrap/dist/css/bootstrap.css"
              }
            ],
            "scripts": []
          },
          "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": "StartingNewProject:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "StartingNewProject:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "StartingNewProject: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": [
              "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/**"
            ]
          }
        }
      }
    },
    "StartingNewProject-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "StartingNewProject:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "StartingNewProject:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "StartingNewProject"
}

package.json

{
  "name": "starting-new-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0-alpha.0",
    "@ng-bootstrap/schematics": "^2.0.0-alpha.1",
    "bootstrap": "^4.0.0",
    "core-js": "^2.5.4",
    "jshint": "^2.9.5",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

I tried to access as follows

file:///C:/wamp64/www/StartingNewProject/index.html

5index.html:13 GET file:///C:/runtime.js 0 () /C:/favicon.ico:1 GET file:///C:/favicon.ico 0 () translate.google.com/gen204?nca=te_li&client=te_lib&logld=vTE_20180625_00:1 GET file://translate.google.com/gen204?nca=te_li&client=te_lib&logld=vTE_20180625_00 0 ()

file:///C:/wamp64/www/StartingNewProject/index.html

GET file:///C:/runtime.js 0 () /C:/favicon.ico:1 GET file:///C:/favicon.ico 0 ()

When I try to access the root directory to see the folders and files, I can perfectly, the problem is when I load the index.html

Answer 1

The issue that the project is having is in trying to find it's dependencies. The index.html file of your Angular project should contain a tag that looks like:

<base href="/">

Or similar. That means, when it looks for dependencies, it looks for the relative to the root. In your case,there not next to the root (i.e. localhost), they're under StartingNewProject

You can should generate a new build with ng build --prod --base-href=/StartingNewProject/ which will add the base href tag for you. Please note that it is important to include both the leading and trailing slash here.

More details can be found in the Angular docs, here

Answer 2

I was facing the same problem. I fixed this using ./.

<base href="/"> to <base href="./">

again build and deploy.