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自己运行，并由你的Angular 2应用程序联系， 2种不同的部署，它们不应该采用相同的构建。

Answer 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）中，您需要呈现/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在某些时候做出回应。如果您参考此示例，请注意路径。

如何构建Angular 2 + NodeJS Web App？

2 个答案: