SpringBoot與Angular2的集成

背景

以springboot爲tomcat啓動的框架，以angular2爲前端頁面的框架，最後須要將angular2的代碼運行在springboot內置tomcat中。

項目結構

src/main/
--------angular
--------java
--------resources
pom.xml

angular目錄是用的angular cli建立的新項目，java中是springboot的啓動代碼，resources目錄下只有application.yml配置文件

集成思路

因爲springboot的工程中要加入靜態html文件等須要放在resources下面的static目錄下，而後直接經過localhost:8080/index.html便可訪問static目錄下的index.html文件。因此咱們須要將angular的編譯代碼放在該static目錄中。

因而，集成的步驟：

1. 編譯angular的項目，使用npm run release命令便可，編譯後的代碼在angular/dist目錄中
2. 複製angular/dist目錄中的全部文件到resources/dist目錄下（是springboot編譯後的jar包目錄），或者將angular/dist目錄做爲resource資源

咱們能夠經過maven的一些插件來完成，這裏將用到exec-maven-plugin插件（用於執行命令）。

pom.xml中的build

在項目的pom.xml文件中，咱們須要添加build配置：

1. 將/src/main/angular/dist目錄做爲resource目錄
2. build的時候執行npm run release命令

<build>
    <resources>
      <resource>
        <directory>src/main/resources</directory>
      </resource>
      <resource>
        <directory>${project.basedir}/src/main/angular/dist</directory>
        <targetPath>static</targetPath>
      </resource>
    </resources>
    <plugins>
      <!-- Plugin to execute command  "npm install" and "npm run build" inside /angular directory -->
      <plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>exec-maven-plugin</artifactId>
        <version>1.6.0</version>
        <executions>
          <execution>
            <phase>generate-sources</phase>
            <goals>
              <goal>exec</goal>
            </goals>
          </execution>
        </executions>
        <configuration>
          <executable>npm</executable>
          <workingDirectory>src/main/angular</workingDirectory>
          <arguments>
            <argument>run</argument>
            <argument>release</argument>
          </arguments>
        </configuration>
      </plugin>
    </plugins>
  </build>

而後執行mvn clean package後，在target/classes目錄下的就會看到static目錄以及angular/dist目錄中的全部文件。最終生成的jar包中也會包含這些內容。

本地啓動項目測試

若是繼續使用sptringboot的啓動方式Application.main函數運行，因爲resources中並無angular/dist的代碼，則不會正確看到頁面。解決辦法就是使用另外一個maven插件：spring-boot-maven-plugin，專門用於springboot的maven命令。

在pom.xml中的build>plugins中加入如下代碼便可：

<plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
        <version>1.5.9.RELEASE</version>
        <executions>
          <execution>
            <goals>
              <goal>repackage</goal>
            </goals>
          </execution>
        </executions>
      </plugin>

而後執行maven的run命令： mvn clean spring-boot:run便可啓動該項目，而且會加載angular的編譯文件。