如何在node.js服务器中提供angular2应用程序
我正在使用Angular2构build一个Web应用程序，以创build我正在使用Angular2 CLI webpack的项目。 Angular2应用程序也使用其他外部软件包（例如：Firebase）。 除此之外，我需要创build一个运行在node.js上的REST API
我如何使用node.js服务器来为Angular2应用程序和REST API提供服务
- 使用
ng build将您的应用程序构build到build目录中。 - 创buildnodejs应用程序来将构build目录作为静态内容来服务，然后为api创build路由。
以下是一个使用Express来运行Angular2应用程序的nodejs应用程序示例：
/* 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)) // Start server .listen(port, function () { console.log('Port: ' + port); console.log('Html: ' + html); }); // continue with api code below ...
使用Express节点服务器和Angular 2 CLI文档通过Node.js服务器为您的应用程序提供服务。 应用程序正在通过Node.js和REST完整的API进行服务。 您可以将此RESTdevise为您的要求。
例如
通过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", }) });
基于@ NTN-JAVA的答案，这里是一个解决scheme来从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.创buildapp.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
这个答案还提供了一个解决scheme，从浏览器直接调用URL并在您的应用程序中正确parsing它们。