内容简介:使用Profile创建第一个Grails+Angular2应用
去年开始,团队的项目慢慢转变为微服务架构,通过Server(Groovy+Grails)+ Gateway +Client(Angualr2+Angualr CLI)彻底实现前后台分离,这对于大型项目是非常有优势的,但对于小项目又显得过于笨重,为了不放弃使用Grails和Angualr2又可以减轻项目管理的工作,我选择用Grails的Angualr2 Profile创建应用,它可以帮助我们快速建立和同时管理server+client两个应用,此文便是记录第一次使用Grails的Profile创建Angualr2应用及遇到的坑。
背景
随着单页面应用( Single-Page Application ,简写SPA)的广泛普及,越来越多的Grails的开发者开始寻找SPA框架,以提高JS客户端的开发效率,我也曾一度转战Meteor,好在,从Grails3.1开始,Grails WEB开发框架便引入了对Angular JavaScript框架的支持,它可以借助AngularJS的特性快速生成SPA应用代码,提高前端的开发效率,让一切都变得简单。
前期准备
创建应用前,我们需要安装及配置以下环境:
-
Grails ->3.2.1+
-
Node -> v5+
-
NPM -> v3+
-
Angular CLI
创建应用
使用profile angular2创建Grails应用:
grails create-app grails3-angular2 --profile angular2
下图即为Grails+Angualr2 的一个标准的目录结构,主要包括client和server两个子目录:
-
client
就是一个Angular CLI的前端应用,所以Angular CLI的command都支持,故profile不提供相应command,具体可查阅 Angular CLI 。
-
server
一个标准的Grails目录结构,不再复赘,具体参考 Grails官方文档 。
启动项目
Grails提供了3个命令启动项目,可根据自己的需求选择启动命令:
-
启动server:
./gradlew server:bootRun
-
启动client:
./gradlew client:bootRun
-
同时启动server和client:
./gradlew bootRun --parallel
运行成功后,访问:
-
server: http://localhost:8080/
-
client: http://localhost:4200/
这样,一个Grails+Angualr2的项目便创建成功了,剩下的只是按照需求写写画画即可。你可以通过Grails的命令创建Domain: grails create-domain-class com.demo.Blog
,也可以通过Angualr CLI创建前端组件: ng g component blog
。
需要指出的是,由于client端和server端将在不同的端口上运行, 因此需要 cors 配置,具体在server端 server/grails-app/conf/application.yml
配置:
grails: cors: enabled: true
测试
Grails提供了两个命令去运行测试:
-
./gradlew test :单元测试,包括Karma 和 Jasmine.
-
./gradlew integrationTest :集成测试
坑
这样一个看似简单的项目创建,过程中依旧碰到了许多问题,在这儿我也记录一下。
FAILURE: Build failed with on Exception
按照官方文档创建了应用,迎接我的却是 FAILURE
:
错误原因
经过排查是因为build.gradle中的第八行 classpath "org.grails.plugins:hibernate5:${gormVersion-".RELEASE"}"
,读取的变量gormVersion并未被定义(我也是很无奈...)。
解决
直接指定hibernate5的版本 classpath "org.grails.plugins:hibernate5:6.0.4"
。
Property 'cache' does not exist on type 'Observable<any>'
再次尝试启动,依旧满屏红:
Property 'cache' does not exist on type 'Observable<any>'
,第一反应是插件版本不对,但具体怎样,还是求助了Google。
错误原因
rxjs5开始,cache方法便被remove,默认创建项目的rxjs版本为5.0.1,故抛出此异常。
解决
移除下图中的cache()方法,项目正常启动。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 创建一个促进社区合作的移动应用
- Spring Boot:创建第一个应用
- 使用TypeScript开发React应用(二) - 创建组件
- 帮助您了解和创建ReactJS应用的快速指南
- 使用TypeScript开发React应用(三) - 创建状态组件
- 使用 Hyperledger Composer Playground 创建一个投票应用原型
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Convergence Culture
Henry Jenkins / NYU Press / 2006-08-01 / USD 30.00
"Convergence Culture" maps a new territory: where old and new media intersect, where grassroots and corporate media collide, where the power of the media producer, and the power of the consumer intera......一起来看看 《Convergence Culture》 这本书的介绍吧!
HTML 编码/解码
HTML 编码/解码
HEX CMYK 转换工具
HEX CMYK 互转工具