Angular 2 + NodeJS Web Appの構築方法は？

Question

これは実際に私が知っているシンプルですが、これは初めてnodejsで作業しています。

私はAngular 2アプリを持っていて、私のアプリを操作するためにAngular CLIがインストールされています。

ng buildを実行してクライアント側を正常に構築できます。私は以来、nodejsバックエンドを実行するために、私のアプリのルートにserver.jsとサーバのフォルダ（APIルートを含む）を追加した

：

現在のフォルダ構造

ng buildを実行し、次にnode serverを実行して、クライアントと一緒にサーバー側をローカルで実行できます。

ng buildを実行すると、クライアント側が構築され、distフォルダに配置されますが、同じserver.jsとserverフォルダを作成してdistフォルダに追加するとクライアントがサーバと通信できるようになります？

Grunt、Gulp Webpack、Browserifyなど、多くのツールがありますが、どこから始めたらいいかわかりません。

{ 
    "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" 
    } 
} 

質問私は私のサーバーコードをビルドしてにそれをバンドルすることができますどのように

• ：

  私はpackage.jsonは、我々のアプリは、それがあるので、ここで設定されている方法で役割を果たしていることを知っていますdistフォルダは展開の準備ができていますか？

• これを達成する最も一般的な方法は何ですか？

Answer 1

あなたのAPIとあなたの角度の2アプリは、あなたのAPIは、それ自体で実行され、あなたの角度2アプリ、 2異なるが展開により接触された場合、彼らは同じでは行ってはならない、互いに独立することになっていますビルド。

Answer 2

2つを同じフォルダに入れて通信する必要はありません。 server.jsがあなたのapiに使用していないルートについてAngularJSのインデックスファイルで応答するようにしてください。例えば：あなたは、これはあなたのAngularJSインデックスファイルで提供さ/dist/index.htmlをレンダリングする必要がappRouteで

// /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); 
}); 

（/routes/app.jsで保存）：server.js場合はポート8080上をlistenningされる（ルートフォルダ、すなわち/server.js以内）。

// /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をレンダリングすることにより、いくつかの点で対応しなければならないでしょう。この例を参照する場合は、パスを注意してください。