Angular2 CLI Webpackを使用しているプロジェクトを作成するために、Angular2を使用してWebアプリを構築しています。 Angular2アプリは他の外部パッケージも使用します(例:Firebase)。それに加えて、REST APIをnode.jsで実行するように作成する必要があります。
Angular2アプリとREST APIの両方をnode.jsサーバーを使用して提供するにはどうすればよいですか?
ng build
を使用して、アプリをビルドディレクトリにビルドします。以下は、Angular2アプリを提供するExpressを使用した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))
// 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 ...
どの回答も私にとって適切に機能しませんでした。そしてそれが機能した場合、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);
NO angular base-href rewrite is required!Just use
ng build
またはng build --prod
。
@ 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を呼び出し、アプリでそれらを正しく解決するためのソリューションも提供します。
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",
})
});
これが機能している完全なバックエンドコードです
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);
});