我尝试按照安装指南（https://vmware.github.io/clarity/）将Clarity Design System（https://vmware.github.io/clarity/get-started）安装到我创建的JHipster项目中。意味着，在执行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项目中？
答案 0 :(得分：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"
}
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并测试一下！
您需要更改其他部分...导航栏，路线等...