Building angular application and putting on the server
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
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