2017-02-08 1 views
1

これは簡単な質問で、今私の脳を塞いだようです。node2Sアプリケーション内でangular2を開始する方法

私がしたいまで、私は今angular2アプリを起動するためのWebPACKを使用しています、それだけでNPM開始を実行し、大丈夫です、不動産では、プロジェクト

webpack-dev-server --inline --progress --port 8080 

をangular2高めるために、このコマンドを実行していることは今、すべてがうまくあります実際の開発を開始する。私たちの実際の開発はnodeJSを使用しています。私はnodeJSを使ってangular2プロジェクト全体を強化したいと思います。私は、角度プロジェクトを構築するためにnpmビルドを使用し、静的ページをlodaにするためにnodeJS/express内の静的ページを使用することができます。これはデプロイメント環境やプロダクション環境では問題ありません。しかし、開発のために、どうすればいいですか?

上記のように、私はwebpack.configurationを大量に読み込んでいるng2プロジェクトを強化するためにwebpack-dev-serverを使用しています。スクリプトローダー、sass loaderなどはデフォルトでポート8080ですが、nodeJsプロジェクトでは、開始するには「ノードアプリ」を使用していて、ポートは3000です。明らかに、これはここでクロスドメインの問題を引き起こしています。

クロスドメインの問題を避けるため、nodeJSにng2のローカル開発環境を強化させることは可能ですか? nodeJSを使用する場合、Webpackソリューションはどこに行きますか?

あなたの提案を聞いてほしい

+0

円滑な開発ワークフローを可能にするためにCORSの問題を処理するだけで、まずnodej設定でCORSを許可することができます。次に、chromeのCORSプラグインをインストールする必要があります。 –

+0

nodeJSとng2を別々に起動することをお勧めします。ng2がCORS経由でnodeJSアプリケーションにアクセスできることを確認してください。そして、生産環境では、ng2ビルドファイルを静的ディレクトリに入れてnodeJSにロードさせます – user3006967

+0

はい、SPAのコンセプトの採用からこのように動作するはずです。 –

答えて

0

2つの解決策を試すことができます。両方とも、Webpackとあなたのサーバーが2台必要です。どちらもバックエンドで動作します。

  1. サーバーレスポンスでCORSを有効にします。これは難しいかもしれません。また、実際にはプロダクションの振る舞い(フォルダ構造、URLパスなど)を複製しません。
  2. webpack以外のすべての出力をサーバーにプロキシします。これはWebpackの設定の2行で実現されますが、プロダクションで見たように非角ページ、コンテンツ、静的ファイルなどが表示されるため、本当にうまくいきます。何が良いのか、あなたは目標としてサーバの生産(ステージ、開発など)を指定することができ、単にあなたのマシン上でバックエンドを実行しないことができます。これは8080で角度サーバを起動し、任意の非WebPACKのターゲットにファイル生成をリダイレクトします

    devServer: { 
        port: 8080, 
        proxy: { '**': { target: 'http://localhost:3000', secure: false, headers } } 
    }, 
    

は、これはどのように-にあります。

関連する問題