Generator-jhipster: Failed to use Angular CLI with new jHipster project

[GuiF007]

Overview of the issue

With v.4.13.3 jHipster generator and a freshly generated project, Angular CLI is not working properly :

λ ng g c toto --dry-run
Your global Angular CLI version (1.6.3) is greater than your local
version (1.6.0). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
input.mergeMap is not a function
TypeError: input.mergeMap is not a function
    at Object.callRule (C:\WorksapaceTemp\testJhipsterCR\node_modules\@angular-devkit\schematics\src\rules\call.js:78:18)
    at SchematicImpl.call (C:\WorksapaceTemp\testJhipsterCR\node_modules\@angular-devkit\schematics\src\engine\schematic.js:35:23)
    at Promise (C:\WorksapaceTemp\testJhipsterCR\node_modules\@angular\cli\tasks\schematic-run.js:73:23)
    at new Promise (<anonymous>)
    at Class.run (C:\WorksapaceTemp\testJhipsterCR\node_modules\@angular\cli\tasks\schematic-run.js:72:16)
    at Class.run (C:\WorksapaceTemp\testJhipsterCR\node_modules\@angular\cli\commands\generate.js:152:33)
    at resolve (C:\WorksapaceTemp\testJhipsterCR\node_modules\@angular\cli\ember-cli\lib\models\command.js:261:20)
    at new Promise (<anonymous>)
    at Class.validateAndRun (C:\WorksapaceTemp\testJhipsterCR\node_modules\@angular\cli\ember-cli\lib\models\command.js:240:12)
    at Promise.resolve.then.then (C:\WorksapaceTemp\testJhipsterCR\node_modules\@angular\cli\ember-cli\lib\cli\cli.js:140:24)

##### **Motivation for or Use Case** Angular CLI is present on the package and should be used :) ##### **Reproduce the error** On jHipster 4.13.3, generate monolithic application and try to use Angular CLI. ##### **Related issues** I found tons of open bugs about that, dealing with component versions. Hard to know what to do... ##### **Suggest a Fix** - Update angular/cli to 1.6.3 does not work properly. - I fix the problem removing the component from devDependencies... Not sure it's the best way ! ##### **JHipster Version(s)** 4.13.3 ##### **JHipster configuration** jhipster info Using JHipster version installed locally in current project's node_modules Executing jhipster:info Options: Welcome to the JHipster Information Sub-Generator ##### **JHipster Version(s)**

[email protected] C:\WorksapaceTemp\testJhipsterCR
`-- [email protected]

##### **JHipster configuration, a `.yo-rc.json` file generated in the root folder**

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.mycompany.myapp",
      "nativeLanguage": "en"
    },
    "jhipsterVersion": "4.13.3",
    "baseName": "testJhipsterCR",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mysql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "enableSwaggerCodegen": false,    "jwtSecretKey": "replaced-by-jhipster-info",
    "clientFramework": "angularX",
    "useSass": false,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": [
      "en",
      "fr"
    ]
  }
}

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

Environment and Tools

java version "1.8.0_152"
Java(TM) SE Runtime Environment (build 1.8.0_152-b16)
Java HotSpot(TM) 64-Bit Server VM (build 25.152-b16, mixed mode)

git version 2.15.1.windows.2

node: v8.9.3

npm: 5.5.1

yeoman: 2.0.0

yarn: 1.3.2

Docker version 17.10.0-ce, build f4ffd25

docker-compose version 1.16.1, build 6d1ac219

Congratulations, JHipster execution is complete!

Entity configuration(s) entityName.json files generated in the .jhipster directory

None

Browsers and Operating System

None

• [X] Checking this box is mandatory (this is just to show you read everything)

[gmarziou]

Maybe you could generate another project using ng new and compare its .angular-cli.json with the one from JHipster.

[deepu105]

When you say Angular CLI doesn't work you mean you are unable to create new components using it(given you are trying ng g c)? We do not support running builds using Angular CLI as the webpack setup is drastically different. We clearly have stated in docs that we only support using the new component, pipe etc creation feature from Angular CLI. So need to check whats going wrong. Do you have anymore information that might be useful?

[carloca68]

Hi guys, I'm having the same problem, it may be related to this angular bug report:

input.mergeMap is not a function #8961
https://github.com/angular/angular-cli/issues/8961

[GuiF007]

@deepu105 Yeah I try to use Angular CLI for generation as you said, and we use only Angular CLI for this. I think @carloca68 has a good idea and it seems it's a spaghetti mix version trouble with some components...

As I said, it seems strange that when I remove Angular CLI component from jHipster app, it use the global Angular CLI and it works perfect !

[agoncal]

There was already a similar issue with JHipster 4.12 and an Angular CLI 1.5 : https://github.com/jhipster/generator-jhipster/issues/6861. At the end, upgrading NG CLI worked for me.

[deepu105]

Angular CLI is becoming a PITA

Thanks & Regards,
Deepu

On Thu, Jan 11, 2018 at 9:20 AM, Antonio Goncalves <[email protected]

wrote:

There was already a similar issue with JHipster 4.12 and an Angular CLI
1.5 : #6861 https://github.com/jhipster/generator-jhipster/issues/6861.
At the end, upgrading NG CLI worked for me.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/6971#issuecomment-356859788,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF3-jsacl7VwXPboTxVQU00vifUvLks5tJcRegaJpZM4RZphD
.

[GuiF007]

@agoncal, upgrading Angular CLI (both locally and globally) does not work for me :( The only one thing that makes it works is to remove locally Angular CLI...

Agree with @deepu105, it seems it's becoming a nightmare !

[hirro]

My project is using version 4.13.3 and I had the same problem.
Updated to the latest version of Angular CLI (1.6.0 -> 1.6.6) and problem disappeared.

@GuiF007 are you sure you ran a yarn update after changing package.json?

[GuiF007]

So, with a fresh v4.13.3 Java Hipster app, it seems the latest version of Angular CLI (v1.6.6) solves the problem...

➜  testJhipster git:(master) ✗ ng --version

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.6
Node: 8.9.4
OS: darwin x64
Angular: 5.1.0
... common, compiler, compiler-cli, core, forms, http
... platform-browser, platform-browser-dynamic, router

@angular/cli: 1.6.6
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack-dev-server: 2.9.5
webpack-merge: 4.1.1
webpack-notifier: 1.5.0
webpack-visualizer-plugin: 0.1.11
webpack: 3.10.0

[deepu105]

would you like to PR the version change?

Thanks & Regards,
Deepu

On Sat, Jan 27, 2018 at 2:15 PM, Guillaume [e-mail] wrote:

So, with a fresh v4.13.3 Java Hipster app, it seems the latest version of
Angular CLI (v1.6.6) solves the problem...

➜ testJhipster git:(master) ✗ ng --version

_                      _                 ____ _     ___

/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _| | | | |/ _ | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ __| |_|__, |__,_|_|__,_|_| ____|_____|___|
|___/

Angular CLI: 1.6.6
Node: 8.9.4
OS: darwin x64
Angular: 5.1.0
... common, compiler, compiler-cli, core, forms, http
... platform-browser, platform-browser-dynamic, router

@angular/cli: 1.6.6
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack-dev-server: 2.9.5
webpack-merge: 4.1.1
webpack-notifier: 1.5.0
webpack-visualizer-plugin: 0.1.11
webpack: 3.10.0

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/6971#issuecomment-360984252,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF5tF_AsijSbzD7E71DcVdJ9IX4_Tks5tOyF5gaJpZM4RZphD
.

[GuiF007]

Preparing that :)

[jdubois]

Awesome ! We'll need this for next week's release.

[GuiF007]

@jdubois Nice 👍

[agoncal]

@deepu105 @GuiF007 @jdubois Guys, I don't even know if I should create a new issue or not as I'm facing an problem now (Angular CLI is become very fragile). I just wanted to create a new module, so I used ng generate module blah blah blah and got:

Error: dryRunSink.commit(...).ignoreElements is not a function
dryRunSink.commit(...).ignoreElements is not a function

And of course, I'm not the only one (https://github.com/maximegris/angular-electron/issues/116). I've tested with Angular CLI 1.6.0 and 1.6.6 and got the same problem.

Don't know what you could do with that.

Anyway, I'll create a new module manually ;o)

[deepu105]

If its upto me I'll just remove official support for Angular CLI, its a PITA. I'm glad we didn't rely on ANgular CLI for the webpack builds.

@agoncal for your issue the error definitely looks like it comes from the CLI directly so I'm not sure what we can do here

[GuiF007]

This Angular CLI sucks really... Maybe NodeJs version ? (I'm on last LTS 8.9.4)

[maku]

@deepu105 No offense, but just for the record: angular/cli builds are super rock solid. I use it for several rather large projects and I don't regret it at any time. I do not see any good reason to mess around yourself with the complex build topic. Also it seems difficult to stay on top of the latest angular features... The cli takes care of all of theses points (just my personal opinion)

[deepu105]

@maku i'm glad you had a better experience with it. And as I have said earlier, trying to get it working earlier was really a lot of trouble, so if someone can get the generated projects work well with CLI then i'm still open to consider it.

[agoncal]

Just so you know, Angular CLI 6 changes a lot of things (eg. .angular-cli.json becomes angular.json, etc.)

[shorstki]

Angular CLI definitely should be the out of the box solution for JHipster Angular based front end, custom webpack build causes a lot of issues for example with keeping Angular up to date. On the website there is info that ng serve is supported, but it's not working in newest [email protected].

[gmarziou]

This is done on main branch and will available in release 7

[shorstki]

Great news, when the release is planned?

[gmarziou]

As usual with open source: when it's ready, probably before a COVID-19 vaccine. ;)