Example of integration of SpringBoot with Angular2

background

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

Project structure

 src/main/-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

The angular directory is a new project created using angular cli. The startup code of springboot in Java. There is only the application.yml configuration file in the resources directory

Integration ideas

Since springboot projects need to add static html files, etc., you need to put them in the static directory under resources, and then you can directly access the index.html file in the static directory through localhost:8080/index.html. So we need to put the compiled code of angular in that static directory.

So, the steps of integration:

1. Compile angular projects, use the npm run release command, and the compiled code is in the angular/dist directory
2. Copy all 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 a resource resource

We can do it through some plugins of maven, where the exec-maven-plugin plugin (used to execute commands).

build in pom.xml

In the project's pom.xml file, we need to add the build configuration:

1. Use /src/main/angular/dist directory as resource directory
2. When building, execute npm run release command

 <build> <resources> <resource> <directory>src/main/resources</directory> </resource> <resource> <directory>${project.basedir}/src/main/angular/dist</directory> <targetPath>static</targetPath> </resources> </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> </execution> </execution> </execution> <configuration> <executable>npm</executable> <workingDirectory>src/main/angular</workingDirectory> <arguments> <argument>run</argument> <argument>release</argument> </arguments> </configuration> </plugin> </plugins> </build>

Then after executing the mvn clean package, you will see all files in the static directory and angular/dist directory in the target/classes directory. The final generated jar package will also contain these contents.

Local startup project testing

If you continue to run using the application.main function of sptringboot, since there is no angular/dist code in resources, you will not see the page correctly. The solution is to use another maven plugin: spring-boot-maven-plugin, which is specifically used for springboot's maven command.

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 execute maven's run command: mvn clean spring-boot:run to start the project and the angular compiled file will be loaded.

The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.