如何正确设置Node,Express和Angular2

我正在尝试使用Node,Express,Angular2(数据库,MongoDB或SQL)设置工作区,

但我不知道如何正确设置它的组合。 我的文件结构看起来像这样到目前为止,我打算把公共文件夹的前端。

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

到目前为止,我的server.js看起来像这样

 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; 

我的test.js是我在/ api / test下处理我的API调用的地方。

这就是我的package.json,看起来像一个npm脚本,用npm start启动服务器。所有必需的依赖关系,可以用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" } } 

现在我的问题是如何添加Angular2在公共下正常工作,所以他们在npm start一起npm start 。 我一直在关注Angulars文档站点的快速入门,并注意到他们使用lite-server,但这不应该是必要的节点/expression权? 添加Angular2后,我的package.json应该如何? 比如像这样:

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

如果Angular2还为时过早,那么我有和Angular1.X一样的问题,或者使用Angular2和TS更好?

我很好奇同样的设置,并能够写一个简单的,使用NG2 RC1, 例如如何在Express上运行NG2。 与NG1相比,安装并不简单,Express上的NG2的关键在于确保SystemJS知道在哪里find库

以下是您应该关注的关键事项。 请注意,不build议公开node_modules。 我想我的例子很简单,所以可以轻松地把重点放在学习基本设置。

  1. 公开静态资源(index.html)和依赖项(node_modules)的位置
 app.use(express.static(rootPath + '/client/app')) app.use('/node_modules', express.static(rootPath + '/node_modules')); 
  1. 让SystemJS知道在哪里find依赖关系
 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)); 

请看我在GitHub上的例子

你可以使用一个生成器来创build基本的目录和文件来启动。稍后可以通过从npm安装它的插件来使用任何数据库。