在同一个端口上同时运行 Angular Web App 和 NodeJS 服务器？

Question

我使用 Yeoman 设置了一个基本的 angularjs Web 应用程序，我使用 Grunt 构建和运行该应用程序，并且我制作了一个基本的 nodejs 服务器，其中包含一些 angular 应用程序用来获取数据的端点。

但是我想在同一个端口上运行 Angular 应用程序和节点服务器，有没有什么方法可以在不使用 grunt serve 或 grunt serve:dist 的情况下从我的节点服务器提供 Angular 应用程序？在从节点服务器提供之前，我是否仍然能够缩小我的 Angular 应用程序？

说明： 例如如果我去http://localhost/，它应该服务于角度应用程序，但是，如果我去http://localhost/api/xyz，它应该服务于节点端点。

Answer 1

您可以执行以下操作。 文件夹结构

/
 /public
  /dist
   index.html
 /models
 /controllers
 server.js

server.js 是正常的 nodejs 服务器启动文件。
public/dist 文件夹是 Angular 的内置输出（由 ng build 提供）

在 server.js 文件中，首先定义所有 api 路由器，然后添加 * 路由以发送 index.html 文件

// Set our api routes
app.use('/api', api);     // <- define api end point

// Catch all other routes and return the index file
app.get('*', function(req, res) {
   res.sendFile(path.join(__dirname, 'dist/index.html'));
});

我在这里做的是，如果 url 类似于 http://localhost/api/xyz 那么它将在 api 路由器中命中。如果 url 不是 /api，它会将 index.html 文件发送到客户端。

注意：在浏览器中，您应该导航到 http://localhost/ 之类的内容，而不是 http://locahlost/api。通过 Angular 应用程序，您应该处理（重定向）未命中的路由器输入。

我想你明白了我的意思。如果您需要更多示例，请联系我，我会给您我的代码示例。

Answer 2

但是我想在同一个端口上运行 Angular 应用程序和节点服务器，是否有某种方法可以在不使用 grunt serve 或 grunt serve:dist 的情况下从我的节点服务器提供 Angular 应用程序？

您需要确保您是serving your angular app statically。

如果我转到http://localhost/，它应该服务于角度应用程序，但是，如果我转到http://localhost/api/xyz，它应该服务于节点端点

要在同一台快速服务器上同时支持您的 API 和 Angular 应用程序，您应该使用 Router Middleware 将您的 Angular 应用程序与 API 分开。看看下面server.js 和/routes/api.js 和/routes/api/xyz.js 中的路由是如何构造的。

在从节点服务器提供 Angular 应用程序之前，我是否仍然能够缩小它？

是的，只需将缩小的 Angular 代码放入 /public/app 并将其设置为包含在您的 html 中。

示例布局

下面的代码是一个示例布局，展示了如何在同一个 express 实例中托管 API 的同时为您的 Angular 应用程序提供服务。

项目目录结构

/
  /public 
    /app
    /css
  /views
    index.html
  /routes
    api.js
    /api
      xyz.js
  server.js

server.js

var express = require('express');
var path = require('path');
var server = express();

// Check to see if ENV Variable PORT  is set, defaults to 1337
var port = process.env.PORT || 1337;
var apiRoutes = require('./routes/api.js');

// Sets up our view engine to load
server.set('views', path.join(__dirname, 'views'));
server.engine('html', require('ejs').renderFile);
server.set('view engine', 'html');

// This will serve anything with in /public as a static file
server.use(express.static(path.join(__dirname, 'public')));

// Creates /api section of site
// apiRoutes is an Express.Router() instance and contains
// all /api sub routes (ie. /api/xyz)
server.use('/api', apiRoutes);

// Send views/index.html to the client
// this contains the landing page for the angular app
server.get('/', function(req, res) {
  res.render('index');
});

// Listen for connections
server.listen(port, function() {
  console.log('Listening on ' + port);
});

/routes/api.js

var router = require('express').Router();
var xyzRouter = require('./api/xyz');

router.use('/xyz', xyzRouter);

module.exports = router;

/routes/api/xyz.js

var router = require('express').Router();

router.get('/', function(req, res) {
  // handle GET /api/xyz
});

module.exports = router;