2016-05-29 5 views
2

Express.jsを使用してフロントエンドのAngular2アプリを提供することはできません。 index.htmlをテキストとして提供し続けるだけで、スクリプトは読み込まれないように見えます。Express.jsはAngular2 index.htmlをテキストとして提供し続けます

再現手順:

npm install angular-cli -g 
ng new ng2app && cd ng2app 
npm install express --save && npm install 
touch src/server.js 

更新server.jsファイル

// src/server.js 
var express = require('express'); 
var app = express(); 

app.set('port', (process.env.PORT || 5000)); 

app.get('/', function(req, res) { 
    res.sendFile(__dirname + '/index.html') 
}) 

app.listen(app.get('port'), function() { 
    console.log('Node app is running on port', app.get('port')); 
}); 

実行サーバーを

node src/server.js 
# => Node app is running on port 5000 

http://localhost:5000/


ブラウザがページ上でこれを吐き出し、決して何もしない問題(すなわち、それは私のフロントエンドangular2アプリをロードしない)

このページでも

{{#unless environment.production}} {{/unless}} Loading... {{#each scripts.polyfills}}{{/each}}

次のブラウザコンソールエラーがあります。

GET http://localhost:5000/ember-cli-live-reload.js

(index):19 GET http://localhost:5000/%7B%7B.%7D%7D

(index):21 Uncaught ReferenceError: System is not defined

私は間違って何をしていますか? P.S角度のあるフロントエンド部分には何も問題はありません。 npm startを動作させ、ng2appを想定したようにうまくいっているので、私はこれを知っています。あなたが実際に角度CLIのビルドを実行していないように見えるhttps://github.com/spboyer/quickstart-ng-cli

var express = require('express'), 
path = require('path'), 
fs = require('fs'); 
var app = express(); 
var staticRoot = __dirname + '/'; 
app.set('port', (process.env.PORT || 3000)); 
app.use(express.static(staticRoot)); 
app.use(function(req, res, next){ 
// if the request is not html then move along 
var accept = req.accepts('html', 'json', 'xml'); 
if(accept !== 'html'){ 
    return next(); 
} 
// if the request has a '.' assume that it's for a file, move along 
var ext = path.extname(req.path); 
if (ext !== ''){ 
    return next(); 
} 
fs.createReadStream(staticRoot + 'index.html').pipe(res); 
}); 
app.listen(app.get('port'), function() { 
console.log('app running on port', app.get('port')); 
}); 

私には:

+0

基本的にExpressを 'npm start'と同じにするか、Expressにビルド済みのアプリケーション(' ng build'の結果)を実行させますか? – robertklep

+0

私が欲しいのは、Herokuでangular2アプリをホストすることです。これを行うには、 '' web:node src/server.js'''コマンドでProcfileが必要です(他のいくつかの設定手順が必要ですが、これは私が諦めているものです)。私の推論では、このコマンドは開発コンソールで私のために動作するはずですので、プロダクションで何ができるかを確認することができます。私が期待していることは、私がブラウザーで私の角度のあるアプリを表示/操作できるようにすることです(npm startはブラウザーでアプリを見たりインタラクトするのと同じ方法です)。それはdoesntです。 index.htmlページのテキストをレンダリングするだけです。どうやってnpm開始のように振る舞うことができますか? – MilesStanfield

+0

"それほど簡単ではありません"、それは見た目では(動きのある部分が多いように見えます)。しかし、Expressを通じて提供される_built_バージョンを取得するのはかなり簡単です。 – robertklep

答えて

0

これは、私はプロジェクトが見種子から持っていることを最小です。

関連する問題