サードパーティのフレームワークをJHipsterプロジェクトと統合することは可能ですか？

Question

インストールガイド（https://vmware.github.io/clarity/get-started）に続いて、私が作成したJHipsterプロジェクトにClarity Design System（https://vmware.github.io/clarity/）をインストールしようとしました。 npm installを実行した後、.angular-cli.jsonにスタイルとスクリプトを追加し、app.module.tsにインポート宣言を追加しました。残念ながら、これはうまくいかなかった：

ERROR in ./node_modules/clarity-angular/modal/modal.js 
Module not found: Error: Can't resolve '@angular/animations' in '/Users/ndinatale/src/llqa-3-prototype/node_modules/clarity-angular/modal' 
@ ./node_modules/clarity-angular/modal/modal.js 7:0-81 
@ ./node_modules/clarity-angular/modal/index.js 
@ ./node_modules/clarity-angular/index.js 
@ ./src/main/webapp/app/app.module.ts 
@ ./src/main/webapp/app/app.main.ts 

ERROR in ./node_modules/clarity-angular/data/stack-view/stack-block.js 
Module not found: Error: Can't resolve '@angular/animations' in '/Users/ndinatale/src/llqa-3-prototype/node_modules/clarity-angular/data/stack-view' 
@ ./node_modules/clarity-angular/data/stack-view/stack-block.js 7:0-81 
@ ./node_modules/clarity-angular/data/stack-view/index.js 
@ ./node_modules/clarity-angular/index.js 
@ ./src/main/webapp/app/app.module.ts 
@ ./src/main/webapp/app/app.main.ts 

ERROR in ./node_modules/clarity-angular/data/tree-view/tree-node.js 
Module not found: Error: Can't resolve '@angular/animations' in '/Users/ndinatale/src/llqa-3-prototype/node_modules/clarity-angular/data/tree-view' 
@ ./node_modules/clarity-angular/data/tree-view/tree-node.js 17:0-81 
@ ./node_modules/clarity-angular/data/tree-view/index.js 
@ ./node_modules/clarity-angular/index.js 
@ ./src/main/webapp/app/app.module.ts 
@ ./src/main/webapp/app/app.main.ts 

ERROR in ./node_modules/clarity-angular/utils/animations/collapse/collapse.js 
Module not found: Error: Can't resolve '@angular/animations' in '/Users/ndinatale/src/llqa-3-prototype/node_modules/clarity-angular/utils/animations/collapse' 
@ ./node_modules/clarity-angular/utils/animations/collapse/collapse.js 6:0-72 
@ ./node_modules/clarity-angular/utils/animations/collapse/index.js 
@ ./node_modules/clarity-angular/index.js 
@ ./src/main/webapp/app/app.module.ts 
@ ./src/main/webapp/app/app.main.ts 

ERROR in ./node_modules/clarity-angular/utils/animations/fade/fade.js 
Module not found: Error: Can't resolve '@angular/animations' in '/Users/ndinatale/src/llqa-3-prototype/node_modules/clarity-angular/utils/animations/fade' 
@ ./node_modules/clarity-angular/utils/animations/fade/fade.js 6:0-65 
@ ./node_modules/clarity-angular/utils/animations/fade/index.js 
@ ./node_modules/clarity-angular/index.js 
@ ./src/main/webapp/app/app.module.ts 
@ ./src/main/webapp/app/app.main.ts 

ERROR in ./node_modules/clarity-angular/utils/animations/fade-slide/fade-slide.js 
Module not found: Error: Can't resolve '@angular/animations' in '/Users/ndinatale/src/llqa-3-prototype/node_modules/clarity-angular/utils/animations/fade-slide' 
@ ./node_modules/clarity-angular/utils/animations/fade-slide/fade-slide.js 6:0-65 
@ ./node_modules/clarity-angular/utils/animations/fade-slide/index.js 
@ ./node_modules/clarity-angular/index.js 
@ ./src/main/webapp/app/app.module.ts 
@ ./src/main/webapp/app/app.main.ts 

ERROR in ./node_modules/clarity-angular/utils/animations/slide/slide.js 
Module not found: Error: Can't resolve '@angular/animations' in '/Users/ndinatale/src/llqa-3-prototype/node_modules/clarity-angular/utils/animations/slide' 
@ ./node_modules/clarity-angular/utils/animations/slide/slide.js 6:0-65 
@ ./node_modules/clarity-angular/utils/animations/slide/index.js 
@ ./node_modules/clarity-angular/index.js 
@ ./src/main/webapp/app/app.module.ts 
@ ./src/main/webapp/app/app.main.ts 

このフレームワークをJHipsterプロジェクトに統合するにはどうすればよいですか？

Answer 1

1. 挿入フォローライン ..., "dependencies": { ... "clarity-icons": "0.10.7", "clarity-ui": "0.10.7", "clarity-angular": "0.10.7", "@webcomponents/custom-elements": "1.0.4", "mutationobserver-shim": "0.3.2", "@angular/animations": "4.4.4" }
2. が追加パッケージをインストールする "依存関係" セクションにpackage.jsonする： npm install

3. はvendor.tsファイルに次の行を追加します。

   import 'mutationobserver-shim'; import '@webcomponents/custom-elements'; import 'clarity-icons'; import 'clarity-icons/shapes/social-shapes'; import 'clarity-icons/shapes/technology-shapes';

4. には、app.module.tsのClarityModuleが含まれています。

5. 実行yarn run webpack:build

6. 実行yarn startとそれをテスト！それは、そのを持っている：あなたはJhipsterは、そのビルドのためにそれを使用しないための編集.angular-cli.jsonを助けることができない他の部分...ナビゲーションバー、ルートおよび等...