是否可以將第三方框架與JHipster項目集成？

我試圖按照安裝指南（https://vmware.github.io/clarity/get-started）將Clarity Design System（https://vmware.github.io/clarity/）安裝到我創建的JHipster項目中。意思是，在執行npm install之後，我將樣式和腳本添加到.angular-cli.json並將導入聲明添加到app.module.ts。不幸的是，這並不工作：是否可以將第三方框架與JHipster項目集成？

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項目？

來源

2017-08-07 RagnarLothbrok

編輯.angular-cli.json不能幫助，因爲Jhipster不會用它來滿足身材：它有它的自己的webpack配置。你有沒有讀過你的項目中的README.md文件？ –

在閱讀README.md之後，聲明將'vendor.css'中的樣式和'vendor.ts'中的腳本放在一起，我這樣做了。但仍然是相同的錯誤... – RagnarLothbrok

你可以用angular-cli.json更新你的問題 –

插入後續線路的package.json到「依賴關係」一節 ..., "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" }
安裝添加包： npm install
添加如下行到vendor.ts文件：

import 'mutationobserver-shim'; import '@webcomponents/custom-elements'; import 'clarity-icons'; import 'clarity-icons/shapes/social-shapes'; import 'clarity-icons/shapes/technology-shapes';
包括app.module.ts中的ClarityModule
運行yarn run webpack:build
運行yarn start和測試出來！
你需要改變其他部分...導航欄，路線等..

來源

2017-10-07 08:20:01 Seit

是否可以將第三方框架與JHipster項目集成？

回答

相關問題