如何構建一個Angular 2 + NodeJS Web App？

Question

我知道這非常簡單，但這是我第一次與nodejs合作。

我有一個Angular 2應用程序，並已安裝Angular CLI與我的應用程序一起工作。

我可以通過運行ng build成功構建客戶端。

因爲我已經加了server.js和服務器的文件夾（含API的路線），以我的應用程序的根目錄下運行nodejs後端：

當前文件夾結構

我可以通過運行ng build，然後運行node server，與本地客戶端一起運行服務器端。

運行ng build只生成客戶端並將其放入dist文件夾以備部署，但我如何執行相同的server.js和server文件夾並將其添加到dist文件夾，以便客戶端可以與服務器進行通信？

那裏有很多工具，比如Grunt，Gulp Webpack和Browserify，但我不知道從哪裏開始。

我知道package.json扮演我們的應用程序是如何配置的所以這裏是一個角色：

{ 
    "name": "Portfolio", 
    "version": "0.0.0", 
    "license": "MIT", 
    "angular-cli": {}, 
    "scripts": { 
    "build": "ng build && node server.js", 
    "ng": "ng", 
    "start": "ng serve", 
    "lint": "tslint \"src/**/*.ts\"", 
    "test": "ng test", 
    "pree2e": "webdriver-manager update --standalone false --gecko false", 
    "e2e": "protractor" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/common": "^2.4.8", 
    "@angular/compiler": "^2.4.8", 
    "@angular/core": "^2.4.8", 
    "@angular/forms": "^2.4.8", 
    "@angular/http": "^2.4.8", 
    "@angular/platform-browser": "^2.4.8", 
    "@angular/platform-browser-dynamic": "^2.4.8", 
    "@angular/router": "^3.4.8", 
    "angular2-google-maps": "^0.17.0", 
    "axios": "^0.15.3", 
    "body-parser": "^1.16.1", 
    "core-js": "^2.4.1", 
    "express": "^4.14.1", 
    "nodemailer": "^3.1.3", 
    "rxjs": "^5.2.0", 
    "ts-helpers": "^1.1.2", 
    "zone.js": "^0.7.7" 
    }, 
    "devDependencies": { 
    "@angular/compiler-cli": "^2.4.8", 
    "@types/core-js": "^0.9.35", 
    "@types/jasmine": "2.5.43", 
    "@types/node": "^7.0.5", 
    "angular-cli": "1.0.0-beta.28.3", 
    "codelyzer": "~2.0.1", 
    "grunt": "^1.0.1", 
    "grunt-cli": "^1.2.0", 
    "grunt-contrib-concat": "^1.0.1", 
    "grunt-contrib-cssmin": "^2.0.0", 
    "grunt-contrib-jshint": "^1.1.0", 
    "grunt-contrib-uglify": "^2.1.0", 
    "grunt-contrib-watch": "^1.0.0", 
    "grunt-ts": "^6.0.0-beta.11", 
    "jasmine-core": "2.5.2", 
    "jasmine-spec-reporter": "3.2.0", 
    "karma": "1.5.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.1.0", 
    "karma-remap-istanbul": "^0.6.0", 
    "protractor": "~5.1.1", 
    "ts-node": "2.1.0", 
    "tslint": "^4.4.2", 
    "typescript": "~2.2.1" 
    } 
} 

問題

• 如何建立我的服務器代碼，並將其捆綁到dist文件夾準備好部署？
• 實現此目的最常見的方法是什麼？

Answer 1

您的API和角2應用程序都應該是相互獨立的，你的API上運行本身，並通過您的角2應用聯繫的， 2點不同的展開時，他們不應該在同去建立。

Answer 2

您不需要將2放在同一文件夾中進行通信;請確保server.js對AngularJS的索引文件進行響應，以查找您尚未用於api的任何路由。 E.g：如果server.js是一邊收聽端口8080（根文件夾，即/server.js內）：

// /server.js 
var express = require("express"); 
var bodyParser = require("body-parser"); 
var path = require('path'); 

const appRoute = require("./routes/app"); // This route redirects all other requests to angular's index 

//View Engine 
app.set('view engine', "ejs"); 
app.engine("html", require('ejs').renderFile); 

app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({extended : true})); 

//Set static folder, since there are AngularJS resources 
app.use(express.static(path.join(__dirname, "dist"))); 

//app.get("/api/...", apiRoute....); Here you put routes for your api 
app.get('/*', appRoute.index); // This route redirects all other requests to angular's index 


const PORT = process.env.port || 8080; 
app.listen(PORT,() => { 
    console.log("Running on the port " +PORT); 
}); 

在appRoute（存儲在/routes/app.js）然後需要渲染/dist/index.html提供的，這是你的AngularJS索引文件。

// /routes/app.js 
var express = require("express"); 
var path = require('path'); 

exports.index = (req, res, next) => { 
    res.sendFile(path.join(__dirname + '/..', 'dist/index.html')); 
}; 

package.json可以指向您的節點服務器和AngularJS應用程序，但在server.js邏輯的啓動腳本將使鏈路與2個方面的應用，即server.js具有通過渲染/dist/index.html在某個時候作出迴應。如果你參考這個例子，請注意路徑。