在單臺服務器上運行帶有Angular 2的Spring4MVC

我是angular2的新手，我想知道SpringMVC4的角度爲2的可能文件結構是什麼？在單臺服務器上運行帶有Angular 2的Spring4MVC

如圖像示出，但對於角的1.x但角2文件結構工作是相當不同的，並且其組成驅動，我使用的角2文件結構下方

給出

我搜索了很多，我發現我們可以分別使用前端（使用angular2）和後端（服務器使用spring/springboot），但我們需要2臺服務器來運行應用程序。例如，前端：192.168.100.1:4200 和後端：192.168.100.1:8080

那麼，有什麼辦法或一般的文件結構，同時運行angular2和spring4MVC同一臺服務器上（如192.168.100.1:8080）？

在此先感謝。將不勝感激！

來源

2017-02-09 BeingCoders

到現在爲止沒有答案那很好，我得到了解決方案。我是怎麼做的？

您需要2個上下文。

（1）角2項目和

（2）Spring MVC的

按照下面的步驟來實現我們的主要目標，在一臺服務器上運行+用SpringMVC Angular2。

創建正常的動態web項目。
添加彈簧或用戶maven所需的所有依賴項pom.xml
打開CMD，導航到angular2應用程序。命中命令

NPM安裝然後

NG建立或使用納克構建--prod生產

這個命令將創建一個「DIST」文件夾，複製所有文件包括所有文件夾。

將這些文件和文件夾粘貼到WebContent目錄中。
最後一件事，你需要改變index.html中的basehref =「./」。現在您已準備好運行服務器，或者您可以部署war文件並通過tomcat或其他服務器進行服務。

如果您正在使用WebServices的休息，並希望在一臺服務器上運行angular2，春季

你需要把webServiceEndPointUrl按你的主機URL。例如，如果您在本地主機上運行應用程序：8080，則需要保留url

webServiceEndPointUrl =「http://localhost:8080/api/user」;在有角度的一面。之後，您可以構建並將粘貼複製到您的WebContent文件夾。

見下面的圖片，文件結構用SpringMVC + ANGULAR2

我知道有很多缺點，使用這些方式爲單臺服務器上運行的應用程序，但如果一定需要，您可以按照此。

如果您在有角度的一面更改任何內容，則需要隨時複製粘貼dist文件夾，然後才能部署它！

來源

2017-03-05 19:54:51 BeingCoders

您在步驟5中編寫了在index.html中更改basehref =「./」。它應該改成什麼？ –

如果你正在運行你的angular 2應用程序讓我們說localhost：4200，那麼它會引用basehref =「/」你可以在src/app/index.html中找到basehref屬性。現在，如果你想用springMVC（正常配置*模式）運行這個，你將把dist文件夾的所有文件都放到webapps或WebcContent文件夾中。在這裏你需要說從春天開始渲染的地方。 [（dot-slash）./表示當前目錄] [（斜線）/是根目錄]。如果您有其他配置，您可以跳過它。在一般架構中，我嘗試併成功實施。即使你可以嘗試與/和。/ – BeingCoders

感謝您的第五點，它的工作。// ./之間的差異真的需要理解。 –

您可以自動化您的解決方案 - 只需使用前端，Maven的插件（與您可以安裝的NodeJS和建設的角度項目）和Maven的資源 - 插件複製/角/ DIST的內容/目錄爲.war文件的根目錄（也this article見）

<plugin> 
     <groupId>org.apache.maven.plugins</groupId> 
     <artifactId>maven-resources-plugin</artifactId> 
     <version>3.0.2</version> 
     <executions> 
     <execution> 
      <id>default-copy-resources</id> 
      <phase>process-resources</phase> 
      <goals> 
      <goal>copy-resources</goal> 
      </goals> 
      <configuration> 
      <overwrite>true</overwrite> 
      <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory> 
      <resources> 
       <resource> 
       <directory>${project.basedir}/angular/dist</directory> 
       </resource> 
      </resources> 
      </configuration> 
     </execution> 
     </executions> 
</plugin>

然後你就可以服務器的NodeJS通過ng serve與Angular CLI工具拼命地跑上使用熱重裝功能（同時發展）。

來源

2017-03-13 12:38:46

在單臺服務器上運行帶有Angular 2的Spring4MVC

回答

相關問題