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