Building angular application and putting on the server
Solution 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
Solution 2
I was facing the same problem. I fixed this using ./.
<base href="/"> to <base href="./">
again build and deploy.
Solution 3
you may get a "deprecated" warning with Angular 11 when using
ng build --prod --base-href=/StartingNewProject/
You can instead adjust angular.json.
In angular.json file, create a "baseHref" property like this:
"projects": {
"your-project-name" : {
"architect": {
"build": {
"options": {
"baseHref": "/your-relative-path/"
This will change the URL both in production and development.
Beware that, in your links, always use relative paths like this (instea of "/"):
<img class="top-bar__logo" src="./assets/images/picture1.svg" />
Emiry Mirella
Updated on February 24, 2021Comments
-
Emiry Mirella about 3 years
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 buildcommand it generates a build for the /dist folder and returns no errorson my machine I have installed
wamp64so I get this build generated by ng and put it in my www folderC:\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