angular - خطأ DI الزاوي-استثناء: لا يمكن حل جميع المعلمات




angular2-di (20)

إذا تم تعريف الخدمة الخاصة بك في نفس الملف كمكون (يستهلكها) ويتم تعريف الخدمة بعد المكون في الملف ، فقد تحصل على هذا الخطأ. هذا بسبب نفس المشكلة "forwardRef" التي ذكرها الآخرون. في هذا الوقت ، لا يعد VSCode رائعًا في عرض هذا الخطأ وتصنيفات الإنشاء بنجاح.

تشغيل --aot باستخدام --aot يمكن أن يخفي هذه المشكلة بسبب الطريقة التي يعمل بها المحول البرمجي (من المحتمل أن يكون مرتبطًا بهز الأشجار).

الحل: تأكد من تعريف الخدمة في ملف آخر أو قبل تعريف المكون. (لست متأكدًا مما إذا كان يمكن استخدام forwardRef في هذه الحالة ، ولكن يبدو أنه من غير المنطقي القيام بذلك).

إذا كان لدي خدمة بسيطة جدًا مرتبطة بشدة بمكون (يشبه نموذج العرض) - على سبيل المثال. ImageCarouselComponent ، قد ImageCarouselComponent.service.ts حتى لا تختلط جميعها مع خدماتي الأخرى.

لقد قمت بإنشاء تطبيق أساسي في Angular ، لكنني واجهت مشكلة غريبة حيث لا يمكنني إدخال خدمة في أحد مكوناتي. إنه يحقن جيدًا في أي من المكونات الثلاثة الأخرى التي قمت بإنشائها.

بالنسبة للمبتدئين ، هذه هي الخدمة:

import { Injectable } from '@angular/core';

@Injectable()
export class MobileService {
  screenWidth: number;
  screenHeight: number;

  constructor() {
    this.screenWidth = window.outerWidth;
    this.screenHeight = window.outerHeight;

    window.addEventListener("resize", this.onWindowResize.bind(this) )
  }

  onWindowResize(ev: Event) {
    var win = (ev.currentTarget as Window);
    this.screenWidth = win.outerWidth;
    this.screenHeight = win.outerHeight;
  }

}

والمكون الذي يرفض العمل به:

import { Component, } from '@angular/core';
import { NgClass } from '@angular/common';
import { ROUTER_DIRECTIVES } from '@angular/router';

import {MobileService} from '../';

@Component({
  moduleId: module.id,
  selector: 'pm-header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css'],
  directives: [ROUTER_DIRECTIVES, NgClass],
})
export class HeaderComponent {
  mobileNav: boolean = false;

  constructor(public ms: MobileService) {
    console.log(ms);
  }

}

الخطأ الذي أحصل عليه في وحدة تحكم المستعرض هو:

استثناء: لا يمكن حل جميع المعلمات لـ HeaderComponent: (؟).

لدي الخدمة في وظيفة bootstrap بحيث يكون لديها مزود. ويبدو أنني قادر على حقنه في مُنشئ أيٍ من مكوناتي الأخرى دون مشكلة.


إزالة المعلمات من طريقة حقن منشئ () حلها لحالتي.


الاحتمال الآخر هو عدم ضبط emitDecoratorMetadata على true في tsconfig.json

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

بالإضافة إلى الإجابات السابقة المقدمة ، يبدو أن هذا الخطأ يتم طرحه أيضًا عندما تفتقد خدمتك القابلة للحقن @Injectable() الفعلي @Injectable() . لذا قبل تصحيح أخطاء التبعية الدورية وترتيب الواردات / الصادرات ، قم بفحص بسيط لمعرفة ما إذا كانت خدمتك قد @Injectable() بالفعل @Injectable() .

وهذا ينطبق على أحدث الزاوي الحالي ، الزاوي 2.1.0.

فتحت مشكلة في هذا الشأن .


بالنسبة لي ، لقد حصلت على هذا الخطأ عندما قمت بتعطيل هذا الاستيراد عن طريق الخطأ في ملف polyfills.ts ، تحتاج إلى التأكد من استيراده لتجنب هذا الخطأ.

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

بالنسبة لي كان مجرد عدم وجود () في Injectable. السليم هو @ Injectable ()


حسنًا بالنسبة لي ، كانت المشكلة أكثر إزعاجًا ، وكنت أستخدم خدمة داخل خدمة ونسيت إضافتها كتبعية في appModule! آمل أن يساعد هذا شخص ما على توفير عدة ساعات من تعطيل التطبيق فقط لإعادة بنائه مرة أخرى


على الرغم من أنه قد تم ذكر ترتيب الفئات المصدرة من داخل البراميل ، إلا أن السيناريو التالي قد ينتج عنه نفس التأثير.

افترض أن لديك فئات A و B و C تم تصديرها من داخل نفس الملف حيث A تعتمد على B و C :

@Injectable()
export class A {
    /** dependencies injected */
    constructor(private b: B, private c: C) {}
}

@Injectable()
export class B {...}

@Injectable()
export class C {...}

نظرًا لأن الفئات التابعة (أي في هذه الحالة بفئتي B و C ) غير معروفة بعد لـ Angular ، ( ربما في وقت التشغيل أثناء عملية حقن التبعية لـ Angular على الفئة A ) ، يتم رفع الخطأ.

حل

الحل هو إعلان وتصدير الفئات التابعة قبل الفصل حيث يتم تنفيذ DI.

في الحالة المذكورة أعلاه ، يتم الإعلان عن الفئة " A مباشرة بعد تحديد التبعيات:

@Injectable()
export class B {...}

@Injectable()
export class C {...}

@Injectable()
export class A {
    /** dependencies injected */
    constructor(private b: B, private c: C) {}
}

في حالتي ، حدث ذلك لأنني لم أعلن نوع معلمة المنشئ.

كان لدي شيء مثل هذا:

constructor(private URL, private http: Http) { }

ثم تغييره إلى الكود أدناه حل مشكلتي.

constructor(private URL : string, private http: Http) {}

في حالتي ، كان السبب ما يلي:

  • خدمتي القابلة للحقن
  • وكان B منشئ الذي يتطلب حجة
  • لم أعرّف أي مُنشئ في A

نتيجة لذلك ، عند محاولة إنشاء كائن A ، فشل المنشئ الافتراضي. ليس لدي أي فكرة لماذا لم يكن هذا خطأ ترجمة.

لقد تم إصلاحه ببساطة عن طريق إضافة مُنشئ في A ، والذي يسمى مُنشئ B بشكل صحيح.


في حالتي ، كنت بحاجة إلى إضافة import "core-js/es7/reflect"; إلى طلبي لجعل العمل @Injectable .


في حالتي ، يؤدي تمرير معلمات خاطئة إلى المُنشئ إلى إنشاء هذا الخطأ ، والفكرة الأساسية حول هذا الخطأ هي أنك نجحت في تمرير بعض الحجج الخاطئة إلى أي وظيفة.

export class ProductComponent {
    productList: Array<Product>;

    constructor(productList:Product) { 
         // productList:Product this arg was causing error of unresolved parameters.
         this.productList = [];
    }
}

لقد قمت بحل هذا بمجرد إزالة هذه الحجة.


في حالتي كان بسبب البرنامج المساعد Augury ، تعطيله سوف يعمل بشكل جيد. الخيار البديل هو aot ، ويعمل أيضا.

جميع الاعتمادات ل @ Boboss74 ، نشر الجواب هنا: https://github.com/angular/angular/issues/23958


في حالتي كنت أحاول تمديد طريقة " NativeDateAdapter " لتجاوز " format(date: Date, displayFormat: Object) ".

في AngularMaterial-2 DatePicker.

لذلك نسيت أن أضيف @Injectable .

بعد أن أضيف هذا إلى صفتي "CustomDateAdapter":

@Injectable({
  providedIn: 'root'
})

الخطأ قد ذهب.


كان ذلك بالنسبة لي لأنني توقفت عن استخدام علامة -aot أثناء محاولة جعل وقت الترجمة أسرع.

 ng serve -aot

كما ذكرنا سابقًا ، سبب المشكلة هو أمر التصدير داخل البرميل الذي يحدث بسبب التبعيات الدائرية.

يوجد شرح أكثر تفصيلاً هنا: https://.com/a/37907696/893630


لقد واجهت هذا أيضًا عن طريق حقن الخدمة A في الخدمة B والعكس.

أعتقد أنه من الجيد أن يفشل هذا بسرعة لأنه من المحتمل تجنبه على أي حال . إذا كنت تريد أن تكون خدماتك أكثر نمطية وقابلة لإعادة الاستخدام ، فمن الأفضل تجنب المراجع الدائرية قدر الإمكان. هذا post يسلط الضوء على المزالق المحيطة بذلك.

لذلك ، لدي التوصيات التالية:

  • إذا كنت تشعر أن الفصول تتفاعل كثيرًا (أتحدث عن حسد الميزة ) ، فقد ترغب في النظر في دمج الخدمتين في فصل واحد .
  • إذا لم يعمل ما سبق لك ، ففكر في استخدام خدمة ثالثة ( EventService ) يمكن لكلتا الخدمتين إدخالها من أجل تبادل الرسائل.

لقد واجهت هذا الخطأ عن طريق الخطأ في كتابة اسم الخدمة ، أي المنشئ ( myService الخاص : MyService ).

بالنسبة للخدمات التي بها أخطاء إملائية ، تمكنت من تحديد الخدمة التي كانت المشكلة (التي أعددتها مدرجة في المُنشئ) عن طريق فحص الصفحة في Chrome-> وحدة التحكم. سترى كجزء من الرسالة قائمة الصفيف "المعلمة" عن طريق عرض كائن كائن ، كائن كائن ،؟ (أو شيء من هذا القبيل). لاحظ أين "؟" هو وهذا هو موقف الخدمة التي تسبب المشكلة.


يحدث ذلك عند الإشارة إلى interface كذلك.

تغيير interface class إصلاحه ، والعمل مع وبدون @Inject .


يحدث هذا أحيانًا عندما تعلن عن وحدة Angular الداخلية (HttpClientModule و HttpErrorResponse وغيرها) في app.module.js. أنا أيضا واجهت نفس المشكلة ولكن حلها الآن.

كان الخطأ الذي قمت به هو ذكر HttpClientModule إلى موفري الخدمات بدلاً من استيراد الوحدة النمطية الزاوي





angular2-di