Springbootangular2 integration example

Springbootangular2 integration example

Background

The framework started with spring boot as tomcat, the framework of angular2 as the front-end page, and the code of angular2 needs to be run in the built-in tomcat of spring boot.

Project Structure

src/main/--------angular--------java--------resourcespom.xml

The angular directory is a new project created using angular cli, And the springboot startup code in java. The resources directory contains only the application. yml configuration file.

Integration ideas

To add static html files to the springboot project, you need to put them in the static directory under resources, and then directly use localhost: 8080/index.html to access the index.html file under the staticdirectory. Therefore, we need to put angular compilation code in the static directory.

The integration steps are as follows:

1. Compile the angular project by using the npm run release command. The compiled code is in the angular/dist directory.
2. Copy all the files in the angular/dist directory to the resources/dist directory (the jar package directory compiled by springboot), or use the angular/dist directory as the resource

We can use some maven plug-ins. Here, the exec-maven-plugin plug-in is used to execute commands ).

Build in pom. xml

In the pom. xml file of the project, we need to add the build Configuration:

1. Use the/src/main/angular/dist directory as the resource Directory
2. Run the npm run release command during build.

 <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>

After executing the mvn clean package, all files in the static directory and angular/dist directory are displayed under the target/classes directory. The generated jar package also contains the content.

Start the project test locally

If you continue to run the Application. main Function in the startup mode of sptringboot, the page is not displayed because there is no angular/dist code in resources. The solution is to use another maven plug-in: spring-boot-maven-plugin, which is specially used for spring boot maven commands.

Add the following code to build> plugins in pom. xml:

   <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>

Then run the maven run command: mvn clean spring-boot:runYou can start the project and load the angular compilation file.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.