使用Maven 組合Spring Boot和Angular可能是一項具有挑戰性的任務。在這篇文章中，我們將使用Spring Boot和Angular 6創建一個簡單的Web應用程式，並將它們打包在一個war文件中。
創建Maven項目
首先，創建一個包含兩個模塊的Maven項目：一個用於後端，另一個用於前端。
在我的示例中，有兩個Maven模塊 - tutorial-server（後端）和tutorial-web（前端） - 它們繼承自父模塊， tutorial-parent。
項目結構如下：
父POM的結構如下：
現在，為tutorial-server配置POM，如下所示：
請注意，我們已經為web模塊tutorial-web和Sprint Boot依賴項添加了依賴項。稍後我們將回到後端POM配置。
讓我們看一下tutorial-web模塊POM 的配置。
稍後我們會回到這個配置。
創建Spring Boot應用程式
在我的示例項目中，我手動創建了Spring Boot應用程式。您也可以使用Spring Spring Initializer創建。
Spring Boot應用程式的包結構如下：
讓我們看看HomeController類，因為它將返回一個視圖。
請注意，home方法接受一個模型並返回「index.html」，即視圖。
使用Angular CLI創建Angular6項目
如果尚未安裝angular-cli，請使用終端中的以下命令進行安裝。
npm install -g @angular/cli
使用tutorial-web / src / main / web目錄中的angular-cli生成Angular 6項目 。導航到終端中的tutorial-web / src / main目錄並運行以下命令：
ng new -skip-git -directory web np-app
在上面的命令中，我們正在跳過git存儲庫，因為我們沒有從根目錄運行命令。我們已經指定了輸出目錄作為 web 並給出了應用程式的名稱 np-app。
將以下配置添加到tutorial-web / pom.xml以通過Maven構建Angular 6項目。
請注意，我們使用front-maven-plugin來構建Angular 6項目。
我們在配置部分中指定了node和npm版本以及工作目錄。在第一個執行部分，我們告訴Maven安裝npm和node。這將安裝在項目中，這給了我們很多優勢。
在下一個執行部分中，我們告訴Maven運行' npm install'和' npm run build'命令。默認情況下，angular-cli會將文件寫入src \ main \ web \ dist目錄中。
配置後端Maven POM以包含Angular 6資源
編輯tutorial-server / pom.xml並添加以下插件部分：
在這裡，我們將資源從tutorial-web / src / main / web / dist / np-app複製到 tutorial-server / target / classes / resources目錄。這將確保在構建war文件時包含t utorial-app / WEB-INF / classes / resources。
運行應用程式
mvn clean install從項目根目錄運行 。這將在tutorial-server / target目錄中生成war文件 。它可以部署到Tomcat伺服器，並且可以查看應用程式。
要使用Maven運行Spring Boot應用程式，請從tutorial-server目錄運行以下命令 。
mvn spring-boot:run
應用程式啟動後，我們應該能夠查看歡迎頁面。
大家有什麼學習困難或疑惑的可以找我交流，想要更多JAVA系統學習方法及資料的私信獲取