使用Profile创建第一个Grails+Angular2应用

栏目: Groovy · 发布时间: 6年前

内容简介:使用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两个子目录:

使用Profile创建第一个Grails+Angular2应用

  • 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

运行成功后,访问:

这样,一个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

使用Profile创建第一个Grails+Angular2应用

错误原因

经过排查是因为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>'

再次尝试启动,依旧满屏红:

使用Profile创建第一个Grails+Angular2应用

Property 'cache' does not exist on type 'Observable<any>' ,第一反应是插件版本不对,但具体怎样,还是求助了Google。

错误原因

rxjs5开始,cache方法便被remove,默认创建项目的rxjs版本为5.0.1,故抛出此异常。

解决

移除下图中的cache()方法,项目正常启动。

使用Profile创建第一个Grails+Angular2应用


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

精益创业方法论

精益创业方法论

龚焱 / 机械工业出版社 / 2015-3 / 69.00元

为什么无数新创企业以失败告终? 为什么天才点子、完美计划和完美的执行是导致失败的关键? 颠覆性、创造性、混乱状况是否可以加以管理? Facebook在6年间以病毒一样惊人的速度传播,微信短短两年获得了6亿用户,这些公司都遵循着一套科学、严密的创业流程和工业方法,这种方法教你认清自以为是的假象,让你在亚马逊丛林的迷雾探险时成功找到水源,一切不是未来时,而是现在时,再砰然心动的点子、......一起来看看 《精益创业方法论》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具