web-dev-qa-db-ja.com

node.jsサーバーでangular2アプリを提供する方法

Angular2 CLI Webpackを使用しているプロジェクトを作成するために、Angular2を使用してWebアプリを構築しています。 Angular2アプリは他の外部パッケージも使用します（例：Firebase）。それに加えて、REST APIをnode.jsで実行するように作成する必要があります。

Angular2アプリとREST APIの両方をnode.jsサーバーを使用して提供するにはどうすればよいですか？

node.jsangularangular2-cli
11
Yohan Karunanayake
  1. 使用する ng buildを使用して、アプリをビルドディレクトリにビルドします。
  2. Nodejsアプリを作成して、ビルドディレクトリを静的コンテンツとして提供し、apiのルートを作成します。

以下は、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 ...
9
John Siu

どの回答も私にとって適切に機能しませんでした。そしてそれが機能した場合、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。

4
btx

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

  1. 編集package.jsonファイル：

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

  2. npm start

この回答は、ブラウザーから直接URLを呼び出し、アプリでそれらを正しく解決するためのソリューションも提供します。

1
Amro Shafie

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",
    })
});
1
NTN-JAVA

これが機能している完全なバックエンドコードです

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);
});
0
Maddy