组合 Angular 个人资料项目

本指南将引导你完成从 Angular 2 个人资料开始创建单一构建的过程。

作者： James Kleeh

Grails 版本 3.3.0

1 Grails 培训

Grails 培训 - 由创建和积极维护 Grails 框架的人员开发并提供的！。

2 开始

Grails 3 中的 Angular 2 个人资料可提供开箱即用的多项目构建。如今，有很多选项可供你构建和打包你的应用程序。确定最适合你需要的选项非常重要。对于那些希望将客户端侧应用程序与其 Grails 应用程序捆绑在一起的人来说，本指南适合你。在本指南中，我将介绍一些简单的快速步骤，让你能够从 Angular 2 个人资料创建的多项目构建开始运行组合项目。

2.1 你的需要

要完成本指南，你需要以下内容

一些时间
好的文本编辑器或 IDE
已安装 JDK 1.7 或更高版本并且配置了 JAVA_HOME

2.2 如何完成该指南

要开始，请执行以下操作

下载并解压源代码

或者

克隆 Git 存储库
git clone https://github.com/grails-guides/angular2-combined.git

Grails 指南存储库包含两个文件夹

initial 初始项目。通常是一个简单的 Grails 应用程序，其中添加了一些代码，让你可以抢先一步。
complete 完成的示例。它是完成指南中介绍的步骤并在 initial 文件夹中应用这些改动的结果。

要完成该指南，请转至 initial 文件夹

cd 进入 grails-guides/angular2-combined/initial

并按照下一部分中的说明进行操作。

如果你 cd 进入 grails-guides/angular2-combined/complete，则可以直接转至完整示例

3 编写应用程序

3.1 组合应用程序

由于需要一个项目，因此不再需要 settings.gradle 文件。

rm -f settings.gradle

将 server 的所有内容移动到当前目录

mv server/* ./

删除 server 目录

rm -r server

将 client 目录移动到 src/main 目录

mv client src/main/

删除不再在 client 目录中使用的 build.gradle 文件

rm -f src/main/client/build.gradle

现在您有一个包含位于 src/main/client 中的客户端应用程序的单个 Grails 项目！

3.2 组合构建

如果能够通过执行 run-app 来“使用”应用程序，就像带有 Web 配置文件的典型 Grails 应用程序一样，这将非常理想。为实现这一点，需要进行额外的配置。

为了支持构建过程，首先需要添加一些 NPM 脚本。将下列内容添加到 package.json 文件中。

src/main/client/package.json

{
  ...
  "scripts": {
    "build": "ng build --prod",
    "buildDev": "ng build",
    "buildWatch": "ng build --watch=true",
  ...
}

下一步是添加 Gradle Node 插件。

build.gradle

buildscript {
    dependencies {
        classpath "com.moowork.gradle:gradle-node-plugin:1.0.1"
    }
}

apply plugin:"com.moowork.node"

既然我们拥有该插件，需要对其进行配置并使用它创建一些任务来连接到 Grails 应用程序的构建过程。

build.gradle

node {
    version = '6.9.1'
    download = true
    nodeModulesDir = file("src/main/client")
}

task buildClientDev(type: NpmTask, dependsOn: 'npmInstall') {
    group = 'build'
    description = 'Compile client side assets for development'
    args = ['run', 'buildDev']
}

task buildClient(type: NpmTask, dependsOn: 'npmInstall') {
    group = 'build'
    description = 'Compile client side assets for production'
    args = ['run', 'build']
}

task buildClientWatch(type: NpmTask, dependsOn: 'npmInstall') {
    group = 'application'
    description = 'Builds and watches the client side assets for rebuilding'
    args = ['run', 'buildWatch']
}

task clientTest(type: NpmTask, dependsOn: 'npmInstall') {
    group = 'verification'
    description = 'Executes client side unit tests'
    args = ['run', 'test']
}

task clientIntegrationTest(type: NpmTask, dependsOn: 'npmInstall') {
    group = 'verification'
    description = 'Executes client side integration tests'
    args = ['run', 'e2e']
}

bootRun.dependsOn(buildClientDev)

war.dependsOn(buildClient)

test.dependsOn(clientTest)

integrationTest.dependsOn(clientIntegrationTest)

clean {
    delete fileTree(dir: "src/main/webapp")
}

3.3 更改配置

我们需要在构建并捆绑之后更改客户端侧资产将存储的位置。修改 apps.outDir 设置以指向 webapp 文件夹。

src/main/client/angular-cli.json

...
  "apps": [
    {
      "root": "src",
      "outDir": "../webapp",
...

由于这个应用程序不再需要 CORS，因此应在配置中将其关闭。找到 grails.cors.enabled 并移除该配置或将其设置为 false。

grails-app/conf/application.yml

grails:
    cors:
        enabled: false

为了在没有 /static 前缀的情况下解决我们的 index.html，有必要设置资源模式。

grails-app/conf/application.yml

grails:
    resources:
        pattern: /**

当用户浏览您的页面时，它应将他们定向到客户端侧应用程序。默认情况下，在 rest-api 应用程序中，它将显示关于您的应用程序的一些元数据。要更改该行为，请修改 UrlMappings.groovy。

grails-app/controllers/angular2/combined/UrlMappings.groovy

"/"(uri: "/index.html")

4 运行应用程序

合并 Angular 2 多项目构建到单个项目中所需的一切均已完成。

要运行该应用程序，请使用 ./gradlew bootRun 命令，这将在端口 8080 上启动应用程序。

5 您是否需要 Grails 方面的帮助？

Object Computing, Inc. (OCI) 赞助了本指南的创作。各种咨询和支持服务均可使用。

OCI 是 Grails 的家

认识团队