Angular सेवा इंजेक्ट नहीं कर सकता: त्रुटि का पूर्ण विश्लेषण

परिचय: Angular "Can't resolve all parameters" क्यों चिल्लाता है?

आप अपना पहला Angular-कम्पोनेंट लिख रहे हैं, गर्व से कंस्ट्रक्टर में API के साथ काम करने के लिए एक सेवा जोड़ते हैं, एप्लिकेशन चलाते हैं — और तुरंत कंसोल में लाल लिखावट मिलती है:

EXCEPTION: Can't resolve all parameters for MyComponent: (?).

परिचित लगता है? यह त्रुटि शुरुआती और यहां तक कि अनुभवी डेवलपर्स के लिए एक वास्तविक बाधा है, जो AngularJS से आ रहे हैं। यह तब होती है जब Angular यह समझ नहीं पाता कि कम्पोनेंट में कौन सी सेवा इंजेक्ट की जानी चाहिए। इस लेख में हम त्रुटि Can't resolve all parameters for component के सभी कारणों का विश्लेषण करेंगे, TypeScript पर लाइव उदाहरण दिखाएंगे और चरण-दर-चरण समाधान देंगे। आप न केवल बग को ठीक करेंगे, बल्कि यह भी समझेंगे कि Angular में Dependency Injection (DI) कैसे काम करता है।

Dependency Injection क्या है और यह क्यों महत्वपूर्ण है?

Angular निर्भरता इंजेक्शन (DI) प्रणाली पर बना है। जब आप लिखते हैं:

constructor(private myService: MyService) {}

Angular स्वचालित रूप से MyService का एक उदाहरण बनाता है और इसे कम्पोनेंट में भेजता है। लेकिन इसके लिए उसे तीन चीजें जाननी होंगी:

\n
• किस प्रकार (क्लास) को इंजेक्ट करना है।
\n
• इस प्रकार के लिए प्रदाता कहाँ पंजीकृत है।
\n
• यदि प्रदाता नहीं है तो क्या करना है।
\n

यदि इनमें से कम से कम एक बिंदु पूरा नहीं होता है, तो आपको त्रुटि «Can't resolve all parameters» मिलती है।

त्रुटि के मुख्य कारण

हमने 5 सबसे सामान्य परिदृश्यों को चुना है जो इस त्रुटि का कारण बनते हैं। प्रत्येक को कोड के साथ समझेंगे।

1. सेवा प्रदाताओं में पंजीकृत नहीं है

सबसे स्पष्ट कारण। आपने एक सेवा बनाई, लेकिन इसे मॉड्यूल या कम्पोनेंट के providers में जोड़ना भूल गए।

गलत कोड का उदाहरण:

// my.service.ts\n@Injectable()\nexport class MyService {\n  getData() { return 'data'; }\n}\n\n// my.component.ts\n@Component({ selector: 'app-my', template: '...' })\nexport class MyComponent {\n  constructor(private myService: MyService) {} // त्रुटि!\n}\n

समाधान: सेवा को मॉड्यूल में पंजीकृत करें:

@NgModule({\n  providers: [MyService] // <-- अनिवार्य\n})\nexport class AppModule { }\n

या कम्पोनेंट में ही (यदि सेवा केवल उसके लिए आवश्यक है):

@Component({\n  providers: [MyService]\n})\nexport class MyComponent { ... }\n

2. @Injectable() डेकोरेटर गायब है

भले ही आपने सेवा को प्रदाताओं में पंजीकृत किया हो, लेकिन @Injectable() डेकोरेटर जोड़ना भूल गए — Angular मेटाडेटा नहीं पढ़ पाएगा।

उदाहरण:

// बिना डेकोरेटर के\nexport class MyService { ... }\n\n// कम्पोनेंट में\nconstructor(private myService: MyService) {} // त्रुटि!\n

समाधान: हमेशा @Injectable() जोड़ें:

@Injectable({ providedIn: 'root' }) // या बस @Injectable()\nexport class MyService { ... }\n

वैसे, providedIn: 'root' स्वचालित रूप से सेवा को रूट इंजेक्टर स्तर पर पंजीकृत करता है — यह आधुनिक और अनुशंसित तरीका है।

3. AOT कंपाइलेशन और कंस्ट्रक्टर पैरामीटर के साथ विरोध

Angular दो कंपाइलेशन मोड का उपयोग करता है: JIT (Just-in-Time) और AOT (Ahead-of-Time)। त्रुटि Can't resolve all parameters अक्सर AOT में होती है, यदि TypeScript ने पैरामीटर के प्रकारों के बारे में जानकारी संरक्षित नहीं की।

कारण: Angular के पुराने संस्करणों (5 से पहले) या कुछ tsconfig सेटिंग्स का उपयोग करते समय, TypeScript प्रकार मेटाडेटा को हटा सकता है। उदाहरण के लिए, यदि आपने emitDecoratorMetadata: false का उपयोग किया या reflect-metadata आयात करना भूल गए।

समाधान:

\n
• सुनिश्चित करें कि tsconfig.json में "emitDecoratorMetadata": true और "experimental