如何正确设置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我一直在关注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,或者将TS结合使用Angular2更好?

CoolHandDev

我对相同的设置感到好奇,并且能够使用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'));
  1. 让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上的示例

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章