How to service angular2 application on node.js server

Question

I am creating a web application using Angular2 to create a project that I am using Angular2 CLI webpack. The Angular2 application also uses other external packages (for example: Firebase). In addition to this, I need to create a REST API running on node.js

How can I serve both Angular2 and REST API applications using node.js server

Answer 1

• Use ng build to create your application in the build directory.
• Create a nodejs application to create the assembly directory as static content, then create a route for the api.

The following is an example nodejs application using an expression that will serve the Angular2 application:

 /* 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 ... 

Answer 2

Follow the Express node server with the Angular 2 CLI to serve your application through the Node.js server. The application is served through Node.js and the full REST API. You can design this REST as your requirements.

eg.

Apply with http: // localhost: 5000 / app

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

or

Serve data from REST calls using http: // localhost: 5000 / rest / contacts

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

Answer 3

Based on @ NTN-JAVA's answer, here is a solution for serving an Angular application from a NodeJS server.

Here's a summary:

• npm install -g @angular/cli

• ng new PROJECT_NAME

• cd PROJECT_NAME

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

5.Create 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); 

6. Change package.json file:

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

7. npm start

This answer also offers a solution for directly calling URLs from a browser and resolving them correctly in your application.