कोणीय 2 में बहुत लंबे रिश्तेदार पथों के साथ आयात से कैसे बचें?

Question

मैं 'my-app-name/services'निम्नलिखित आयात जैसी लाइनों से बचने के लिए कुछ कैसे पेश कर सकता हूं ?

import {XyService} from '../../../services/validation/xy.service';

Answer 1

टाइपस्क्रिप्ट 2.0+

टाइपस्क्रिप्ट 2.0 में आप एक baseUrlसंपत्ति जोड़ सकते हैं tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "."
        // etc...
    },
    // etc...
}

फिर आप सब कुछ आयात कर सकते हैं जैसे कि आप आधार निर्देशिका में थे:

import {XyService} from "services/validation/xy.service";

इसके शीर्ष पर, आप एक pathsसंपत्ति जोड़ सकते हैं, जो आपको एक पैटर्न से मिलान करने की अनुमति देता है, फिर इसे मैप कर सकता है। उदाहरण के लिए:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "services/*": [
                "services/validation/*"
            ]
        }
        // etc...
    },
    // etc...
}

जिससे आप इसे कहीं से भी आयात कर सकते हैं:

import {XyService} from "services/xy.service";

वहां से, आपको इन आयात नामों का समर्थन करने के लिए जो भी मॉड्यूल लोडर उपयोग कर रहे हैं उसे कॉन्फ़िगर करने की आवश्यकता होगी। अभी टाइपस्क्रिप्ट कंपाइलर स्वचालित रूप से इनको मैप करने के लिए प्रतीत नहीं होता है।

आप इसके बारे में जीथूब मुद्दे में अधिक पढ़ सकते हैं । एक rootDirsसंपत्ति भी है जो कई परियोजनाओं का उपयोग करते समय उपयोगी होती है।

टाइप टाइपस्क्रिप्ट 2.0 (अभी भी टीएस 2.0+ में लागू है)

मैंने पाया है कि इसे "बैरल" का उपयोग करके आसान बनाया जा सकता है ।

1. प्रत्येक फ़ोल्डर में, एक index.tsफ़ाइल बनाएँ ।
2. इन फ़ाइलों में, फ़ोल्डर के भीतर प्रत्येक फ़ाइल को फिर से निर्यात करें।

उदाहरण

अपने मामले में, पहले एक फ़ाइल बनाएं जिसे कहा जाता है my-app-name/services/validation/index.ts। इस फ़ाइल में, कोड है:

export * from "./xy.service";

फिर नामक एक फाइल बनाएं my-app-name/services/index.tsऔर यह कोड रखें:

export * from "./validation";

अब आप अपनी सेवा का उपयोग कर सकते हैं जैसे ( indexनिहित है):

import {XyService} from "../../../services";

और एक बार जब आपके पास कई फाइलें होती हैं तो यह और भी आसान हो जाता है:

import {XyService, MyOtherService, MyOtherSerivce2} from "../../../services";

इन अतिरिक्त फ़ाइलों को बनाए रखने के लिए थोड़ा अधिक काम करना है ( बैरल-अनुरक्षक का उपयोग करके काम को समाप्त किया जा सकता है ), लेकिन मैंने पाया है कि यह कम काम के साथ अंत में भुगतान करता है। प्रमुख निर्देशिका संरचना परिवर्तन करना बहुत आसान है और यह आपके द्वारा किए जाने वाले आयातों की संख्या में कटौती करता है।

सावधान

ऐसा करते समय कुछ चीजें हैं जिन्हें आपको देखना है और ऐसा नहीं कर सकते हैं:

1. आपको परिपत्र फिर से निर्यात के लिए देखना होगा। इसलिए यदि दो उप-फ़ोल्डर्स की फाइलें एक दूसरे को संदर्भित करती हैं, तो आपको पूर्ण पथ का उपयोग करने की आवश्यकता होगी।
2. आपको उसी मूल फ़ोल्डर से फ़ोल्डर वापस नहीं जाना चाहिए (पूर्व में सत्यापन फ़ोल्डर में फ़ाइल में किया जा रहा है और कर रहा है import {XyService} from "../validation";)। मैंने यह पाया है और पहला बिंदु आयात की त्रुटियों को परिभाषित नहीं कर सकता है।
3. अंत में आपके पास एक उप-फ़ोल्डर में दो निर्यात नहीं हो सकते हैं जिनका समान नाम है। हालांकि यह एक मुद्दा नहीं है।

Comments

@ ThomasZuberbühler मुझे लगता है कि टाइपस्क्रिप्ट 1.8 में यह उपलब्ध होगा ( यहां देखें )।

— डेविड शेरेट

मैं Npm के साथ टाइपस्क्रिप्ट 2.0+ कैसे डाउनलोड कर सकता हूं?

— मैक्सिममेडुप्रे

एक छोटी सी टिप - प्रलेखन पढ़ने के बाद यह पता चला कि यह baseUrl'tsconfig.json' के स्थान के सापेक्ष है। तो हमारे मामले में (कोणीय अनुप्रयोग) मान होना चाहिए "baseUrl": "./app",, जहां "एप्लिकेशन" एप्लिकेशन की जड़ है।

— पावेल गोर्स्किन्स्की

कोणीय-क्लि उपयोगकर्ताओं को केवल : यदि आप कोणीय-क्ली 2+ का उपयोग कर रहे हैं, तो उन्होंने webpack और blackboxed webpack.config.js (नोड_मॉड्यूल्स के अंदर) पर स्विच किया। "वहां से, आपको इन आयात नामों का समर्थन करने के लिए जो भी मॉड्यूल लोडर उपयोग कर रहे हैं उसे कॉन्फ़िगर करने की आवश्यकता होगी।" चूंकि webpack.config.js ब्लैकबॉक्स किया गया है, आप इस टुकड़े को नहीं कर सकते। सौभाग्य से, मैं इस मुद्दे को पहले से ही सूचना मिली थी पाया यहाँ और द्वारा हल इस पीआर। TL; DR ब्लैकबॉक्स वेबपैक विन्यास tsconfig.json को देखने के लिए काफी स्मार्ट है।

— केविन

कोणीय-क्ली उपयोगकर्ताओं के लिए, आप "एनजी इजेक्ट" के साथ एक वेबपैक.कॉन्फ़िग उत्पन्न कर सकते हैं। ध्यान दें कि आपको निष्कासित करने की आवश्यकता होगी: परियोजना से सेवा करने में सक्षम होने के लिए .angular-cli.json -> प्रोजेक्ट से सत्य।

— ड्रूसेंटिया

Answer 2

Tsconfig.json में नीचे विन्यास का उपयोग करना बेहतर है

{
  "compilerOptions": {
    "...": "reduced for brevity",

    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"]
    }
  }
}

कोणीय 6 से पहले पारंपरिक तरीका:

`import {XyService} from '../../../services/validation/xy.service';`

इन में सुधार किया जाना चाहिए:

import {XyService} from '@app/services/validation/xy.service

छोटा एवं सुन्दर!

Comments

यह परिवर्तन उत्पादन @shivangGupta में काम नहीं करता है

— अनाम

Answer 3

मुझे तो बस यह सवाल आया। मुझे पता है कि यह अब वापस आ गया है, लेकिन इसके पार आने वाले किसी भी व्यक्ति के लिए एक सरल उत्तर है।

मैं केवल इसलिए भर आया क्योंकि मैं कुछ समय से काम कर रहा था और मैं सोच रहा था कि क्या कुछ कोणीय 7 में बदल गया है। नहीं, यह सिर्फ मेरा अपना कोड था।

भले ही मुझे tsconfig.jsonलंबे आयात रास्तों से बचने के लिए केवल एक लाइन बदलनी पड़े।

{
  "compilerOptions": {
  "...": "simplified for brevity",

   "baseUrl": "src"
  }
}

उदाहरण:

// before:
import {XyService} from '../../../services/validation/xy.service';

// after:
import { XyService } from 'app/services/validation/xy.service';

यह मेरे लिए बहुत काम किया है जब से कोणीय-सीएलआई साथ आया है।

Comments

प्रयास के लिए धन्यवाद क्रिस, लेकिन आपको अपने उत्तर में उपयोग के उदाहरण प्रदान करने चाहिए थे!

— जॉर्ज ४३