How to setup Node, Express and Angular2 properly

Question

I am trying to set-up a workspace with Node, Express, Angular2 (Database,- MongoDB or SQL)

But I am not sure how to correctly set it up combined. My file structure looks like this so far, and I intend to put the front-end under the public folder.

── package.json
├── public
├── routes
│   └── test.js
├── server.js
└── views

So far my my server.js looks like this

var express = require('express');
var mysql = require('mysql');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var path = require('path');

var lel = require('./routes/test');

var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/api/', test);

app.use(function(req, res, next) {
    // error handling
});


var server = app.listen(3000, function() {
    // shows the connection etc
});

module.exports = app;

My test.js is where I handle my API calls under /api/test.

And this is how my package.json looks like, with a script for npm, that will start the server with npm start And all the required dependencies, that can be downloaded with npm install

{
  "name": "testing",
  "version": "0.1.0",
  "description": "-",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "-",
  "license": "-",
  "dependencies": {
    "body-parser": "^1.15.0",
    "cookie-parser": "^1.4.1",
    "ejs": "^2.4.1",
    "express": "^4.13.4",
    "morgan": "^1.7.0",
    "mysql": "^2.10.2",
    "path": "^0.12.7"
  }
}

Now my question is how do I add Angular2 to work properly under public and so they start up together at npm start. I have been following the quickstart at Angulars documentation site, and noticed they use lite-server, but that shouldn't be necessary with node/express right? How should my package.json look like after Angular2 is added. For example like this:

├── package.json
├── public
│   ├── app
│   │   ├── app.component.js
│   │   └── main.js
│   └── index.html
├── routes
│   └── test.js
├── server.js
└── views

If it is still too early with Angular2, then I have the same question but with Angular1.X, or perhaps is it better to use Angular2 with TS?

Solution 1

I was curious about the same setup and was able to write a simple, using NG2 RC1, example on how to run NG2 on Express. Setup is not straightforward compared to NG1 and the key to NG2 on Express is making sure SystemJS knows where to find the libraries

Here are the key things that you should look into. Please note that it is not recommended to expose node_modules. I want my example to be simple so focus can be easily placed on learning basic setup.

1. Expose the location of static resources (index.html) and dependencies (node_modules)

app.use(express.static(rootPath + '/client/app'))
app.use('/node_modules', express.static(rootPath + '/node_modules'));

2. Let SystemJS know where to find dependencies

System.config({
    map: {
        "@angular": "node_modules/@angular",
        "rxjs": "node_modules/rxjs"
    },
    packages: {
        '/': {
            //format: 'register',
            defaultExtension: 'js'
        },
        'node_modules/@angular/http': {
            //format: 'cjs',
            defaultExtension: 'js',
            main: 'http.js'
        },
        'node_modules/@angular/core': {
            //format: 'cjs',
            defaultExtension: 'js',
            main: 'index.js'
        },
        'node_modules/@angular/router': {
            //format: 'cjs',
            defaultExtension: 'js',
            main: 'index.js'
        },
        'node_modules/@angular/router-deprecated': {
            //format: 'cjs',
            defaultExtension: 'js',
            main: 'index.js'
        },
        'node_modules/@angular/platform-browser-dynamic': {
            //format: 'cjs',
            defaultExtension: 'js',
            main: 'index.js'
        },
        'node_modules/@angular/platform-browser': {
            //format: 'cjs',
            defaultExtension: 'js',
            main: 'index.js'
        },
        'node_modules/@angular/compiler': {
            //format: 'cjs',
            defaultExtension: 'js',
            main: 'compiler.js'
        },
        'node_modules/@angular/common': {
            //format: 'cjs',
            defaultExtension: 'js',
            main: 'index.js'
        },
        'rxjs' : {
            defaultExtension: 'js'
        }
    }
});
System.import('./main').then(null, console.error.bind(console));

Please have a look at my example on GitHub

Solution 2

You can use a generator which will create the basic directories and files to get started Later any database can be used by installing its plugin from npm.

Comments

[Paul G]

That links to angular-express boilerplate -- is there any good source for angular2-express starters?