Déployer L'application Angular 5 + Nodejs Express à Heroku

j'ai une application 5 angulaire.

C'est ce que j'ai dans mon paquet.json

{
  "name": "web",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.1.0",
    "@angular/cli": "^1.6.4",
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@angular/router": "5.0.3",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
    "@ngx-translate/core": "8.0.0",
    "@types/jquery": "3.2.16",
    "angular2-image-upload": "^1.0.0-rc.0",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "2.4.1",
    "express": "^4.16.2",
    "jquery": "3.2.1",
    "jquery-slimscroll": "1.3.8",
    "ngx-toastr": "8.0.0",
    "ngx-uploader": "4.2.1",
    "pace-js": "1.0.2",
    "popper.js": "1.13.0",
    "rxjs": "5.5.0",
    "sticky-kit": "1.1.3",
    "typescript": "~2.4.2",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/language-service": "5.0.3",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0"
  },
  "engines": {
    "node": "8.9.4",
    "npm": "5.6.0"
  }
}

j'ai créé un le serveur.js avec ces contenus. 

constexpress=require('express');
constapp=expres();
constpath=require('path');

app.us(express.static(__dirname+'/dist'));

app.listen(process.env.PORT||8080);


//PathLocationStradegy
app.get('/'function(req,res) {
  res.sendFile(path.join(__dirname+'/dist/index.html'));
});

console.log('Console Listening');

Ensuite, j'exécute ces commandes 

heroku auth:login
Email : johndoe@outlook.com
Password : #########
heroku create iproject-demo
heroku git:remote iproject-demo
git status
git add -A
git push heroku master

Debug

j'ai essayé de courir ce

⚡️ web heroku ps 

Free dyno hours quota remaining this month: 998h 46m (99%)
For more information on dyno sleeping and how to upgrade, see:
https://devcenter.heroku.com/articles/dyno-sleeping

=== web (Free): npm start (1)
web.1: crashed 2018/01/27 14:18:58 -0500 (~ 1m ago)

Résultat

tout a l'air bon.

Heroku Log afficher favoriser la Réussite.

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 8.x...
       Downloading and installing node 8.9.4...
       Using default npm version: 5.6.0
-----> Restoring cache
       Skipping cache restore (not-found)
-----> Building dependencies
       Installing node modules (package.json)
       added 26 packages in 5.46s
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 34.4M
-----> Launching...
       Released v3
       https://iproject-demo.herokuapp.com/ deployed to Heroku

MAIS quand je vais sur l'APPLI :

https://iproject-demo.herokuapp.com/

je vois ce

enter image description here

Questions

Comment peut-on s'y prendre pour déboguer davantage ?

je suis ouvert à toute suggestion en ce moment.

tout conseil / suggestion / aide sur ce be sera très apprécié!

13
demandé sur kyo 2018-01-27 22:16:11

8 réponses

Voici comment je fais mon application angulaire à déployer et travailler sur Heroku:

  1. server.js devrait ressembler à quelque chose comme ceci: https://hastebin.com/zavehahide.js
  2. Dans votre package.json, déplacer @angular/cli et @angular/compiler-clidevDependenciesdependencies
  3. dans votre package.json, ajouter postinstall: ng build --prod et start: node server.jsscripts

vous devriez être prêt à partir.

7
répondu Chau Tran 2018-01-30 02:26:08

habituellement, lorsque cette erreur m'arrive, j'ai des problèmes avec les dépendances de noeuds. Essayez de supprimer le dossier node_modules, et dist dossier. À partir de là, tout recommencer, cela imite la façon dont heroku construira votre projet.

2
répondu Fernando Ania 2018-02-06 09:38:42

Dans votre server.js vous devez rediriger votre appel http vers l'index.

app.route('/*', function(req,res) {
  res.redirect(__dirname + '/dist/index.html')
})

dans ce qui précède, il redirigera tout appel vers votre index.HTML.

1
répondu Mike Tung 2018-01-27 19:26:15

corriger votre code dans le serveur.js

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(__dirname+'/dist'));

app.listen(process.env.PORT||8080);


//Path Location Strategy
app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname+'/dist/index.html'));
});

console.log('Console Listening');

Pour référence future -

essayez de courir logs commande avant d'appuyer sur L'URL.

$ heroku logs

puis vérifiez les journaux pour plus de détails.

1
répondu Fuad 2018-01-27 19:32:54

vous allez faire face à la mémoire dépasser le problème si vous allez construire prod sur heroku. Pour que free type ne fonctionne pas.

essayez donc de construire en local et de servir vos fichiers dist en utilisant express.

utilisez la même commande dans le fichier PROC

Heroku local ou Heroku local web: vérifiez vos changements en local

1
répondu Mrugank Dhimmar 2018-01-28 15:55:57

En réponse comment déboguer plus loin. Lancez votre application, puis tout de suite vous connecter à Heroku, allez à votre application, puis dans la liste déroulante "Plus", cliquez sur "Afficher les journaux". Devrait vous aider!

je crois qu'il y a un moyen de voir les live logs à travers le terminal aussi pour que vous puissiez voir exactement ce qui ne fonctionne pas.

1
répondu Si-N 2018-02-06 14:41:15

je suggère pour plus de simplicité, Si vous voulez déployer l'arrière-plan sur heroku comme api et le he front end sur github et activer le partage de ressources cross origin sur l'ordinateur de navigation, Je suis en train de construire une telle application, c'est mon plan sinon si vous recevez de bonnes nouvelles de cette façon que vous faites me mettre à jour

1
répondu Daouda 2018-04-16 12:01:52

Essayez d'ajouter @angular-devkit/build-optimizer comme un paquet dans le paquet.fichier json.

"dependencies": {
    "@angular-devkit/build-optimizer": "^0.4.0",
    ...
}

cela permet le drapeau post-install --aot exécuter. Pour une raison quelconque, ce paquet n'est plus intégré.

0
répondu Lauren 2018-02-20 01:36:29