如何在Spring MVC應用程序中運行Angular 2頁面？

我想從一個角度2項目的index.html作爲Spring MVC應用程序的歡迎頁面運行。
我運行角度2的方式是通過npm start。如果我在不執行npm start的情況下加載index.html，則組件加載不正確。
我如何能夠將index.html作爲我的Spring MVC項目的歡迎頁面？如何在Spring MVC應用程序中運行Angular 2頁面？

編輯：添加了一些更多的細節。

angular-seed項目按原樣加載。我只是試圖從angular-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>

來源

2017-02-28 paaaaat

你需要正確配置你的src，發佈一些代碼是有幫助的 – Jaiwo99

@ Jaiwo99添加代碼。讓我知道你是否需要更多 – paaaaat

我有同樣的問題，我找到了正確的解決方案。

按照下面的步驟來實現我們的主要目標，在單個服務器上運行SPRINGMVC + Angular2。

創建正常的動態web項目。
添加彈簧或用戶的Maven的pom.xml
打開CMD所需的全部扶養，導航到angular2應用。點擊命令 npm install下載node_modules然後ng build或使用ng build --prod進行生產。此命令將創建一個「dist」文件夾，複製包括所有文件夾的所有文件。
將這些文件和文件夾粘貼到WebContent目錄中。
最後一件事，您需要在index.html中更改basehref =「./」。

現在您已準備好運行服務器，或者您可以部署war文件並通過tomcat或其他服務器提供服務。

訪問this thread如果你想要spring和angular 2的文件結構！

來源

2017-03-05 20:04:01 BeingCoders

非常感謝第5點）「./」 – pixelstuermer

5）非常有用。 –

點5是偉大的和最有用的東西。它救了我。 –

如何在Spring MVC應用程序中運行Angular 2頁面？

回答

相關問題