如何正确设置Node,Express和Angular2

Question

我正在尝试使用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.我一直关注Angulars文档站点上的快速入门,并注意到他们使用的是lite-server,但是对于node/express来说这不是必需的吗？添加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更好？

Answer 1

我对相同的设置感到好奇，并且能够使用 NG2 RC1 编写一个简单的示例，了解如何在 Express 上运行 NG2。与 NG1 相比，设置并不简单，Express 上的 NG2 的关键是确保 SystemJS 知道在哪里可以找到库

以下是您应该研究的关键事项。请注意，不建议公开node_modules。我希望我的示例简单一些，以便可以轻松地将重点放在学习基本设置上。

1. 公开静态资源（index.html）和依赖项（node_modules）的位置

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

2. 让 SystemJS 知道在哪里可以找到依赖项

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 上的示例