angular 8与springboot的整合及分离

angular 8

首先确保你已悉知如何使用angular 8并且已配置好proxy代理文件，angular框架在本地开发时，请求后台会涉及到跨域问题，angular 官方解决办法为加载时使用proxy代理文件来配置跨域请求，使请求能够避免浏览器同源策略带来的拦截。但proxy代理文件的有效范围是在angular框架自服务内的，也就是npm run start。我们在开发完成后，需要对angular 项目进行打包，命令为 ng build --prod 此时angular会将你所写的angular风格代码进行转换（本地开发时angular服务启动后默认帮你转换你的代码）最后打包成一个可以部署在第三方服务器内的静态资源文件，这时代理已经失效，如’/api’已经无法被angular正确代理到‘127.0.0.1:8080’了，此时我们需要将打包出的静态文件放入NGINX中

nginx

nginx是一个功能很强大的web容器，它启动后成为一个服务，能够用以承载angular打包出的静态资源文件，这样在访问nginx地址后浏览器将会展示你的前端页面，但此时所有发送给后端的请求路径都是无效的，所以我们可以在nginx中配置请求规则，用以代理到正确的spring boot controller层中。具体代理配置方法网上有很多可以自行搜索，不过请注意代理地址后是否应该加’/’，这对nginx的请求代理影响很大，区别为直接替换，或者是拼接。

前后端合并

其实讲到这里，前后端分离思路已经说完了，就是nginx做前端容器，将build出来的静态文件引入，再使用nginx内置的代理来实现angular 内置代理相同的作用。
现在来说一下前后端合并，springboot中引入静态资源文件的位置是/resources下的static文件夹，这个静态资源文件夹可以放入angular打包出的静态资源文件，但此时路由权限在刷新页面时由springboot接管了，所以会造成一个现象：点击按钮或链接可以正确跳转到angular 中配置好的路由，但是刷新页面时页面显示springboot的404提示，原因就是在springboot接管url是在controller中并未找到你的angular路由，解决办法为在angular路由中启用hash路由 百度关键词 ：angular 6 hash路由
这样在浏览器访问时地址会由127.0.0.1:8080/abc>>>>>127.0.0.1:8080/#/abc 避免spring boot接管angular 的路由导致出错。

总结

以上是我个人在开发angular 6.0x以上项目时碰到的问题和解决方式，以及开发思路（非商业性网站）仅供参考！只希望能够防止自己忘记以及帮助更多的人