कोणीय 2-बीज + टाइपिंग + डी 3: आयात त्रुटि, 'मॉड्यूल नहीं मिल सकता' d3 ''

Question

मैं D3 आयात करने की कोशिश कर रहा हूं ताकि मैं इसे कोणीय 2 मॉड्यूल में उपयोग कर सकूं।

कुछ पृष्ठभूमि जानकारी:

• मैं टाइपप्रति में Angular2 लिख रहा हूँ।
• मैं उपयोग कर रहा हूँ Angular2-seed

क्या मैंने किया:

1. मैं NPM डी 3 पैकेज स्थापित:

   npm install d3 --save 
   

2. मैं डी 3 प्रकार Typings का उपयोग कर वर्णन स्थापित है, कि के रूप में क्या Angular2-Seed उन पुस्तकालयों के लिए उपयोग करता है जो इसे पहले से इंस्टॉल कर चुके हैं।

   typings install d3 --save 
   

3. फिर, मेरी Angular2 मॉड्यूल फ़ाइल में, मैं इंपोर्ट स्टेटमेंट

   import * as d3 from 'd3'; 
   

   जोड़ा

नतीजा यह है कि टीएससी मुझे त्रुटि संदेश "मॉड्यूल 'डी 3' नहीं मिला दे रहा है है "। मुझे क्या याद आ रही है या गलत कर रहा है?

Answer 1

तो package.json में आप पहले से ही की तरह के लिए एक निर्भरता है, तो:

"dependencies": { 
    ... 
    "d3": "^3.5.17", 
    ... 
} 

आप तो /tools/config/seed.config.ts और जोड़ने में जा सकते हैं 'डी 3': '$ {this.NPM_BASE} d3/d3.min.js'SYSTEM_CONFIG_DEV वस्तु में, जैसे:

protected SYSTEM_CONFIG_DEV: any = { 
    defaultJSExtensions: true, 
    packageConfigPaths: [ 
     `${this.NPM_BASE}*/package.json`, 
     `${this.NPM_BASE}**/package.json`, 
     `${this.NPM_BASE}@angular/*/package.json` 
    ], 
    paths: { 
     [this.BOOTSTRAP_MODULE]: `${this.APP_BASE}${this.BOOTSTRAP_MODULE}`, 
     '@angular/core': `${this.NPM_BASE}@angular/core/bundles/core.umd.js`, 
     '@angular/common': `${this.NPM_BASE}@angular/common/bundles/common.umd.js`, 
     '@angular/compiler': `${this.NPM_BASE}@angular/compiler/bundles/compiler.umd.js`, 
     '@angular/forms': `${this.NPM_BASE}@angular/forms/bundles/forms.umd.js`, 
     '@angular/http': `${this.NPM_BASE}@angular/http/bundles/http.umd.js`, 
     '@angular/router': `${this.NPM_BASE}@angular/router/index.js`, 
     '@angular/platform-browser': `${this.NPM_BASE}@angular/platform-browser/bundles/platform-browser.umd.js`, 
     '@angular/platform-browser-dynamic': `${this.NPM_BASE}@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js`, 
     'rxjs/*': `${this.NPM_BASE}rxjs/*`, 
     'd3': '${this.NPM_BASE}d3/d3.min.js', 
     'app/*': `/app/*`, 
     '*': `${this.NPM_BASE}*` 
    }, 
    packages: { 
     rxjs: { defaultExtension: false } 
    } 

अगर यह मदद करता है तो मुझे बताएं। धन्यवाद!

Answer 2

मेरे पास एक ही समस्या थी, और उपर्युक्त उत्तर ने मेरे सॉल्यूशन को डीबग करने में मदद की - जिसमें यह पहचाना गया कि यह एक कॉन्फ़िगरेशन समस्या थी, हालांकि angular2@2.1.0 का उपयोग करके मुझे {रूट} /e2e/tscconfig.json अपडेट करना पड़ा (द्वारा जोड़ने:

 "types": [ 
     "d3" 
    ] 

इस प्रकार है:

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "outDir": "../dist/out-tsc-e2e", 
    "sourceMap": true, 
    "target": "es5", 
    "typeRoots": [ 
     "../node_modules/@types" 
    ], 
    "types": [ 
     "d3" 
    ] 
    } 
} 

ध्यान रखें {जड़} में एक tscconfig.json है कि वहाँ/src/साथ ही मैं इस में अद्यतन और मैं अभी भी एक था। निर्भरता मुद्दे के साथ:

त्रुटि के माध्यम से

मेरे घटक में। उम्मीद है कि यह कम से कम एक व्यक्ति की मदद करता है!