Javascript 如何构建角度2+；NodeJS网络应用程序？

我知道这很简单，但这是我第一次使用

nodejs

我有一个带有的

Angular 2

应用程序，并且安装了

Angular CLI

用于使用我的应用程序

我可以通过运行

ng build

成功构建客户端

此后，我在我的应用程序根目录中添加了server.js和server文件夹（包含api路由），以运行

nodejs

后端：

当前文件夹结构

我可以通过运行

ng build

然后运行

node server

在本地运行服务器端和客户端

运行

ng build

只会构建客户端并将其放入准备部署的

dist

文件夹中，但是如何才能对server.js和server文件夹执行相同的操作并将其添加到dist文件夹中，以便客户端可以与服务器通信

有很多工具，比如Grunt、GulpWebpack和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文件夹中，以便部署
• 实现这一目标最常用的方法是什么

---

您的API和angular 2应用程序应该相互独立，您的API在自身上运行，并由angular 2应用程序联系，

---

2个不同的部署，它们不应该在同一个构建中。

您不需要将2个部署放在同一个文件夹中，以便它们通信；确保

server.js

使用AngularJS的索引文件响应您未用于api的任何路由。例如：如果

server.js

（在根文件夹中，即

/server.js

）正在端口8080上侦听：

// /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

）中，如果这是AngularJS索引文件，则需要呈现

/dist/index.html

// /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

中的逻辑将与应用程序的两个前端建立链接，即

server.js

必须在某个点通过呈现

/dist/index.html

做出响应。如果您参考此示例，请注意路径。

对不起，我的意思是“构建”，将服务器代码与客户端一起放入dist文件夹中