How to serve an angular2 app in a node.js server
Solution 1
- Use
ng build
to build your app into build directory. - Create nodejs app to server the build directory as static content, then create route for api.
Following is an example of nodejs app using express that will serve the Angular2 app:
/*
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))
// Default route
.use(function(req, res) {
res.sendFile(html + 'index.html');
})
// Start server
.listen(port, function () {
console.log('Port: ' + port);
console.log('Html: ' + html);
});
// continue with api code below ...
Solution 2
None of the answers worked properly for me. And if it worked, the Angular routing did not work on reload.
So this is how I solved it. Angular routing works even on full page reload.
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);
NO angular base-href rewrite is required! Just use
ng build
orng build --prod
.
Solution 3
Here is full back end code which is working
const express = require('express');
var app = express();
var port = 9999;
function getRoot(request, response) {
response.sendFile(path.resolve('./public/angular/index.html'));
}
function getUndefined(request, response) {
response.sendFile(path.resolve('./public/angular/index.html'));
}
app.use(express.static('./public/angular'));
app.get('/', getRoot);
app.get('/*', getUndefined);
// Start server
app.listen(port, function () {
console.log('server running at port: ' + port);
});
Solution 4
Based on @NTN-JAVA answer, here's a solution to serve an Angular app from NodeJS server.
Here's the summary from beginning:
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);
- Edit
package.json
file:
{
...
"scripts": {
"start": "ng build; cp app.js dist/app.js; node dist/app.js",
}
...
}
- Run
npm start
This answer also offers a solution for calling direct URLs from browser and resolving them correctly in your app.
Solution 5
Step 1: In order to get static content, run this command in your angular app directory -
ng build --prod
Step 2: The first step will create a dist folder in your current directory, move all files in the dist folder to public folder of your node app -
Step 3: Create a node server. App.js -
var path = require('path');
var express = require('express');
var cookieParser = require('cookie-parser');
var cookieParser = require('cookie-parser');
const allowedExt = [
'.js',
'.ico',
'.css',
'.png',
'.jpg',
'.woff2',
'.woff',
'.ttf',
'.svg',
];
var app = express();
app.use(cookieParser());
function getAngularApp(request, response) {
response.sendFile(path.resolve('./public/index.html'));
}
function defaultHandler(request, response) {
if (allowedExt.filter(ext => req.url.indexOf(ext) > 0).length > 0) {
response.sendFile(path.resolve(`public/${req.url}`));
} else {
response.sendFile(path.resolve('./public/index.html'));
}
}
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', getAngularApp);
app.get('/*', defaultHandler);
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
![YohanK](https://i.stack.imgur.com/RSeVN.jpg?s=256&g=1)
YohanK
Updated on April 18, 2021Comments
-
YohanK about 3 years
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 that, I need to create a REST API running on node.js
How can I serve both of Angular2 app and REST API using node.js server
-
YohanK over 7 yearsYes, possible solution is rendering the index.html in build directory as static content. If there are routing it the angular2 app, it can be navigated through links in the page, but can't by changing the browser url
-
John Siu over 7 years@yohan it is possible to handle angular2 routing by adding custom static route pointing to the index page in the nodejs app.
-
John Siu over 7 years@yohan I think the base href is automatically added when ng2 cli generate the project.
-
YohanK over 7 yearsThis is also serving angular2 app as a static content, the matter is, we can't navigate in the app routes by changing url
-
Nat4j over 7 yearsOff-course u can navigate through url, since the entire application is loaded by index.html. check with angular-cli 1.0.0.19
-
YohanK over 7 yearswe can specify it by
ng build --base-href /myUrl/
when building. Even if it is corrected we can't navigate by changing url in the browser. -
Camille about 5 yearsWorks well! Thanks a lot! Only need to change starts in
package.json
->"scripts": {"start": "ng build && cp app.js dist/app.js && node dist/app.js"}
. Note for windows"scripts": {"start": "ng build &&
copyapp.js dist/app.js && node dist/app.js"}
-
Camille about 5 years@Yohan To allow support of browser url, simply add this
.use(function(req, res) { res.sendFile(html + 'index.html'); })
-
Maddy over 4 yearsfrom next time please comment full code or provide an online link where whole code is structured
-
btx over 4 years@Maddy There is no need to post a full stack example on a node.js specific question, especially in this simple case. The basic node setup can be obtained from the docs.