web-dev-qa-db-fra.com

comment exécuter angular 4 app et nodejs api sur le même port 4200 pour la production et le développement?

J'ai créé angular 4 et je peux l'exécuter à l'aide de ng serve --open et il fonctionne sur localhost:4200, ce que je veux, c'est que j'ai également créé une API en utilisant nodejs dans le même projet angular maintenant je veux exécuter cette API à localhost:4200/api donc j'ai essayé quelque chose comme ça

ma angular 4 et la structure de nodejs ressemblent à ceci

/dist
/server
  /routes
  /server
/src
app.js
package.json

dans app.js j'ai utilisé

app.use(express.static(path.join(__dirname, 'dist')));
app.use('/app/api', apiRoutes);
const port = process.env.PORT || '3000';
server.listen(port, () => console.log(`API running on localhost:${port}`));

Une fois que je cours en utilisant nodemon app.js et allez à localhost:3000 il exécute mon angular et ça va et que je vais à localhost:3000/app/api ça marche aussi bien et bien,

Mais lorsque je change dans angular angulaire, ce n'est pas l'actualisation automatique de mon application, car elle exécute actuellement l'application de nœud pour l'actualiser, je dois exécuter ng build et que cela affectera mes nouvelles modifications sur angular app

Donc, ce que je veux, c'est exécuter ng serve --open il exécutera angular angulaire mais pas l'api js du nœud, je veux donc exécuter les deux et une fois que je changerai de angular angulaire ou application node js, il doit être rafraîchissement automatique.

node.jsangularmean-stack
8
kumbhanibhavesh

Vous ne pouvez pas avoir deux applications différentes en cours d'exécution sur le même port. Angular-cli utilise un serveur nodejs (techniquement c'est webpack-dev-server) dans les coulisses lorsque vous exécutez ng serve, Ce qui signifie que le port est déjà utilisé.

Il y a deux solutions possibles.

  1. Utilisez votre application de nœud pour servir les fichiers frontaux statiques. Ensuite, vous ne pouvez pas vraiment utiliser ng serve (C'est probablement ce que vous feriez lorsque vous exécutez en direct).

  2. Utilisez nodejs avec un port différent et utilisez la configuration proxy d'Angular pour avoir Angular pense que le port api est en fait 4200 (c'est probablement le meilleur pendant le développement).

C'est principalement une préoccupation pendant le développement, je pense, car vous n'utiliserez probablement pas (et ne devriez pas) utiliser ng serve En direct, donc l'option 2 serait ma meilleure recommandation.

Pour configurer un proxy, vous créez un fichier dans votre angular de l'application appelé proxy.config.json Avec le contenu suivant:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

Ensuite, lorsque vous exécutez ng serve, Vous l'exécutez avec ng serve --proxy-config proxy.config.json À la place.

Voici un lien vers la documentation

Voici une alternative lors de la construction pour la production (solution 1 ci-dessus):

Pour construire en production, vous utilisez ng build --prod Pour créer une production prête Angular build puis (en supposant que vous utilisez Express sur votre serveur de noeud), utilisez quelque chose comme app.use(express.static('dist/')) comme expliqué dans la documentation Express . Je n'utilise pas de nœud moi-même (j'utilise .NET Core) donc j'ai peur de ne pas pouvoir fournir beaucoup plus en termes de détails.

15
Nikolaj Dam Larsen

1.premier build vous angular 6 application exécutez ng build --watch

2. depuis l'application nodejs, écrivez ce middleware app.use(express.static(path.join(__dirname, './client/dist/client'))); comme le dossier pointant vers client/dist/client est le dossier de construction de angular 6 app.

puis exécutez nodemon --inspect app.js

assurez-vous d'avoir une recherche de dossiers comme celui-ci

/myproject /client /dist /client /.... /index.html /app.js /.....

écoutez le port que vous souhaitez exécuter depuis app.js et exécutez localhost: portno

j'espère que cela t'aides

1
vishu handa

Il y a un blog génial sur médium par Daniel Kagan qui explique tout, voici le lien. Déploiement à chaud son explication sur le déploiement à chaud du client j'ai ajouté un peu plus de code pour effectuer le déploiement à chaud du client et du serveur.

Cette réponse est purement pour le rechargement à chaud de développement

Première étape.

Installez simultanément et nodemon

npm i simultanément

npm i nodemon

Vous pouvez également installer globalement avec le drapeau -g

Deuxième étape.

Ouvrez le fichier packages.json de votre serveur et ajoutez-y les quatre lignes suivantes. Remarque J'ai mon code angular dans le dossier client, donc je l'ai fait client cd 

"buildclient": "cd client && ng build",
"runclient": "cd client && npm start",
"devstart": "nodemon --inspect ./bin/www",
"dev": "npm run buildclient & concurrently --kill-others \"npm run runclient\" \"npm run devstart\""

Si vous ne voulez pas inspecter l'application de nœud, supprimez le drapeau --inspect.

Troisième étape.

Accédez à votre angular et créez un fichier proxy.conf.json ajoutez ligne suivante au fichier.

 {
   "/api/*": {
   "target": "http://localhost:3000",
   "secure": false,
   "changeOrigin": true
 }
 }

Quatrième étape.

Ajouter la commande suivante dans le fichier package.json d'angular

"start": "ng serve --proxy-config proxy.conf.json"

Cinquième étape.

Faites angular créer le répertoire de sortie dans le dossier public du serveur. Pour ce faire, allez dans angular.json, changez build outputPath en ../public En suivant l'extrait JSON.

"options": {
        "outputPath": "../public",
        "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"
        ],
        "scripts": []
      },

Sixième étape.

Assurez-vous que le fichier app.js de votre serveur express node lit les fichiers statiques à partir du dossier public.

app.use(express.static(path.join(__dirname, 'public')));

Étape sept.

npm run dev

Fait goto http: // localhost: 42 vous pouvez voir votre application là-bas :) tous les appels à/api arriveront au serveur express de noeud.

Toutes les modifications apportées au serveur ou au client seront déployées à chaud automatiquement.

[~ # ~] note [~ # ~] J'ai utilisé Générateur d'applications express pour créer mon serveur et CLI angulaire pour créer angular angulaire. Si vous l'avez fait d'une autre manière, certains fichiers pourraient ne pas être présents

1
Gaurav Joshi