D3 librarie를 Jhipster 게이트웨이에 추가

Question

저는 개발중인 JHipster 게이트웨이 프로젝트에 D3.js를 추가하려고합니다. node_modules 폴더와 package.json에 라이브러리를 추가하기 위해 "yarn add d3"명령을 사용했습니다. 이 package.json의 내용이다 :

{ 
    "name": "blog", 
    "version": "0.0.0", 
    "description": "Description for blog", 
    "private": true, 
    "license": "UNLICENSED", 
    "cacheDirectories": [ 
    "node_modules" 
    ], 
    "dependencies": { 
    "@angular/common": "4.3.2", 
    "@angular/compiler": "4.3.2", 
    "@angular/core": "4.3.2", 
    "@angular/forms": "4.3.2", 
    "@angular/http": "4.3.2", 
    "@angular/platform-browser": "4.3.2", 
    "@angular/platform-browser-dynamic": "4.3.2", 
    "@angular/router": "4.3.2", 
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5", 
    "bootstrap": "4.0.0-beta", 
    "core-js": "2.4.1", 
    "d3": "^4.12.0", 
    "font-awesome": "4.7.0", 
    "jquery": "3.2.1", 
    "ng-jhipster": "0.2.12", 
    "ng2-webstorage": "1.8.0", 
    "ngx-cookie": "1.0.0", 
    "ngx-infinite-scroll": "0.5.1", 
    "reflect-metadata": "0.1.10", 
    "rxjs": "5.4.2", 
    "swagger-ui": "2.2.10", 
    "tether": "1.4.0", 
    "zone.js": "0.8.16" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.4.2", 
    "@angular/compiler-cli": "4.3.2", 
    "@types/jasmine": "2.5.53", 
    "@types/node": "8.0.18", 
    "angular2-template-loader": "0.6.2", 
    "awesome-typescript-loader": "3.2.2", 
    "browser-sync": "2.18.13", 
    "browser-sync-webpack-plugin": "1.2.0", 
    "codelyzer": "3.1.2", 
    "copy-webpack-plugin": "4.0.1", 
    "css-loader": "0.28.4", 
    "exports-loader": "0.6.4", 
    "extract-text-webpack-plugin": "3.0.0", 
    "file-loader": "0.11.2", 
    "generator-jhipster": "4.10.2", 
    "html-loader": "0.5.0", 
    "html-webpack-plugin": "2.30.1", 
    "jasmine-core": "2.7.0", 
    "karma": "1.7.1", 
    "karma-chrome-launcher": "2.2.0", 
    "karma-coverage": "1.1.1", 
    "karma-intl-shim": "1.0.3", 
    "karma-jasmine": "1.1.0", 
    "karma-junit-reporter": "1.2.0", 
    "karma-notify-reporter": "1.0.1", 
    "karma-remap-istanbul": "0.6.0", 
    "karma-sourcemap-loader": "0.3.7", 
    "karma-webpack": "2.0.4", 
    "merge-jsons-webpack-plugin": "1.0.11", 
    "ngc-webpack": "3.2.2", 
    "node-sass": "4.5.3", 
    "postcss-loader": "2.0.6", 
    "proxy-middleware": "0.15.0", 
    "puppeteer": "^0.13.0", 
    "rimraf": "2.6.1", 
    "sass-loader": "6.0.6", 
    "sourcemap-istanbul-instrumenter-loader": "0.2.0", 
    "string-replace-webpack-plugin": "0.1.3", 
    "style-loader": "0.18.2", 
    "to-string-loader": "1.1.5", 
    "tslint": "5.5.0", 
    "tslint-loader": "3.5.3", 
    "typescript": "2.5.2", 
    "uglifyjs-webpack-plugin": "1.0.0-beta.2", 
    "web-app-manifest-loader": "0.1.1", 
    "webpack": "3.6.0", 
    "webpack-dev-server": "2.8.2", 
    "webpack-merge": "4.1.0", 
    "webpack-notifier": "1.5.0", 
    "webpack-visualizer-plugin": "0.1.11", 
    "write-file-webpack-plugin": "4.1.0", 
    "xml2js": "0.4.17" 
    }, 
    "engines": { 
    "node": ">=6.9.0" 
    }, 
    "scripts": { 
    "lint": "tslint --type-check --project './tsconfig.json' -e 'node_modules/**'", 
    "lint:fix": "yarn run lint -- --fix", 
    "ngc": "ngc -p tsconfig-aot.json", 
    "cleanup": "rimraf target/{aot,www}", 
    "clean-www": "rimraf target//www/app/{src,target/}", 
    "start": "yarn run webpack:dev", 
    "serve": "yarn run start", 
    "build": "yarn run webpack:prod", 
    "test": "karma start src/test/javascript/karma.conf.js", 
    "test:watch": "yarn test -- --watch", 
    "webpack:dev": "yarn run webpack-dev-server -- --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060 --watch-content-base", 
    "webpack:build:main": "yarn run webpack -- --config webpack/webpack.dev.js --progress --profile", 
    "webpack:build": "yarn run cleanup && yarn run webpack:build:main", 
    "webpack:prod:main": "yarn run webpack -- --config webpack/webpack.prod.js --progress --profile", 
    "webpack:prod": "yarn run cleanup && yarn run webpack:prod:main && yarn run clean-www", 
    "webpack:test": "yarn run test", 
    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js", 
    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js" 
    } 
} 

는 "D3"이 볼 수 있듯이 : "^ 4.12.0"dependencie,하지만 지금은 프로젝트에 포함하는 방법을 모르겠어요. 각도 4.3.2를 사용하고 있습니다. 제발 도와 줄 수 있어요 ??

감사합니다.

Answer 1

나는 이것이해야한다고 생각한다.

declare var d3: any; 

나는 아래의 방법을 테스트했으며 완벽하게 작동하지만 실, npm 또는 모든 패키지 종속성 관리자를 사용하여 d3을 설치합니다. 방금 index.html 파일에 포함 된 CDN 링크를 사용했습니다.

하지만 원사 같은 것을 사용하여 설치 했으므로이 작업을 수행 할 수 있다고 생각합니다.

import * as d3 from 'd3';