如何正确设置 Node、Express 和 Angular2答案

【问题标题】：How to setup Node, Express and Angular2 properly如何正确设置 Node、Express 和 Angular2
【发布时间】：2016-07-07 22:00:46
【问题描述】：

我正在尝试使用 Node、Express、Angular2（数据库、MongoDB 或 SQL）设置工作区

但我不确定如何正确设置它。到目前为止我的文件结构是这样的，我打算把前端放在public文件夹下。

── 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 一起使用更好？

【问题讨论】：

看看这个 github repo：github.com/auth0/angular2-authentication-sample
我使用 bower 在我的项目文件夹中安装了 angularjs v1.52。我在项目文件夹 npm install -g bower ， bower install angularjs 中执行了以下命令
嗨，Sigils，如果有您遵循的任何文档进行设置，您能否分享一下。我刚刚踏入这个领域并正在寻找一个

标签： javascript angularjs node.js angular

【解决方案1】：

您可以使用a generator which will create the basic directories and files to get started 以后可以通过从 npm 安装其插件来使用任何数据库。

【讨论】：

链接到 angular-express 样板——有没有 angular2-express 初学者的好资源？

【解决方案2】：

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

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

公开静态资源 (index.html) 和依赖项 (node_modules) 的位置

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

让 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));

Please have a look at my example on GitHub

【讨论】：