是否可以将第三方框架与JHipster项目集成?

时间:2017-08-07 21:11:09

标签: angular jhipster

我尝试按照安装指南(https://vmware.github.io/clarity/)将Clarity Design Systemhttps://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项目中?

1 个答案:

答案 0 :(得分:1)

  1. 将package.json的跟随行插入“dependencies”部分   ..., "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. 安装添加的包:   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并测试一下!

  7. 您需要更改其他部分...导航栏,路线等...