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

Question

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

mes angulaires 4 et nodejs srtucture ressemblent à ce

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

dans app.js I 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 lance à l'aide nodemon app.js et aller à localhost:3000 courir mon application angulaire et il est très bien et que je vais à localhost:3000/app/api ça fonctionne aussi bien et bon,

Mais quand je change dans l'application angulaire, il est pas d'actualisation automatique de mon application, car il est en cours d'exécution application de nœud actuellement pour le rafraîchir, je dois courir ng build et que cela affectera mes nouveaux changements sur l'application angulaire

donc, ce que je veux est d'exécuter ng serve --open il fonctionnera application angulaire mais pas noeud api js si vous voulez exécuter les deux et une fois que je change dans l'application angulaire ou l'application js noeud, il doit être l'actualisation automatique.

Answer 1

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

Il existe deux solutions possibles.

1. Utilisez votre application de noeud pour traiter les fichiers frontend statiques. Ensuite, vous ne pouvez pas vraiment utiliser ng serve (c'est probablement ce que vous feriez en cours d'exécution en direct). Utilisez nodejs avec un port différent, et utilisez la config de proxy d'Angular, pour qu'Angular pense que le port API est en fait 4200 (c'est probablement le meilleur pendant le développement).

Ceci est principalement une préoccupation au cours du développement, je pense, puisque vous l'habitude le plus probable (et ne devrait pas) utiliser ng serve en direct, si l'option 2 serait ma meilleure recommandation.

Pour configurer un proxy, vous créez un fichier dans votre application angulaire répertoire racine 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 exécutez avec ng serve --proxy-config proxy.config.json à la place.

Here's a link to the documentation

---

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

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