How to serve an angular2 app in a node.js server

Question

I\'m building a web app using Angular2, to create the project I\'m using Angular2 CLI webpack. Angular2 app uses other external packages also (Eg: Firebase). In addition to

Answer 1

Based on @NTN-JAVA answer, here's a solution to serve an Angular app from NodeJS server.

Here's the summary from beginning:

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.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. Edit 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 calling direct URLs from browser and resolving them correctly in your app.