文章目录

前言

当前 Java EE 中, SpringBoot 已经逐渐成为主流, 慢慢替代了笨重的 SSM, 而随着前端的发展, 类似 Angular 这种单页面前端框架也逐渐成为主流, 目前比较火的前端框架, 比如: Angular, VueJS, React 等, 今天, 笔者就带着大家手把手创建一个 SpringBoot 整合 Angular2+ 的项目.

1. 环境准备

1.1 框架版本

本次整合的环境为 SpringBoot 2+ 和 Angular 2+ , 笔者的环境为:

org.springframework.bootspring-boot-starter-parent2.1.3.RELEASE 
 
 

{"name": "angboot-web","version": "0.0.0","scripts": {"ng": "node --max-old-space-size=6000 ./node_modules/@angular/cli/bin/ng","start": "npm run ng -- serve","build:ng": "npm run build:ng:app","build:ng:app": "npm run ng -- build --vendor-chunk","build": "npm run build:ng","build:prod": "npm run build:ng:prod","build:watch": "concurrently -r "npm run build:ng:app -- --watch"","test": "npm run test:app -- --watch false","test:app": "npm run ng -- test angboot-web","lint": "tsc -p rules/tsconfig.json && npm run ng -- lint","e2e": "npm run ng -- e2e --serve false","generate-index-files": "node ./generate-index-files.js"},"private": true,"dependencies": {"@angular/animations": "^6.1.3","@angular/common": "^6.1.3","@angular/compiler": "^6.1.3","@angular/core": "^6.1.3","@angular/forms": "^6.1.3","@angular/http": "^6.1.3","@angular/platform-browser": "^6.1.3","@angular/platform-browser-dynamic": "^6.1.3","@angular/router": "^6.1.3","core-js": "^2.4.1","rxjs": "^6.2.0","lodash": "^4.17.4","@ng-bootstrap/ng-bootstrap": "^2.0.0","bootstrap": "^4.0.0","bootstrap-float-label": "4.0.2","split.js": "^1.2.0","stompjs": "^2.3.3","zone.js": "^0.8.19"},"devDependencies": {"@angular/compiler-cli": "^6.1.3","@angular-devkit/build-angular": "~0.7.4","typescript": "^2.7.2","@angular/cli": "~6.1.3","@angular/language-service": "^6.1.3","@types/jasmine": "~2.8.3","@types/jasminewd2": "^2.0.2","@types/jquery": "^2.0.49","@types/node": "^6.0.101","@types/geojson": "^1.0.0","concurrently": "^3.5.1","codelyzer": "^4.2.1","jasmine-core": "~2.8.0","jasmine-spec-reporter": "~4.2.1","karma": "~2.0.0","karma-chrome-launcher": "~2.2.0","karma-coverage-istanbul-reporter": "~1.4.2","karma-jasmine": "~1.1.1","karma-jasmine-html-reporter": "^0.2.2","protractor": "~5.1.2","ts-node": "~4.1.0","tslint": "~5.9.1","vinyl-fs": "^2.4.4","through2": "^2.0.3","js-yaml": "^3.11.0","rxjs-tslint": "^0.1.4"}
 }
 

如何环境的大版本有所不同, 代码可能有有一些兼容性写法问题, 大家在网上搜索或者查阅官方文档笔者相信可以找到对应的解决方式. 当然, 也可以评论留言, 笔者和你一起研究学习.

1.2 初始化项目

2. 整合 SpringBoot 与 Angular

2.1 Angular 配置

2.1.1 编译输出路径

首先最终项目运行起来是要运行Angular 编译后的 chunk 等 js/html 文件, 所以首先需要将 Angular 的编译输出路径指定到 SpringBoot 的类路径下, 有两种方式:

笔者这里采用第二种, 即直接将 Angular 编译输出路径指定到 SpringBoot 的默认类路径下, 即 static 文件夹下的 app 目录下.
所以, 修改 angular.json 文件中的 outputPath:

"projects": {"angboot-web": {"root": "","sourceRoot": "src","projectType": "application","architect": {"build": {"builder": "@angular-devkit/build-angular:browser","options": {// 修改这里"outputPath": "../src/main/resources/static/app/","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "src/tsconfig.app.json","showCircularDependencies": false,"assets": ["src/favicon.ico","src/assets"],"styles": ["src/styles.scss"],"scripts": []},
 

2.1.2 指定 basehref

修改 web/src/index.html中的 base href 为

由于Angular 的编译输出路径指定在 static 下的 app 文件夹下, 所以 base href 中需要指定 app, 因为 static/ 才是 SpringBoot 的类路径. 这样访问 /app/routerName 才能访问到 angular 中.

2.1.3 配置 Angular 路由

为了便于测试, 在此配置 Angular 的路由, 而且工作中也肯定会有大量的路由存在.
大致配置如下:
项目中声明了两个模块, 使用Angular 懒加载机制进行路由跳转.

const routes: Routes = [{path: "",children: [{path: "portal",loadChildren: "./portal/portal-app.module#PortalAppModule"},{path: "em",loadChildren: "./em/em-app.module#EmAppModule"},{path: "**",redirectTo: "portal"}]}
 ];
 

两个子模块的路由配置如下:

const emRoutes: Routes = [{path: "",component: EMAppComponent,children: [{path: "monitor",component: EmMonitorComponent},{path: "**",redirectTo: "monitor"}]}
 ];
 

const portalRoutes: Routes = [{path: "",component: PortalAppComponent,children: [{path: "welcome",component: WelcomeComponent},{path: "**",redirectTo: "welcome"}]}
 ];
 

2.2 SpringBoot 配置

由于想要通过 ip:port/contextPath/app/routerPath 访问到 Angular 的路由中, 就需要 Server 端(Servlet/SpringMVC/SpringBoot 等等…)指定将 Server 端的 404 全部转发到 angular 编译后的 index.html 页面上, 因为 routerPath 并没有真正存在于 Server 端的 Controller Mapping 中. 这点可以参考 Angular 官方文档.

SpringBoot 2.x 之后可以通过ErrorPageRegistrar指定ErrorPage:

@Configuration
 public class AngBootErrorConfiguration implements ErrorPageRegistrar {@Overridepublic void registerErrorPages(ErrorPageRegistry registry) {ErrorPage[] errorPages = new ErrorPage[1];// Angular need server redirect 404 to index of angular.errorPages[0] = new ErrorPage(HttpStatus.NOT_FOUND, "/app/index.html");registry.addErrorPages(errorPages);}
 }
 

将 404 全部重定向到 static/app/index.html(Angular 编译后的输入路径) 下.
这对应于古老的 web.xml 配置中的如下配置:

	404/app/index.html
 

一般来说, 在真实的项目实践中, 在 server 都会存在一个 index.html 作为整个应用程序的首页, 我们在 templates/ 下新建一个 index.html, 并在这个首页上跳转到 angular 的具体模块中.

 
 
 
 Portal
EM
 
 
 

3. 测试

首先将 angular 编译, 然后在启动 SpringBoot, 笔者采用 Ant+Maven 的方式自动化编译,构建项目, 如果读者 checkout 笔者的项目 angboot, 可以通过以下步骤启动 server.

关于笔者项目的使用大家可以参考使用手册 angboot document, 改项目笔者会从实际工作开发中不断汲取经验并进行更新, 旨在提供一个开发模板, 聚合必用的功能, 为广大用户提供一个最佳实践架构, 项目刚发布不久, 欢迎大家 star, watch, pull request 提需求, 报 bug, coding 等…

源码传送门: https://github.com/DreamLi1314/angboot