Angular 2 cli with Express js
this link works for me, but with some changes.
I install angular-cli and create new project, then I follow the tutorial of the link but with this changes:
- I create a folder called node_server
- In run npm install express --save in root folder of my project. This add server like dependencie in your package.json without create new on node_server.
- I create a new file in node_server called server.js, with a basic express server. This server only returns the index.html of dist folder.
- Added the scripts to the package.json, the scripts are the same in the link tutorial, but with one change, the filename is server.js not index.js
This is my server.js file :
const express = require('express');var app = express(); var staticRoot = __dirname; app.set('port', (process.env.PORT || 3000)); app.use(express.static(staticRoot));app.get('/', function(req, res) { res.sendFile('index.html');});app.listen(app.get('port'), function() { console.log('app running on port', app.get('port'));});
I hope this works for you.
The above comment worked pretty well for me,just needed to make some adjustments to the scripts in package.json suggested in that link.
"build:nodeserver": "ng build && cp node-server/* dist",
"build:nodeserver-prod": "ng build -prod && cp node-server/* dist",
"serve-build" : "npm run build:nodeserver && nodemon dist/index.js",
"serve-build-prod": "npm run build:nodeserver-prod && nodemon dist/index.js"
I have a folder called node-serverwhich has my server.js file like above with routes for angular2 app as above,and some api routes in there too, and some other folders in the node-server like mysql-requests and some files like config.json file
What I do create 2 folder on is your express server (I am using Express-generator) and 1 is Angular 2 project (Angular cli )
root folder
--->server
--->ng4
---> gulpfile.js
gulp will build your app and move build files
var gulp = require('gulp')var rename = require("gulp-rename");var deletefile = require('gulp-delete-file');var exec = require('child_process').exec;var runSequence = require('run-sequence');gulp.task('build', function (cb) { exec('cd ng4/ && ng build', function (err, stdout, stderr) { cb(err); });})gulp.task('rename', () => { return gulp.src("./ng4/dist/index.html") .pipe(rename("ng4.html")) .pipe(gulp.dest("./server/views"));})gulp.task('deletefile', function () { var regexp = /\w*(\-\w{8}\.js){1}$|\w*(\-\w{8}\.html){1}$/; gulp.src(['./server/public/index.html', './ng4/dist/**/*.*']) .pipe(deletefile({reg: regexp,deleteMatch: false}));});gulp.task('move', function () { return gulp.src(["./ng4/dist/**/*.*"]) .pipe(gulp.dest("./server/public"));});gulp.task('default', function(callback) { runSequence('build','rename','move','deletefile',callback) });
In this way you can developed in ng4 app and run gulp command on root .