Wie Setup-Knoten, Express und Angular2 richtig

Question

ich Setup versuchen einen Arbeitsbereich mit Knoten, Express, Angular2 (Datenbank, - MongoDB oder SQL)

Aber ich bin nicht sicher, wie es richtig einzurichten kombiniert. Meine Dateistruktur sieht soweit so aus, und ich beabsichtige, das Frontend unter den öffentlichen Ordner zu legen.

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

Bisher meine meine server.js sieht aus wie dieses

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; 

Mein test.js ist, wo ich meine API-Aufrufe unter/api/Test behandeln.

Und das ist, wie mein package.json aussieht, mit einem Skript für NPM, die den Server mit npm start Und alle erforderlichen Abhängigkeiten beginnen wird, die nun mit 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" 
    } 
} 

heruntergeladen werden kann meine Frage ist, wie ich Angular2 hinzufügen, um ordnungsgemäß unter Öffentlichkeit zu arbeiten, und so beginnen sie zusammen bei npm start. Ich habe den Quickstart auf der Angulars-Dokumentationsseite verfolgt und festgestellt, dass sie Lite-Server verwenden, aber das sollte mit Node/Express nicht notwendig sein, oder? Wie sollte mein package.json aussehen, nachdem Angular2 hinzugefügt wurde. Zum Beispiel wie folgt aus:

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

Wenn es noch zu früh mit Angular2 ist, dann habe ich die gleiche Frage, aber mit Angular1.X, oder vielleicht ist es besser, zu verwenden Angular2 mit TS?

Answer 1

Ich war neugierig auf die gleiche Einrichtung und war in der Lage, eine einfache, mit NG2 RC1, example auf, wie man NG2 auf Express laufen zu schreiben. Das Setup ist im Vergleich zu NG1 nicht einfach und der Schlüssel zu NG2 on Express ist, dass SystemJS weiß, wo die Bibliotheken zu finden sind.

Hier sind die wichtigsten Dinge, die Sie untersuchen sollten. Bitte beachten Sie, dass es nicht empfohlen wird, node_modules verfügbar zu machen. Ich möchte, dass mein Beispiel so einfach ist, dass der Fokus einfach auf das Erlernen der Grundeinstellungen gelegt werden kann.

1. Expose den Standort der statischen Ressourcen (index.html) und Abhängigkeiten (node_modules)

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

2. SystemJS wissen lassen, wo Abhängigkeiten finden

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

Sie können a generator which will create the basic directories and files to get started verwenden Später kann jede Datenbank verwendet werden, indem Sie ihr Plugin von Npm installieren.