Construire angular angulaire et mettre sur le serveur
Je suis en train de développer une application angular6 et je veux générer une build à tester sur mon serveur, actuellement j'utilise ng server et il fonctionne sur mon navigateur sans générer aucune erreur.
c:\Users\emiry\Desktop\Angular\Projects\StartingNewProject
quand je lance le ng build commande, il génère une build pour le dossier/dist et ne renvoie aucune erreur
sur ma machine, j'ai installé wamp64 donc je reçois cette build générée par ng et je la mets dans mon dossier www
C:\wamp64\www\StartingNewProject
Est-ce que cela suffirait pour que je puisse exécuter mon application sur le serveur?
lorsque j'essaie d'accéder à mon application qui se trouve sur le serveur via http: // localhost/startingnewproject /
cela me renvoie l'erreur suivante dans la console du navigateur
Échec du chargement de la ressource: le serveur a répondu avec un état de 404 (Not Found) polyfills.js: 1 Échec du chargement de la ressource: le serveur a répondu avec un état de 404 (Not Found) styles.js: 1 Échec du chargement de la ressource: le le serveur a répondu avec un état de 404 (introuvable) vendor.js: 1 Échec du chargement de la ressource: le serveur a répondu avec un état de 404 (introuvable) main.js: 1 Échec du chargement de la ressource: le serveur a répondu avec un état de 404 (introuvable)
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"
}
}
J'ai essayé d'accéder comme suit
fichier: /// C: /wamp64/www/StartingNewProject/index.html
5index.html: 13 Fichier GET: /// C: /runtime.js 0 () /C:/favicon.ico:1 Fichier GET: /// C: /favicon.ico 0 () translate.google.com/ gen204? nca = te_li & client = te_lib & logld = vTE_20180625_00: 1 Fichier GET: //translate.google.com/gen204? nca = te_li & client = te_lib & logld = vTE_20180625_00 0 ()
fichier: /// C: /wamp64/www/StartingNewProject/index.html
Fichier GET: /// C: /runtime.js 0 () /C:/favicon.ico:1 Fichier GET: /// C: /favicon.ico 0 ()
Lorsque j'essaie d'accéder au répertoire racine pour voir les dossiers et fichiers, je peux parfaitement, le problème est quand je charge le fichier index.html
Le problème que le projet rencontre est d'essayer de trouver ses dépendances. Le index.html le fichier de votre Angular doit contenir une balise qui ressemble à:
<base href="/">
Ou similaire. Cela signifie que lorsqu'il recherche des dépendances, il recherche le relatif à la racine. Dans votre cas, il n'y a pas à côté de la racine (c'est-à-dire localhost), ils sont sous StartingNewProject
Vous pouvez générer une nouvelle version avec ng build --prod --base-href=/StartingNewProject/ qui ajoutera la balise href de base pour vous. Veuillez noter qu'il est important d'inclure ici la barre oblique de début et de fin.
Plus de détails peuvent être trouvés dans les Angular docs, ici