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

Question

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

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

Answer 1

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

以下是nodejs应用程序使用express的示例，该应用程序将为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路由在重新加载时就不起作用
这就是我解决问题的方法。角度路由甚至可以在整个页面重新加载时工作。

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

不需要重写angular base href！只需使用ng build或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

遵循带有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'))
});

或

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

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

Answer 6

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

ng构建—产品

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

步骤3：创建一个节点服务器。App.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;