generator-jhipster: JHipster does not work with AngularCLI

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)**

jhipster@0.0.0 /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)

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