springboot+angular5整合

创建项目

1.首先创建一个springboot项目
2.然后在main目录下使用angular cli创建angular项目,
ng new ngapp

修改配置

3.修改angular的打包目录
在.angular-cli.json文件中的outDir修改为”../resources/static”,
这里static属于springboot的默认静态目录,也可以修改为”../resources/public” 或者如果是普通的maven项目,直接修改为”../webapp”

4.修改pom文件
添加以下插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<build>
<finalName>angular-demo</finalName>//项目名
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.3</version>
<configuration>
<source>1.8</source>//编译版本
<target>1.8</target>
<excludes>
<exclude>ngapp/**</exclude>
</excludes>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<excludes>
<exclude>ngapp/**</exclude>
</excludes>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.5.0</version>
<executions>
<execution>
<id>exec-npm-install</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
<executable>cnpm.cmd</executable>//这里的cnpm是淘宝的镜像,在国内会快一点,也可以改为npm
<arguments>
<argument>install</argument>
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
<execution>
<id>exec-npm-ng-build</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
<executable>ng.cmd</executable>
<arguments>
<argument>build</argument>
<argument>--base-href=/angular</argument>//这个是angulr中的base标签的href属性,所有路径都会加上这个/angulr
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>

这里做的事情是,在你打包或者编译的时候,会首先在ngapp目录中运行cnpm install 下载所需依赖,然后使用 ng build 打包输出。输出目录为你再.angular-cli.json中配置的outDir

5.但是此时有一个问题,在浏览器中刷新会直接跳出springboot提示的404,原因是angular的路由路径,直接由springboot处理,但是springboot匹配不到这个路径,直接就返回404了
处理方法为加一个controller

1
2
3
4
5
6
7
8
@Controller
public class AngularController{

@RequestMapping("/angular/**")
public String forward(){
return "forward:/index.html";
}
}

由于我们在pom文件中配置的base-href为/angular,这里直接拦截所有的/angular开头的路径做个转发,
如果base-href='/'也就是默认值,可以直接指定具体路径,例如:

1
2
3
4
5
@RequestMapping(value = {"/articles","/users","/admins"})
public String angular()
{
return "forward:/index.html";
}

这个转发只有在直接访问url,或者刷新页面的时候调用,直接点击angular的导航是不会调用的

另外

6.springboot默认是打成jar包,如果想打成war包
修改pom文件,
<packaging>war</packaging>
然后添加依赖

1
2
3
4
5
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>

修改application启动类继承SpringBootServletInitializer

1
2
3
4
5
6
7
8
9
@SpringBootApplication
public class AnuglarApplication extends SpringBootServletInitializer
{

public static void main(String[] args)
{
SpringApplication.run(AnuglarApplication.class, args);
}
}

坚持原创技术分享,您的支持将鼓励我继续创作!
显示 Gitment 评论