Làm thế nào để cài đặt Node, Express và Angular2 đúng

Question

Tôi cố gắng để thiết lập một không gian làm việc với Node, Express, Angular2 (Cơ sở dữ liệu, - MongoDB hoặc SQL)

Nhưng tôi không chắc chắn làm thế nào để thiết lập một cách chính xác nó lên kết hợp. Cấu trúc tập tin của tôi trông như thế này cho đến nay, và tôi dự định đặt front-end dưới thư mục công cộng.

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

Cho đến nay tôi server.js tôi trông như thế này

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; 

My test.js là nơi tôi xử lý các cuộc gọi API của tôi dưới/api/kiểm tra.

Và đây là cách của tôi package.json vẻ như, với một kịch bản cho NPM, mà sẽ khởi động server với npm start Và tất cả các phụ thuộc yêu cầu, có thể được tải với 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" 
    } 
} 

Bây giờ câu hỏi của tôi là làm thế nào để tôi thêm Angular2 để hoạt động đúng theo công chúng và vì vậy họ bắt đầu với nhau tại npm start. Tôi đã theo dõi nhanh tại trang tài liệu Angulars, và nhận thấy họ sử dụng lite-server, nhưng điều đó không cần thiết với nút/express phải không? Làm thế nào nên package.json của tôi trông giống như sau khi Angular2 được thêm vào. Ví dụ như thế này:

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

Nếu vẫn còn quá sớm với Angular2, thì tôi có cùng câu hỏi nhưng với Angular1.X, hoặc có lẽ tốt hơn nên sử dụng Angular2 với TS?

Answer 1

Tôi đã tò mò về cùng một thiết lập và có thể viết đơn giản, sử dụng NG2 RC1, example về cách chạy NG2 trên Express. Thiết lập không đơn giản so với NG1 và khóa để NG2 trên Express là đảm bảo SystemJS biết nơi để tìm các thư viện

Dưới đây là những điều quan trọng mà bạn nên xem xét. Xin lưu ý rằng không nên để lộ node_modules. Tôi muốn ví dụ của tôi đơn giản để tập trung có thể dễ dàng đặt vào việc học thiết lập cơ bản.

1. Expose vị trí của các tài nguyên tĩnh (index.html) và phụ thuộc (node_modules)

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

2. Hãy SystemJS biết nơi để tìm thấy sự phụ thuộc

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

Bạn có thể sử dụng a generator which will create the basic directories and files to get started Sau đó, mọi cơ sở dữ liệu có thể được sử dụng bằng cách cài đặt plugin của nó từ npm.