Come configurare Nodo, Express e Angular2 correttamente

Question

Sto cercando di impostare un lavoro con nodo, Express, Angular2 (Database, - MongoDB o SQL)

ma non sono sicuro di come impostare correttamente in su combinato. La struttura del mio file è così sinora e intendo posizionare il front-end sotto la cartella pubblica.

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

Finora i miei miei server.js assomiglia a questo

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; 

miei test.js è dove mi occupo mie chiamate API sotto/api/test.

Ed è così che il mio package.json sembra, con uno script per il NPM, che avrà inizio il server con npm start E tutte le dipendenze richieste, che possono essere scaricati con 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" 
    } 
} 

Ora la mia domanda è come posso aggiungere Angular2 per funzionare correttamente in pubblico e così si avviano insieme allo npm start. Ho seguito il quickstart nel sito di documentazione di Angulars e ho notato che usano lite-server, ma che non dovrebbe essere necessario con node/express giusto? Come dovrebbe essere il mio package.json dopo l'aggiunta di Angular2. Ad esempio come questo:

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

se è ancora troppo presto con Angular2, allora ho la stessa domanda, ma con Angular1.X, o forse è meglio usare Angular2 con TS?

Answer 1

Ero curioso della stessa configurazione ed ero in grado di scrivere un semplice, utilizzando NG2 RC1, example su come eseguire NG2 su Express. L'installazione non è semplice rispetto a NG1 e la chiave di NG2 su Express sta facendo in modo che SystemJS sappia dove trovare le librerie

Ecco le cose fondamentali da considerare. Si noti che non è consigliabile esporre node_modules. Voglio che il mio esempio sia semplice in modo che l'attenzione possa essere facilmente posizionata sull'apprendimento dell'impostazione di base.

1. Esporre la posizione delle risorse statiche (index.html) e le dipendenze (node_modules)

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

2. Lasciate SystemJS sanno dove trovare le dipendenze

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

Answer 2

È possibile utilizzare a generator which will create the basic directories and files to get started In seguito qualsiasi database può essere utilizzato installando il proprio plug-in da npm.