Question

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

如何使用node.js服务器

同时提供Angular2应用程序和REST API

Answer 1

使用ng build将您的应用构建到构建目录中。
创建nodejs app以将构建目录作为静态内容服务，然后为api创建路由。

以下是使用express的nodejs app的示例，它将为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

按照Express node server with Angular 2 CLI文档通过Node.js服务器为您的应用程序提供服务。该应用程序通过Node.js和REST完整API提供。您可以根据需要设计此REST。

E.g。

使用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",
    })
});

Answer 3

根据@ NTN-JAVA答案，这是一个从NodeJS服务器提供Angular应用程序的解决方案。

以下是开头的摘要：

npm install -g @angular/cli
ng new PROJECT_NAME
cd PROJECT_NAME
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);

修改package.json文件：

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

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

Answer 4

没有一个答案适合我。如果可行，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);

无需重写角度基准-href！只需使用ng build或ng build --prod。

Answer 5

这里是完整的后端代码，可以正常工作

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 6

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

<块引用>

ng build --prod

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

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

6 个答案: