2017-01-31 13 views
0

Angular-CLIとnode/npmを使用して、標準のMEANスタックJSアプリケーションをゼロから作成しました。私はinitを実行し、ngのサービスを使用するときにうまくいくいくつかのフロントエンドのものを記入しました。次に、以下のコードを使用してバックエンドを作成し、シェルにノードサーバーを入力しました。 src/indexにあるindex.htmlページをロードし、src/appにはAngular2コードを含むsrcへの結合を試みますが、私の要素内では恐ろしい読み込み...が発生します。私は複数のチュートリアルを見てきました。これらはすべて、まさにこれまたは類似のクッキー・カッター・サーバー・コードでした。私はそれを理解できません。Angular2のExpress Server - アプリケーションが "Loading ..."に貼り付けられました

server.js:

var express = require('express'); 
var path = require('path'); 
var bodyParser = require('body-parser'); 


var index = require('./routes/index'); 
var event = require('./routes/events'); 

var port = 3000; 

var app = express(); 
    app.set('views',path.join (__dirname, 'src')); 
app.set('view engine', 'ejs'); 
app.engine('html', require('ejs').renderFile); 

app.use(express.static(path.join(__dirname, 'src'))); 

app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({extended: false})); 

app.use('/', index); 
app.use('/', event); 


app.listen(port, function() { 
    console.log("server listening on port" + port); 
}); 

index.js:アンギュラCLIアプリで

var express = require('express'); 
var router = express.Router(); 

router.get('/', function(req, res, next) { 
// res.render('../src/index.html'); 
    res.render('index.html'); 
}); 

module.exports = router; 
+0

角膜炎を使用している場合は、なぜ 'ng serve'を使用しないのですか? –

+0

コンソールでエラーが発生しましたか? –

+0

あなたの1GISTを作成しました.. https://gist.github.com/parthghiya/eb337e2ee63ce8785d714e251b7ef0b8 このコードは、あなたの角のcliにdistフォルダがあるときに動作します –

答えて

0

ng buildまたはng build --prodを実行したノード/静的なディレクトリdistないsrcに役立つ表現します。

+0

これはうまくいきました、ありがとう!しかし、まだ問題があります。静的ディレクトリをdistに変更しましたが、ロード中ですが、正しくロードされていません。具体的にはcssです。なぜCSSスタイルを壊すのだろうか?また、エクスプレスサーバーを構築せずにangle-cliアプリケーションをロードする方法はありませんか? – seanEd

+0

''なぜCSSのスタイルを壊すの? ' - > no、ng serveとng buildは同じです。ファイルへの出力のみをビルドしますが、パフォーマンスを向上させるためにメモリ内で実行します。 「エクスプレスサーバーにAngi-cliアプリケーションをビルドせずにロードする方法はないのですか?」 - 最初の質問として、実際のファイルを取得するためには角度cliを作成する必要があります。 –

+0

私は確信していませんが、ng build --prodを実行してからserver.jsを実行すると、distフォルダと適切なhtmlを表示して角度コンテンツをロードしていますが、CSSと画像の一部はロードされませんアイコン。私はそれを正確に読み込むサービスを使用するとき。 Expressで読み込まれた静的フォルダにエラーがありますか?私は使用しています:app.use(express.static(path.join(__ dirname、 'dist'))); app.use( "/"、 './routes/index');そして、var express = require( 'express'); var router = express.Router(); router.get( '/'、function(req、res、next){ res.render( 'index.html'); }); – seanEd

関連する問題