使用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两个子目录：

Paste_Image.png

• 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/
  

  

  Paste_Image.png

• client: http://localhost:4200/
  

  

  Paste_Image.png

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

Paste_Image.png

错误原因

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

再次尝试启动，依旧满屏红：

Paste_Image.png

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

错误原因

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

解决

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

Paste_Image.png