web-dev-qa-db-fra.com

Comment servir une application angular2 sur un serveur node.js

Je construis une application Web en utilisant Angular2, pour créer le projet que j'utilise en utilisant Angular2 CLI Webpack. L'application Angular2 utilise également d'autres packages externes (par exemple: Firebase). En plus de cela, je dois créer une API REST s'exécutant sur node.js.

Comment puis-je servir à la fois l'application Angular2 et l'API REST à l'aide du serveur node.js?

node.jsangularangular2-cli
6
Yohan Jayasanka
  1. Utilisez ng build pour créer votre application dans le répertoire de construction.
  2. Créez l'application nodejs sur le répertoire de construction en tant que contenu statique, puis créez un itinéraire pour api.

Voici un exemple d’application nodejs utilisant Express qui servira l’application Angular2:

/*
Put content of angular2 build into 'public' folder.
*/
const html = __dirname + '/public';

const port = 4000;
const apiUrl = '/api';

// Express
const bodyParser = require('body-parser');
const compression = require('compression');
const express = require('express');
var app = express();

app
    .use(compression())
    .use(bodyParser.json())
    // Static content
    .use(express.static(html))
    // Start server
    .listen(port, function () {
        console.log('Port: ' + port);
        console.log('Html: ' + html);
    });

// continue with api code below ...
5
John Siu

Suivez le serveur de noeud Express avec Angular 2 CLI document pour servir votre application via le serveur Node.js. L'application est actuellement servie via Node.js et une API complète REST. Vous pouvez définir ce REST comme vos besoins.

Par exemple.

Servir l'application avec http: // localhost: 5000/app

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

ou 

Servir les données d'appels REST avec http: // localhost: 5000/rest/contacts 

app.get('/rest/user', function(req, res) {
    res.send({
        "id": 2,
        "name": "Jhon",
    })
});
1
NTN-JAVA

Basé sur la réponse @ NTN-Java, voici une solution pour servir une application Angular à partir du serveur NodeJS.

Voici le résumé du début:

  1. npm install -g @angular/cli

  2. ng new PROJECT_NAME

  3. cd PROJECT_NAME

  4. npm install nodemon express cookie-parser body-parser morgan method-override --save

5.Créez app.js:

var express = require('express');
var app = express();
var morgan = require('morgan');
var bodyParser = require('body-parser');
var port = process.env.PORT || 3000;
var methodOverride = require('method-override'); // simulate DELETE and PUT (express4)
var router = express.Router();

console.log('——————————- Run on port '+ port);

/****************************** Router ***************************/
router.get('*', function(req, res){
    res.sendFile('index.html', { root: __dirname + '/' });
});

/****************************** /Router ***************************/

//app.use(morgan('dev')); // log every request to the console
app.use(express.static(__dirname + '/')); // Static (public) folder

app.use(bodyParser.urlencoded({extended:true}));// get information from html forms
app.use(bodyParser.json());
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));
app.use(methodOverride());
app.use('/', router); // app.use('/parent', router); call all from localhost:port/parent/*

app.listen(port);

  1. Editer le fichier package.json:

    { ... "scripts": { "start": "ng build; cp app.js dist/app.js; node dist/app.js", } ... }

  2. npm start

Cette réponse offre également une solution pour appeler des URL directes depuis un navigateur et les résoudre correctement dans votre application.

0
Amro Shafie

Aucune des réponses n'a fonctionné correctement pour moi. Et si cela fonctionnait, le routage Angular ne fonctionnait pas lors du rechargement.
Donc voici comment je l'ai résolu. Le routage Angular fonctionne même lors du rechargement d'une page complète.

function getRoot(request, response) {
   response.sendFile(path.resolve('./public/angular/index.html'));
}

function getUndefined(request, response) {
   response.sendFile(path.resolve('./public/angular/index.html'));
}

// Note the dot at the beginning of the path
app.use(express.static('./public/angular'));

app.get('/', getRoot);
app.get('/*', getUndefined);

Pas de réécriture angulaire base-href est nécessaire! Utilisez simplement ng build ou ng build --prod.

0
btx