Generator-jhipster: JHipster does not work with AngularCLI

[Martin-Wegner]

Overview of the issue

Yo hipsters,

today I tried JHIpster the first time and as an Angular 5 developer I want to use the best AOT and the best webpack building and packaging -> I want to use AngularCLi with ng build --prod --build-optimizer.

So I created a new, clean project and run ng build --prod --build-optimizer which fails :(

With SASS support it is even worse :( But this can be addressed in a separate issue after this issue was fixed.

Not so hip...

Motivation for or Use Case

Using AngularCLI for AOT and webpack building and packaging.

Reproduce the error

Create a new, clean project:

? Which *type* of application would you like to create? Monolithic application (recommended for simple projects)
? What is the base name of your application? jhipster
? What is your default Java package name? com.mycompany.myapp
? Do you want to use the JHipster Registry to configure, monitor and scale your application? No
? Which *type* of authentication would you like to use? HTTP Session Authentication (stateful, default Spring Security mechanism)
? Which *type* of database would you like to use? SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle, MSSQL)
? Which *production* database would you like to use? Microsoft SQL Server
? Which *development* database would you like to use? H2 with disk-based persistence
? Do you want to use the Spring cache abstraction? Yes, with the Ehcache implementation (local cache, for a single node)
? Do you want to use Hibernate 2nd level cache? Yes
? Would you like to use Maven or Gradle for building the backend? Maven
? Which other technologies would you like to use? 
? Which *Framework* would you like to use for the client? Angular 5
? Would you like to enable *SASS* support using the LibSass stylesheet preprocessor? No
? Would you like to enable internationalization support? No
? Besides JUnit and Karma, which testing frameworks would you like to use? Protractor
? Would you like to install other generators from the JHipster Marketplace? No

Run ng build --prod --build-optimizer.

ERROR in ./src/main/webapp/app/app.main.ts
Module build failed: Error: Angular Compiler was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed. You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (/work/jhipster/node_modules/@ngtools/webpack/src/loader.js:458:19)
 @ multi ./src/main/webapp/app/app.main.ts
ERROR in ./src/main/webapp/app/polyfills.ts
Module build failed: Error: Angular Compiler was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed. You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (/work/jhipster/node_modules/@ngtools/webpack/src/loader.js:458:19)
 @ multi ./src/main/webapp/app/polyfills.ts

Suggest a Fix

Removing /work/jhipster/node_modules/@angular/cli/node_modules/@ngtools/ changes the error:

WARNING in Circular dependency detected:
src/main/webapp/app/account/account.route.ts -> src/main/webapp/app/account/index.ts -> src/main/webapp/app/account/account.route.ts

WARNING in Circular dependency detected:
src/main/webapp/app/account/index.ts -> src/main/webapp/app/account/account.route.ts -> src/main/webapp/app/account/index.ts

WARNING in Circular dependency detected:
src/main/webapp/app/admin/admin.route.ts -> src/main/webapp/app/admin/index.ts -> src/main/webapp/app/admin/admin.route.ts

WARNING in Circular dependency detected:
src/main/webapp/app/admin/index.ts -> src/main/webapp/app/admin/admin.route.ts -> src/main/webapp/app/admin/index.ts

WARNING in Circular dependency detected:
src/main/webapp/app/home/home.module.ts -> src/main/webapp/app/home/index.ts -> src/main/webapp/app/home/home.module.ts

WARNING in Circular dependency detected:
src/main/webapp/app/home/home.route.ts -> src/main/webapp/app/home/index.ts -> src/main/webapp/app/home/home.route.ts

WARNING in Circular dependency detected:
src/main/webapp/app/home/index.ts -> src/main/webapp/app/home/home.route.ts -> src/main/webapp/app/home/index.ts

WARNING in Circular dependency detected:
src/main/webapp/app/shared/auth/user-route-access-service.ts -> src/main/webapp/app/shared/index.ts -> src/main/webapp/app/shared/auth/user-route-access-service.ts

WARNING in Circular dependency detected:
src/main/webapp/app/shared/index.ts -> src/main/webapp/app/shared/auth/user-route-access-service.ts -> src/main/webapp/app/shared/index.ts

WARNING in Circular dependency detected:
src/main/webapp/app/shared/shared-common.module.ts -> src/main/webapp/app/shared/index.ts -> src/main/webapp/app/shared/shared-common.module.ts

WARNING in Circular dependency detected:
src/main/webapp/app/shared/shared.module.ts -> src/main/webapp/app/shared/index.ts -> src/main/webapp/app/shared/shared.module.ts

ERROR in ./src/main/webapp/manifest.webapp
Module parse failed: Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
| {
|   "name": "Jhipster",
|   "short_name": "Jhipster",
|   "icons": [
 @ ./src/main/webapp/app/polyfills.ts 63:0-29
 @ multi ./src/main/webapp/app/polyfills.ts

JHipster Version(s)

4.14.0

JHipster configuration

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] /work/jhipster
└── (empty)

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


<details>
<summary>.yo-rc.json file</summary>
<pre>
{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.mycompany.myapp"
    },
    "jhipsterVersion": "4.14.0",
    "baseName": "jhipster",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": "8080",
    "authenticationType": "session",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mssql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "enableSwaggerCodegen": false,
    "rememberMeKey": "replaced-by-jhipster-info",
    "clientFramework": "angularX",
    "useSass": false,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [
      "protractor"
    ],
    "jhiPrefix": "jhi",
    "enableTranslation": false
  }
}
</pre>
</details>


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

<details>
<summary>JDL entity definitions</summary>

<pre>




</pre>
</details>


##### **Environment and Tools**

java version "1.8.0_162"
Java(TM) SE Runtime Environment (build 1.8.0_162-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.162-b12, mixed mode)

git version 2.7.4

node: v9.5.0

npm: 5.6.0

yeoman: 2.0.1

yarn: 1.3.2

Congratulations, JHipster execution is complete!

Browsers and Operating System

Xubuntu (Ubuntu 16.04.3 LTS)

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

[gmarziou]

We don't support ng build as we have our own build.

[jdubois]

No, you can't use the Webpack build from Angular CLI. It's not a bug, it's documented in our process.
I'm sorry about this, but Angular CLI just does a very simple Hello World, and is just not enough for our needs. It's also much slower - I used it yesterday and that was just horrible. Ours works very well, but if you don't want to use it, then I don't know what to tell you... it just won't work.

[Martin-Wegner]

AngularCLi is slower because they optimize the build (tree shaking, AOT and other crazy stuff -> minimal file size and best performance/runtime speed)...

Sorry, but If JHipster does not support AngularCLI builds it is useless for me :/

[jdubois]

We also do tree shaking and AOT. We did this before Angular CLI ever existed. And last time there was a major build bug on Angular, we corrected it before Angular CLI.

[Martin-Wegner]

@jdubois being the first does not always mean being the best joking Do you have any comparison results for size and speed? Thanks in advance!

[jdubois]

They just do a simple "hello world", with a few empty files, how could you compare? And why would we have the burden of the proof?

[Martin-Wegner]

Because you are hipsters and not Google ;) I think it would be very interesting to compare a larger project. But I know it will cost some time :/ But anyway, thanks for your time! I will think about it.

[deepu105]

@Martin-Wegner if you are so eager you are welcome to do a comparison and prove us wrong.
I don't know why you feel having the build from Angular CLI is so much important. It's just a webpack configuration similar to what we do. You are welcome not to use JHipster and create everything using Angular CLI from scratch if the build is the most important part of your dev process.

[Martin-Wegner]

@deepu105 my concerns arises from the Angular and Angular CLI release notes. Everything is about the size of the build bundle, AOT and the boot time of the application... It seems such a big, hard, complex but also important topic for the Angular guys... Having a Ferrari engine in a Volkswagen :)

[deepu105]

As I said so not assume before you have solid comparisons. Maybe you don't need a Ferrari in the first place. A proper working Volkswagen may be more useful than a problematic Ferrari.

[deepu105]

Anyway, we don't need to have this discussion again as we decided to give up trying to make Angular CLI builds work after spending a lot of time. Its such a PITA. search for the issue in our repo regarding ANgular CLI not working due to version conflicts for example. If you are interested you can give it a try and make a PR as well.

[Martin-Wegner]

@deepu105 even without knowing details about JHipster, I would assume the following:

1. Using a different client framework than Angular2+ -> nothing must be changed
2. Using Angular2+ as the client framework -> Remove Webpack and replace it's functionality with AngularCLI (which should be possible)

Is this assumption correct?

[gmarziou]

1. no, our webpack's config for React is different than for Angular. As an example, just think about jsx and tsx extensions for React.
2. As Deepu said, your contribution as a pull request on this topic will be welcome

[deepu105]

@Martin-Wegner yes your assumption is correct. You are welcome to PR a build that works using Angular CLI. But still, I wouldn't rely on ng CLI unless issues like these are resolved so if you know how to solve that than we are open to change

https://github.com/jhipster/generator-jhipster/issues/6971

React part is separate hence no need to worry about that.

[shorstki]

Having NG CLI support would be great, I'd even rather use only NG CLI instead of custom webpack build we're having now in jhipster but I've tried to run the ng serve command in existing project and there are a lot if issues on the way.

[gmarziou]

Please don't duplicate your comments, you posted the same in #6971

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