2017-02-28 11 views
1

私は、Spring MVCアプリケーションのウェルカムページとして実行するangle 2プロジェクトからindex.htmlを取得したいと考えています。
角度2を実行する方法は、npm startです。 npm startを実行せずにindex.htmlをロードすると、コンポーネントが正しく読み込まれません。
Spring MVCプロジェクトの開始ページとしてindex.htmlを作成するにはどうしたらいいですか?Spring MVCアプリケーションでAngular 2 Pageを実行するにはどうすればよいですか?

編集:詳細を追加しました。

角度シードプロジェクトはそのままロードされます。私はangle-seedプロジェクトからindex.htmlをロードしようとしています。ノードモジュールはすでに追加されており、npm startで完全に動作します。

私のweb.xmlのように、私は歓迎のファイルをこのように持っている:

<welcome-file-list> 
     <welcome-file>AngularContent/src/index.html</welcome-file> 
    </welcome-file-list> 

とのindex.htmlには、次のものがあります。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Angular QuickStart</title> 
    <base href="/"> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <base href="/"> 
    <link rel="stylesheet" href="styles.css"> 

    <!-- Polyfill(s) for older browsers --> 
    <script src="AngularContent/node_modules/core-js/client/shim.min.js"></script> 

    <script src="AngularContent/node_modules/zone.js/dist/zone.js"></script> 
    <script src="AngularContent/node_modules/systemjs/dist/system.src.js"></script> 

    <script src="AngularContent/src/systemjs.config.js"></script> 
    <script> 
     System.import('AngularContent/src/main.js').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 

    <body> 
    <my-app>Loading AppComponent content here ...</my-app> 
    </body> 
</html> 
+0

srcを正しく設定する必要があります。いくつかのコードを投稿すると便利です – Jaiwo99

+0

@ Jaiwo99コードを追加しました。もっと必要なものがあれば教えてください – paaaaat

答えて

6

私は同じ問題を抱えていると私は適切な発見しました最近解決する。

SPRINGMVC + Angular2を1台のサーバーで実行することを主な目的として、次の手順を実行します。

  1. 通常の動的Webプロジェクトを作成します。

  2. はangular2アプリケーションに移動し、春やユーザーのMavenのpom.xml

  3. オープンCMDのために必要なすべての依存を追加します。 npm installコマンドを実行してnode_modulesをダウンロードし、次にng buildを使用するか、ng build --prodをproductionに使用します。このコマンドは、「dist」フォルダを作成し、すべてのフォルダを含むすべてのファイルをコピーします。
  4. これらのファイルとフォルダをWebContentディレクトリに貼り付けます。
  5. 最後に、index.htmlのbasehref = "./"を変更する必要があります。

これで、サーバーを実行する準備ができました。また、warファイルを展開して、tomcatや他のサーバーに配信することもできます。

this threadを参照してください。スプリングと角度2のファイル構造が必要な場合

+2

5) "./" – pixelstuermer

+1

5)はありがとうございました。 –

+0

ポイント5は素晴らしい&最も有用なものです。それは私を救った。 –

関連する問題