aastlia और टाइपस्क्रिप्ट में toastr.js कैसे काम कर सकता है?

Question

मुझे इन्हें एक साथ काम करने के लिए प्रतीत नहीं होता है। मैं ऑरेलिया सीएलआई का उपयोग कर रहा हूं और अन्य पुस्तकालयों के लिए सफलतापूर्वक ऐसा किया है (जैसे चयन 2, स्पिन, पल और अंक)। हालांकि मुझे काम करने के लिए टोस्टर नहीं मिल रहा है। यह है, जो कि अभी तक मेरे पास है।

सबसे पहले मैं npm install toastr --save और typings install dt~toastr --global --save

भाग गया aurelia.json में, विक्रेता-bundle.js अनुभाग में, मैं इस तरह के रूप में एक निर्भरता कहा:

"jquery", 
    { 
    "name": "toastr", 
    "path": "../node_modules/toastr/build", 
    "main": "toastr.min", 
    "resources": [ 
     "toastr.min.css" 
    ], 
    "deps": ["jquery"] 
    } 

---

अद्यतन: रेप्रो को पूर्ण चरणों

मेरे पास इन उपकरणों के इन संस्करणों को स्थापित किया गया है: नोड (6.3.0), एनपीएम (3.10.3), औ (0.17.0)

खुला एक कमांड प्रॉम्प्ट और प्रकार:

au new au-toastr 
3 (Custom) 
2 (Typescript) 
3 (Sass) 
1 (configure unit testing) 
1 (Visual Studio Code) 
1 (create project) 
1 (install project dependencies) 
cd au-toastr 
npm install jquery --save 
npm install toastr --save 
typings install dt~jquery --global --save 
typings install dt~toastr --global --save 

फिर एक संपादक में aurelia.json खुला और

"jquery", 
{ 
"name": "toastr", 
"path": "../node_modules/toastr/build", 
"main": "toastr.min", 
"resources": [ 
"toastr.min.css" 
], 
"deps": ["jquery"] 
} 

निर्भरता के नीचे करने के लिए जोड़ ।

jquery की .d.ts फ़ाइल के साथ संघर्ष के कारण typings/globals/angular-protractor/index.d.ts पर लाइन 1839 (declare var $: cssSelectorHelper;) पर टिप्पणी करें।

कमांड प्रॉम्प्ट में

import * as toastr from 'toastr'; 

export class App { 
    activate() { 
    toastr.info('blah'); 
    } 
} 

या

import 'toastr'; 

export class App { 
    activate() { 
    toastr.info('blah'); 
    } 
} 

प्रकार au run साथ app.ts सामग्री बदलें और फिर एक ब्राउज़र खोलें और यूआरएल है कि कमांड लाइन का कहना है कि आवेदन पर उपलब्ध है पर नेविगेट (आमतौर पर http://localhost:9000)।

---

प्रयास 1

import 'toastr'; 

export class ViewModel { 
    activate() { 
    toastr.info('blah'); 
    } 
} 

त्रुटि: ReferenceError: toastr परिभाषित नहीं है

---

प्रयास 2

import {autoinject} from 'aurelia-framework'; 
import 'toastr'; 

@autoinject() 
export class ViewModel { 
    constructor(private toastr: Toastr) { 
    } 

    activate() { 
    this.toastr.info('blah'); 
    } 
} 

त्रुटि: लेखन त्रुटि: लेखन त्रुटि:: toastr this.toastr.info एक समारोह

---

प्रयास 3

import * as toastr from 'toastr'; 

export class ViewModel { 
    activate() { 
    toastr.info('blah'); 
    } 
} 

त्रुटि नहीं है।जानकारी एक फंक्शन नहीं है

---

प्रयास 4

import {autoinject} from 'aurelia-framework'; 
import * as toastr from 'toastr'; 

@autoinject() 
export class ViewModel { 
    constructor(private toastr: Toastr) { 
    } 

    activate() { 
    this.toastr.info('blah'); 
    } 
} 

त्रुटि: लेखन त्रुटि: this.toastr.info एक समारोह

---

उपरोक्त सभी नहीं है जब मैं कमांड लाइन से au build चलाता हूं तो ठीक से ट्रांसफ़ाइल करें। मुझे कोई त्रुटि नहीं है।

मैं जो खो रहा हूं या मैं और क्या कोशिश कर सकता हूं, के रूप में खो गया हूं। किसी भी तरह की सहायता का स्वागत किया जाएगा!

---

अद्यतन: मेरा अनुमान है वहाँ या तो aurelia-cli में एक बग या अधिक होने की संभावना मैं पैकेज से निपटने कर रहा हूँ गलत तरीके से किसी भी तरह aurelia-cli लोड हो रहा है तंत्र के संबंध में है। जब मुझे अपनी साइट से टाइपस्क्रिप्ट कंकाल मिलता है, जो कि जेएसपीएम का उपयोग मॉड्यूल लोडर के रूप में कर रहा है, और ऊपर दिए गए चरणों का पालन करें, टोस्टर बस ठीक काम करता है।

कोई विचार है कि मैं इसे ऑरेलिया-क्ली के साथ काम करने के लिए कैसे प्राप्त कर सकता हूं?

---

Answer 1

बहुत समय और एक दोस्त से मदद के बाद, मैं अंततः इसे काम करने में सक्षम था।

केवल कुछ परिवर्तन आवश्यक होना चाहिए -

aurelia.json जरूरत toastr पुस्तकालय की minified संस्करण का उपयोग नहीं करने के लिए अद्यतन किया जाना है।

{ 
    //... 
    "dependencies": [ 
    //... 
    "jquery", 
    { 
     "name": "toastr", 
     "path": "../node_modules/toastr", 
     "main": "toastr", 
     "resources": [ 
     "build/toastr.min.css" 
     ], 
     "deps": ["jquery"] 
    } 
    ] 
} 

toastr.info('here'); समारोह मंगलाचरण आमतौर पर संलग्न विधि में या के बाद तत्व डोम में उपलब्ध है ऐसा करने की जरूरत है।

एचटीएमएल आवश्यक बनाने के लिए app.html को

<require from="toastr/build/toastr.min.css"></require> 

आशा इस मदद करता है अपडेट करने की आवश्यकता है।

---

अद्यतन फिर अपने दृश्य मॉडल में इसका उपयोग करना, आप इसे कुछ तरीकों में से एक कर सकता है:

import * as toastr from 'toastr'; 

export class App { 
    attached() { 
    toastr.success('here'); 
    } 
} 

---

import { success } from 'toastr'; 

export class App { 
    attached() { 
    success('here'); 
    } 
}