ข้อยกเว้น: ไม่สามารถแก้ไขพารามิเตอร์ทั้งหมด

ฉันได้สร้างแอพพื้นฐานใน Angular 2 แต่ฉันพบปัญหาแปลก ๆ ที่ฉันไม่สามารถฉีดบริการเข้าไปในหนึ่งในองค์ประกอบของฉัน อย่างไรก็ตามมันสามารถแทรกเข้าไปในองค์ประกอบอื่น ๆ สามอย่างที่ฉันสร้างขึ้นได้

สำหรับผู้เริ่มต้นนี่คือบริการ:

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 ดังนั้นจึงมีผู้ให้บริการ และดูเหมือนว่าฉันจะสามารถฉีดลงในคอนสตรัคเตอร์ของส่วนประกอบอื่น ๆ ของฉันได้โดยไม่มีปัญหา

นำเข้าจากไฟล์ที่มีการประกาศโดยตรงแทนที่จะเป็นบาร์เรล

ฉันไม่รู้ว่าอะไรเป็นสาเหตุของปัญหา แต่ฉันเห็นมันพูดถึงหลายครั้ง (อาจเป็นการพึ่งพาแบบวงกลม)

ควรแก้ไขได้โดยเปลี่ยนลำดับการส่งออกในถัง (ไม่ทราบรายละเอียด แต่ถูกกล่าวถึงเช่นกัน)

นอกเหนือจากคำตอบก่อนหน้าที่ระบุดูเหมือนว่าข้อผิดพลาดนี้จะถูกโยนเช่นกันเมื่อบริการการฉีดของคุณหายไปจาก@Injectable()มัณฑนากรจริง ดังนั้นก่อนที่คุณจะดีบักสิ่งที่ขึ้นต่อกันของวัฏจักรและลำดับการนำเข้า / ส่งออกของคุณให้ตรวจสอบง่ายๆว่าบริการของคุณได้@Injectable()กำหนดไว้จริงหรือไม่

สิ่งนี้ใช้กับ Angular ล่าสุด Angular 2.1.0

ฉันเปิดปัญหาในเรื่องนี้

ในฐานะของเชิงมุม2.2.3ขณะนี้มีforwardRef()ฟังก์ชั่นยูทิลิตี้ที่ช่วยให้คุณสามารถฉีดผู้ให้บริการที่ยังไม่ได้กำหนด

โดยไม่ได้กำหนดฉันหมายความว่าแผนที่การฉีดพึ่งพาไม่รู้จักตัวระบุ นี่คือสิ่งที่เกิดขึ้นในระหว่างการพึ่งพาแบบวงกลม คุณสามารถมีการพึ่งพาแบบวนรอบในเชิงมุมซึ่งยากต่อการแยกและดู

export class HeaderComponent {
  mobileNav: boolean = false;

  constructor(@Inject(forwardRef(() => MobileService)) public ms: MobileService) {
    console.log(ms);
  }

}

การเพิ่ม@Inject(forwardRef(() => MobileService))พารามิเตอร์ของ Constructor ในซอร์สโค้ดของคำถามจะช่วยแก้ปัญหาได้

อ้างอิง

คู่มือเชิงมุม 2: ForwardRef

การส่งต่ออ้างอิงในเชิงมุม 2

ผิด # 1:ลืมมัณฑนากร:

//Uncaught Error: Can't resolve all parameters for MyFooService: (?).
export class MyFooService { ... }

ผิด # 2: การละเว้นสัญลักษณ์ "@":

//Uncaught Error: Can't resolve all parameters for MyFooService: (?).
Injectable()
export class MyFooService { ... }

ผิด # 3: การละเว้น "()" สัญลักษณ์:

//Uncaught Error: Can't resolve all parameters for TypeDecorator: (?).
@Injectable
export class MyFooService { ... }

ผิด # 4:ตัวพิมพ์เล็ก "i":

//Uncaught ReferenceError: injectable is not defined
@injectable
export class MyFooService { ... }

ผิด # 5:คุณลืม: นำเข้า {Injectable} จาก '@ angular / core';

//Uncaught ReferenceError: Injectable is not defined
@Injectable
export class MyFooService { ... }

แก้ไข:

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

ตามที่ระบุไว้แล้วปัญหาเกิดจากการส่งออกสั่งภายในบาร์เรลซึ่งเกิดจากการอ้างอิงแบบวงกลม

คำอธิบายโดยละเอียดเพิ่มเติมอยู่ที่นี่: https://stackoverflow.com/a/37907696/893630

ฉันยังพบสิ่งนี้โดยการฉีดบริการ A เข้าสู่บริการ B และในทางกลับกัน

ฉันคิดว่ามันเป็นสิ่งที่ดีที่ว่านี้ล้มเหลวอย่างรวดเร็วเท่าที่ควรอาจจะหลีกเลี่ยงได้อยู่แล้ว หากคุณต้องการให้บริการของคุณเป็นแบบแยกส่วนและใช้งานได้ดีที่สุดก็ควรหลีกเลี่ยงการอ้างอิงแบบวงกลมให้มากที่สุด โพสต์นี้จะเน้นข้อผิดพลาดที่อยู่รอบ ๆ

ดังนั้นฉันมีคำแนะนำต่อไปนี้:

• ถ้าคุณรู้สึกว่าการเรียนจะมีปฏิสัมพันธ์บ่อยเกินไป (ฉันพูดคุยเกี่ยวกับคุณลักษณะอิจฉา ), คุณอาจต้องการที่จะต้องพิจารณาการรวม 2 บริการแบ่งออกเป็น 1 ชั้น
• หากสิ่งที่กล่าวมาข้างต้นไม่ได้ผลสำหรับคุณให้พิจารณาใช้บริการที่ 3 ( EventService) ซึ่งบริการทั้งสองนี้สามารถแทรกเพื่อแลกเปลี่ยนข้อความ

เพื่อประโยชน์ของผู้ค้นหา; ฉันได้รับข้อผิดพลาดนี้ มันเป็นสัญลักษณ์ @ ที่หายไป

เช่นนี้ก่อให้เกิดCan't resolve all parameters for MyHttpServiceข้อผิดพลาด

Injectable()
export class MyHttpService{
}

การเพิ่ม@สัญลักษณ์ที่หายไปแก้ไขได้

@Injectable()
export class MyHttpService{
}

ในกรณีของฉันฉันต้องเพิ่มimport "core-js/es7/reflect";แอปพลิเคชันของฉันเพื่อ@Injectableทำงาน

ความเป็นไปได้อื่นไม่ได้emitDecoratorMetadataตั้งค่าเป็นจริงใน tsconfig.json

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

คุณได้รับข้อผิดพลาดนี้หากคุณมีบริการAซึ่งขึ้นอยู่กับคุณสมบัติคงที่ / วิธีการให้บริการBและบริการBเองนั้นขึ้นอยู่กับบริการAการฉีดขึ้นอยู่กับรางน้ำ ดังนั้นมันจึงเป็นแบบพึ่งพาอาศัยแบบวงกลมแม้ว่าจะไม่ใช่เพราะคุณสมบัติ / เมธอดเป็นแบบคงที่ อาจเป็นข้อผิดพลาดที่เกิดขึ้นในการทำงานร่วมกับทอท

นอกจาก@Injectable()มัณฑนากรที่ขาดหายไปแล้ว

@Injectable()มัณฑนากรที่หายไปในคลาสนามธรรมผลิตไม่สามารถแก้ไขพารามิเตอร์ทั้งหมดสำหรับการให้บริการ: (?) มัณฑนากรต้องอยู่ในMyServiceเช่นเดียวกับในชั้นเรียนที่ได้รับBaseService

//abstract class
@Injectable()
abstract class BaseService { ... }

//MyService    
@Injectable()
export class MyService extends BaseService {
.....
}

ในกรณีของฉันมันเกิดขึ้นเพราะฉันไม่ได้ประกาศประเภทของพารามิเตอร์คอนสตรัคเตอร์

ฉันมีสิ่งนี้:

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

แล้วเปลี่ยนเป็นรหัสด้านล่างแก้ปัญหาของฉัน

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

สำหรับฉันมันแค่ขาด()ใน @Injectable ที่เหมาะสมคือ @Injectable ()

การเอาพารามิเตอร์ออกจาก constructor แบบฉีดได้ () สามารถแก้ไขได้ในกรณีของฉัน

ในกรณีของฉันมันเป็นเพราะปลั๊กอิน Augury ปิดการใช้งานมันจะทำงานได้ดี ตัวเลือกอื่นคือ aot ก็ใช้ได้เช่นกัน

เครดิตทั้งหมดไปที่ @ Boboss74 เขาโพสต์คำตอบที่นี่: https://github.com/angular/angular/angular/issues/23958

สำหรับฉันแล้วปัญหาก็ยิ่งน่ารำคาญฉันใช้บริการภายในบริการและลืมที่จะเพิ่มมันเป็นการพึ่งพาใน appModule! หวังว่านี่จะช่วยให้ใครบางคนประหยัดเวลาหลายชั่วโมงในการทำลายแอปลงเพื่อสร้างแอปอีกครั้ง

คุณต้องเพิ่ม Array Provider ใน @Component decorator หรือในโมดูลที่มีการประกาศส่วนประกอบของคุณ ส่วนประกอบภายในที่คุณสามารถทำได้ดังนี้:

@Component({
  moduleId: module.id,
  selector: 'pm-header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css'],
  directives: [ROUTER_DIRECTIVES, NgClass],
  providers: [MobileService]
})

ในกรณีของฉันที่ส่งพารามิเตอร์ที่ไม่ถูกต้องไปยังตัวสร้างสร้างข้อผิดพลาดแนวคิดพื้นฐานเกี่ยวกับข้อผิดพลาดนี้คือคุณส่งค่า args ผิดไปยังฟังก์ชันใด ๆ โดยไม่รู้ตัว

export class ProductComponent {
    productList: Array<Product>;

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

ฉันแก้ไขได้โดยเพียงแค่ลบอาร์กิวเมนต์นั้น

สำหรับฉันฉันได้รับข้อผิดพลาดนี้เมื่อฉันปิดใช้งานการนำเข้านี้ในไฟล์ 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';

ในกรณีของฉันฉันพยายามขยายวิธี " NativeDateAdapter" เพื่อแทนที่ " format(date: Date, displayFormat: Object)"

ใน AngularMaterial-2 DatePicker

โดยพื้นฐานแล้วฉันลืมเพิ่มคำ@Injectableอธิบายประกอบ

หลังจากฉันเพิ่มสิ่งนี้ไปยังคลาส "CustomDateAdapter" ของฉัน:

@Injectable({
  providedIn: 'root'
})

ข้อผิดพลาดได้หายไป

คำตอบนี้อาจมีประโยชน์มากสำหรับปัญหานี้ นอกจากนี้สำหรับกรณีของฉันให้ส่งออกบริการเป็นdefaultสาเหตุ

ไม่ถูกต้อง:

@Inject()
export default class MobileService { ... }

แก้ไข:

@Inject()
export class MobileService { ... }

นี่อาจเป็นปัญหาที่ยากมากในการดีบักเนื่องจากไม่มีข้อเสนอแนะในข้อผิดพลาด หากคุณกังวลเกี่ยวกับการขึ้นต่อกันตามวัฏจักรจริงนี่คือสิ่งที่สำคัญที่สุดที่จะดูใน stack trace a) ชื่อของบริการ b) พารามิเตอร์ Constructor ในบริการนั้นที่มีเครื่องหมายคำถามเช่นถ้ามันเป็นเช่นนี้:

ไม่สามารถแก้ไขพารามิเตอร์ทั้งหมดสำหรับ AuthService: ([วัตถุวัตถุ], [วัตถุวัตถุ], [วัตถุวัตถุ], [วัตถุวัตถุ],?)

หมายความว่าพารามิเตอร์ที่ 5 เป็นบริการที่ขึ้นอยู่กับ AuthService ด้วย เช่นเครื่องหมายคำถามหมายความว่าไม่ได้รับการแก้ไขโดย DI

จากนั้นคุณเพียงแค่ต้องแยกบริการทั้งสองออกโดยการปรับโครงสร้างรหัส

ฉันพบข้อผิดพลาดนี้โดยพิมพ์ชื่อบริการผิดเช่นตัวสร้าง (ส่วนตัวmyService: MyService )

สำหรับบริการที่สะกดผิดฉันสามารถตรวจสอบว่าบริการใดเป็นปัญหา (ฉันมีหลายรายชื่ออยู่ในตัวสร้าง) โดยตรวจสอบหน้าใน Chrome-> Console คุณจะเห็นเป็นส่วนหนึ่งของข้อความที่เป็นรายการ "พารามิเตอร์" อาร์เรย์โดยการแสดงวัตถุวัตถุวัตถุวัตถุ? (หรืออะไรทำนองนั้น) สังเกตเห็นว่า "?" เป็นและนั่นคือตำแหน่งของการบริการที่เป็นสาเหตุของปัญหา

แม้ว่าอาจมีการกล่าวถึงลำดับของคลาสที่ส่งออกจากภายในบาร์เรล แต่สถานการณ์ต่อไปนี้อาจให้ผลเหมือนกัน

สมมติว่าคุณมีชั้นเรียน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) ยังไม่เป็นที่รู้จักสำหรับแองกูลาร์ ( อาจเป็นที่รันไทม์ในระหว่างกระบวนการฉีดขึ้นรูปของแองกูลาร์ในคลาสA ) ข้อผิดพลาดถูกยกขึ้น

สารละลาย

วิธีแก้ปัญหาคือการประกาศและส่งออกคลาสที่ต้องพึ่งพาก่อนที่คลาสจะทำ DI

เช่นในกรณีข้างต้นคลาสAจะประกาศทันทีหลังจากการอ้างอิงของมันถูกกำหนด:

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

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

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

ในกรณีของฉันฉันส่งออกคลาสและ Enum จากไฟล์คอมโพเนนต์เดียวกัน:

mComponent.component.ts:

export class MyComponentClass{...}
export enum MyEnum{...}

จากนั้นผมก็พยายามที่จะใช้จากลูกของMyEnum MyComponentClassนั่นเป็นสาเหตุของข้อผิดพลาดไม่สามารถแก้ไขพารามิเตอร์ทั้งหมดได้

ด้วยการย้ายMyEnumในโฟลเดอร์แยกต่างหากMyComponentClassนั่นช่วยแก้ไขปัญหาของฉันได้!

ดังที่GünterZöchbauerกล่าวถึงสิ่งนี้เกิดขึ้นเนื่องจากการบริการหรือส่วนประกอบขึ้นอยู่กับการเวียน

หากบริการของคุณถูกกำหนดในไฟล์เดียวกับส่วนประกอบ (ที่ใช้งาน) และบริการจะถูกกำหนดหลังจากส่วนประกอบในไฟล์คุณอาจได้รับข้อผิดพลาดนี้ นี่เป็นเพราะปัญหา 'forwardRef' เดียวกันที่คนอื่น ๆ ได้กล่าวถึง ในขณะนี้ VSCode ไม่ค่อยดีนักในการแสดงข้อผิดพลาดนี้และคอมไพล์การคอมไพล์สำเร็จ

การรันบิลด์ด้วย--aotสามารถปกปิดปัญหานี้ได้เนื่องจากวิธีการทำงานของคอมไพเลอร์ (อาจเกี่ยวข้องกับการเขย่าต้นไม้)

การแก้ไข:ตรวจสอบให้แน่ใจว่ามีการกำหนดบริการในไฟล์อื่นหรือก่อนที่จะกำหนดองค์ประกอบ (ฉันไม่แน่ใจว่าสามารถใช้ forwardRef ในกรณีนี้ได้หรือไม่ แต่ดูเหมือนว่าจะทำเช่นนั้น)

ถ้าฉันมีบริการที่ง่ายมากซึ่งเชื่อมโยงกับส่วนประกอบอย่างมาก (เรียงลำดับเหมือนโมเดลมุมมอง) - เช่น ImageCarouselComponentฉันอาจตั้งชื่อมันImageCarouselComponent.service.tsเพื่อไม่ให้สับสนกับบริการอื่น ๆ ของฉัน

ในกรณีของฉันมันคือการอ้างอิงแบบวงกลม ฉันมี MyService โทร Myservice2 และ MyService2 เรียก MyService

ไม่ดี :(

ในกรณีของฉันเหตุผลดังต่อไปนี้:

• บริการฉีดของฉัน A ขยายอีกคลาส B
• B มีนวกรรมิกซึ่งต้องการอาร์กิวเมนต์
• ฉันไม่ได้กำหนดคอนสตรัคเตอร์ใด ๆ ใน A

ดังนั้นเมื่อพยายามสร้างวัตถุ A คอนสตรัคเตอร์เริ่มต้นจึงล้มเหลว ฉันไม่รู้ว่าทำไมนี่ไม่ใช่ข้อผิดพลาดในการรวบรวม

ฉันได้รับการแก้ไขโดยเพิ่มตัวสร้างใน A ซึ่งเรียกว่าตัวสร้างของ B อย่างถูกต้อง

Gotcha!

หากไม่มีคำตอบข้างต้นช่วยคุณได้บางทีคุณอาจนำเข้าองค์ประกอบบางอย่างจากไฟล์เดียวกันที่มีส่วนประกอบกำลังฉีดบริการ

ฉันอธิบายได้ดีกว่า:

นี่คือไฟล์บริการ:

// your-service-file.ts
import { helloWorld } from 'your-component-file.ts'

@Injectable()
export class CustomService() {
  helloWorld()
}

นี่คือไฟล์คอมโพเนนต์:

@Component({..})
export class CustomComponent {
  constructor(service: CustomService) { }
}

export function helloWorld() {
  console.log('hello world');
}

ดังนั้นมันจึงทำให้เกิดปัญหาแม้ว่าสัญลักษณ์ไม่ได้อยู่ในองค์ประกอบเดียวกัน แต่อยู่ในไฟล์เดียวกัน ย้ายสัญลักษณ์ (อาจเป็นฟังก์ชั่นค่าคงที่คลาสและอื่น ๆ ... ) ที่อื่นและข้อผิดพลาดจะจางหายไป

สำหรับรุ่นเชิงมุม 6 และใหม่กว่าให้ลอง

@Injectable({
  providedIn: 'root'
})

.. อยู่เหนือระดับบริการของคุณโดยไม่มีบรรทัดอื่น ๆ อยู่ระหว่างกลาง

ข้อได้เปรียบ

• ไม่จำเป็นต้องเพิ่มบริการลงในโมดูลใด ๆ (จะเป็น "ค้นพบอัตโนมัติ")
• บริการจะเป็นแบบซิงเกิล (เนื่องจากจะถูกฉีดเข้าไปในรูท)

[ เอกสารเชิงมุม ]