gradle - jhipster 项目不会为产品配置文件 : gradlew -Pprod bootWar fails on taks webpack 构建

Question

问题已解决，请参阅下面的信息

在寻找解决方案 2 天后，我现在放弃了。我在网上找不到类似的问题，我不知道该怎么办。

希望有人可以帮助那里...

问题

应用程序正在构建和运行良好 gradlew -Pdev bootWar jibDockerBuild
但是，选择 prod 配置文件时构建将不起作用:gradlew -Pprod bootWar jibDockerBuild
引用异常

ERROR in Illegal State: referring to a type without a variable
{"filePath":"D:/dev/myApp/node_modules/@angular/forms/forms.d.ts",
"name":"FormGroupDirective","members":[]}

完全异常(exception)

执行时打印以下内容:

D:\dev\myApp>gradlew -Pprod bootWar jibDockerBuild
> Task :yarn_install
yarn install v1.9.4
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info fsevents@1.2.4: The platform "win32" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning " > bootstrap@4.1.3" has unmet peer dependency "jquery@1.9.1 - 3".
warning " > bootstrap@4.1.3" has unmet peer dependency "popper.js@^1.14.3".
warning " > ngx-webstorage@2.0.1" has incorrect peer dependency "@angular/core@^5.0.0".
[5/5] Building fresh packages...
Done in 97.47s.

> Task :webpack
yarn run v1.9.4
$ yarn run cleanup && yarn run webpack:prod:main && yarn run clean-www
$ rimraf build/{aot,www}
$ yarn run webpack --config webpack/webpack.prod.js --profile
$ node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js --config webpack/webpack.prod.js --profile
(node:28256) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Hash: 6aab3d14e434ee333c51
Version: webpack 4.8.0
Time: 8812ms
Built at: 2018-10-07 18:52:03
 6 assets
Entrypoint polyfills = app/polyfills.6aab3d14e434ee333c51.bundle.js
Entrypoint global = global.1e92ecdbfdaf2bb32590.css app/global.6aab3d14e434ee333c51.bundle.js
Entrypoint main = app/main.6aab3d14e434ee333c51.bundle.js
[0] ./src/main/webapp/app/app.main.ts 0 bytes {0} [built]
    factory:4638ms building:3545ms = 8183ms
[2] ./src/main/webapp/content/css/global.css 39 bytes {1} [built]
    factory:4639ms building:2778ms = 7417ms
[3] ./src/main/webapp/app/polyfills.ts 0 bytes {2} [built]
    factory:4638ms building:3540ms = 8178ms
    + 1 hidden module

ERROR in Illegal State: referring to a type without a variable {"filePath":"D:/dev/myApp/node_modules/@angular/forms/forms.d.ts","name":"FormGroupDirective","members":[]}
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

> Task :webpack FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':webpack'.
> Process 'command 'yarn.cmd'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

Deprecated Gradle features were used in this build, making it incompatible with Gradle 5.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/4.9/userguide/command_line_interface.html#sec:command_line_warnings

BUILD FAILED in 1m 58s
5 actionable tasks: 3 executed, 2 up-to-date

环境

window 10

使用本地安装在当前项目的 node_modules 中的 JHipster 版本
执行 jhipster:info
选项:来自-cli:true
欢迎使用 JHipster 信息子生成器

JHipster 版本

myApp@0.0.0 D:\dev\myApp
`-- generator-jhipster@5.4.1

JHipster 配置，一个 .yo-rc.json根文件夹中生成的文件

<details>
<summary>.yo-rc.json file</summary>
<pre>
{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "de.myApp.myApp",
      "nativeLanguage": "de"
    },
    "jhipsterVersion": "5.4.1",
    "applicationType": "monolith",
    "baseName": "myApp",
    "packageName": "de.myApp.myApp",
    "packageFolder": "de/myApp/myApp",
    "serverPort": "8080",
    "authenticationType": "session",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "mysql",
    "prodDatabaseType": "mysql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "gradle",
    "enableSwaggerCodegen": false,
    "rememberMeKey": "YourJWTSecretKeyWasReplacedByThisMeaninglessTextByTheJHipsterInfoCommandForObviousSecurityReasons",
    "clientFramework": "angularX",
    "useSass": false,
    "clientPackageManager": "yarn",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": true,
    "nativeLanguage": "de",
    "languages": [
      "de",
      "en",
      "fr"
    ],
    "appsFolders": [
      "myApp"
    ],
    "directoryPath": "../",
    "monitoring": "elk",
    "consoleOptions": [
      "curator"
    ],
    "jwtSecretKey": "YourJWTSecretKeyWasReplacedByThisMeaninglessTextByTheJHipsterInfoCommandForObviousSecurityReasons"
  }
}
</pre>
</details>

实体配置的 JDL entityName.json .jhipster 中生成的文件目录

跳过

环境与工具

java版本“1.8.0_181”
Java(TM) SE 运行时环境 (build 1.8.0_181-b13)
Java HotSpot(TM) 64 位服务器 VM(内部版本 25.181-b13，混合模式)

git 版本 1.8.4.msysgit.0

节点:v8.11.3

npm:5.6.0

yarn :1.9.4

Docker 版本 18.06.1-ce，构建 e68fc7a

docker-compose 版本 1.22.0，构建 f46880fe

Answer 1

我找到了问题的原因:

我显然将 ReactiveFormModul 导入放置在错误的位置。我把它放在一个“向上”的模块中，但实际上，我必须将它放入我实际拥有定义表单的组件的模块中。老实说......我不明白为什么这是一个问题，也许有人可以澄清一下。

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';

*** other imports

@NgModule({
    imports: [***, ReactiveFormsModule, *** ROUTER stuff,
    declarations: [MyReactiveFormComponent],
    schemas: [***]
})
export class MyReactiveFormModule {} 

在此之后，我还发现了在 dev-build 中运行良好的其他问题(再次......不明白原因。我想这与更严格的“编译”配置有关):

引用 formGroup 的变量被声明为“私有(private)”。因此，我在 prod 配置文件上遇到了编译错误。我必须更改它，以便它可以被 html 模板访问。

在 html 中访问的变量必须是公共(public)的(或通过 getter 方法访问)

在后续 html 元素中访问表单控件必须是“公共(public)的”

代码示例:
MyReactiveComponent.ts:

this.myForm = this.fb.group({
            id: [this.myObject.id],
            date: [this.myObject.date, Validators.required],
            number: [this.myObject.number, [Validators.required, Validators.min(2), Validators.max(100)]],
            dynamicOptions: this.fb.array([]),
            prefilledOptions: [this.prefilledOptions, Validators.required]
        }); 

MyReactiveComponent.html:

<div class="row justify-content-center">
<div class="col-8">
    <form [formGroup]="myForm" id="myFormId" novalidate (ngSubmit)="save()" #editForm="ngForm">
        <h2>Create or edit a Play</h2>
        <div>
            <jhi-alert-error></jhi-alert-error>
            <div class="form-group">
                <input type="number" class="form-control" formControlName="number" (blur)="updateNumber()" id="field_number" required min="2" jhiMin="2" max="100" jhiMax="100"/>
                <div [hidden]="!(number?.dirty && number?.invalid)">
                    <small class="form-text text-danger"
                    [hidden]="!number?.errors?.required">
                    This field is required.
                    </small>
...

例如，访问“number?.dirty”中的数字需要有一个 getter 方法才能访问它:

get number() {
    return this.myForm.get('number') as FormControl;
}

希望在遇到困难时对其他人有所帮助...