node.js - 如何在 node.js 服务器中提供 angular2 应用程序

Question

我正在使用 Angular2 构建一个 Web 应用程序，以创建我正在使用 Angular2 CLI webpack 的项目。Angular2 应用程序也使用其他外部包（例如：Firebase）。除此之外，我需要创建一个在 node.js 上运行的 REST API

如何使用 node.js 服务器同时提供 Angular2 应用程序和 REST API

Answer 1

1. 用于ng build将您的应用程序构建到构建目录中。
2. 创建 nodejs 应用程序以将构建目录作为静态内容提供服务，然后为 api 创建路由。

以下是使用 express 的 nodejs 应用程序示例，它将为 Angular2 应用程序提供服务：

/*
Put content of angular2 build into 'public' folder.
*/
const html = __dirname + '/public';

const port = 4000;
const apiUrl = '/api';

// Express
const bodyParser = require('body-parser');
const compression = require('compression');
const express = require('express');
var app = express();

app
    .use(compression())
    .use(bodyParser.json())
    // Static content
    .use(express.static(html))
    // Default route
    .use(function(req, res) {
      res.sendFile(html + 'index.html');
    })
    // Start server
    .listen(port, function () {
        console.log('Port: ' + port);
        console.log('Html: ' + html);
    });

// continue with api code below ...

Answer 2

没有一个答案对我有用。如果它有效，Angular 路由在重新加载时不起作用。
所以这就是我解决它的方法。Angular 路由即使在整页重新加载时也能正常工作。

function getRoot(request, response) {
   response.sendFile(path.resolve('./public/angular/index.html'));
}

function getUndefined(request, response) {
   response.sendFile(path.resolve('./public/angular/index.html'));
}

// Note the dot at the beginning of the path
app.use(express.static('./public/angular'));

app.get('/', getRoot);
app.get('/*', getUndefined);

不需要有角度的 base-href 重写！只需使用ng buildor ng build --prod。

Answer 3

这是正在运行的完整后端代码

const express = require('express');
var app = express();
var port = 9999;

function getRoot(request, response) {
    response.sendFile(path.resolve('./public/angular/index.html'));
 }

 function getUndefined(request, response) {
     response.sendFile(path.resolve('./public/angular/index.html'));
 }


 app.use(express.static('./public/angular'));

 app.get('/', getRoot);
 app.get('/*', getUndefined);

 // Start server
 app.listen(port, function () {
    console.log('server running at port: ' + port);
}); 

Answer 4

基于@NTN-JAVA 的回答，这是从 NodeJS 服务器提供 Angular 应用程序的解决方案。

这是从头开始的摘要：

1. npm install -g @angular/cli

2. ng new PROJECT_NAME

3. cd PROJECT_NAME

4. npm install nodemon express cookie-parser body-parser morgan method-override --save

5.创建app.js：

var express = require('express');
var app = express();
var morgan = require('morgan');
var bodyParser = require('body-parser');
var port = process.env.PORT || 3000;
var methodOverride = require('method-override'); // simulate DELETE and PUT (express4)
var router = express.Router();

console.log('——————————- Run on port '+ port);

/****************************** Router ***************************/
router.get('*', function(req, res){
    res.sendFile('index.html', { root: __dirname + '/' });
});

/****************************** /Router ***************************/

//app.use(morgan('dev')); // log every request to the console
app.use(express.static(__dirname + '/')); // Static (public) folder

app.use(bodyParser.urlencoded({extended:true}));// get information from html forms
app.use(bodyParser.json());
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));
app.use(methodOverride());
app.use('/', router); // app.use('/parent', router); call all from localhost:port/parent/*

app.listen(port);

6. 编辑package.json文件：

{
   ...
    "scripts": {
        "start": "ng build; cp app.js dist/app.js; node dist/app.js",
    }
   ...
}

7. 跑npm start

这个答案还提供了一种从浏览器调用直接 URL 并在您的应用程序中正确解析它们的解决方案。

Answer 5

第 1 步：为了获取静态内容，请在您的 Angular 应用程序目录中运行此命令 -

ng build --prod

步骤2：第一步将在您当前目录中创建一个dist文件夹，将dist文件夹中的所有文件移动到您的节点应用程序的公共文件夹 -

第三步：创建节点服务器。应用程序.js -

var path = require('path');
var express = require('express');
var cookieParser = require('cookie-parser');
var cookieParser = require('cookie-parser');

const allowedExt = [
    '.js',
    '.ico',
    '.css',
    '.png',
    '.jpg',
    '.woff2',
    '.woff',
    '.ttf',
    '.svg',
];

var app = express();
app.use(cookieParser());

function getAngularApp(request, response) {
  response.sendFile(path.resolve('./public/index.html'));
}

function defaultHandler(request, response) {
  if (allowedExt.filter(ext => req.url.indexOf(ext) > 0).length > 0) {
    response.sendFile(path.resolve(`public/${req.url}`));
  } else {
    response.sendFile(path.resolve('./public/index.html'));
  }
}

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', getAngularApp);
app.get('/*', defaultHandler);

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Answer 6

按照带有 Angular 2 CLI文档的 Express 节点服务器通过 Node.js 服务器为您的应用程序提供服务。该应用程序通过 Node.js 和 REST 完整 API 提供服务。您可以根据自己的要求设计此 REST。

例如

使用http://localhost:5000/app服务应用程序

app.get('/app/*', function(req, res) {
    res.sendFile(path.join(__dirname, 'index.html'))
});

或者

使用http://localhost:5000/rest/contacts提供来自 REST 调用的数据

app.get('/rest/user', function(req, res) {
    res.send({
        "id": 2,
        "name": "Jhon",
    })
});