NGOẠI TRỪ: Không thể giải quyết tất cả các tham số

Tôi đã xây dựng một ứng dụng cơ bản trong Angular 2, nhưng tôi đã gặp phải một vấn đề kỳ lạ khi tôi không thể tiêm dịch vụ vào một trong các thành phần của mình. Tuy nhiên, nó tiêm tốt vào bất kỳ thành phần nào trong ba thành phần khác mà tôi đã tạo.

Đối với người mới bắt đầu, đây là dịch vụ:

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;
  }

}

Và thành phần mà nó từ chối làm việc với:

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);
  }

}

Lỗi tôi gặp phải trong bảng điều khiển trình duyệt là:

NGOẠI TRỪ: Không thể giải quyết tất cả các tham số cho HeaderComponent: (?).

Tôi có dịch vụ trong chức năng bootstrap để nó có một nhà cung cấp. Và tôi dường như có thể đưa nó vào hàm tạo của bất kỳ thành phần nào khác mà không gặp vấn đề gì.

Nhập nó từ tệp nơi nó được khai báo trực tiếp thay vì thùng.

Tôi không biết chính xác nguyên nhân gây ra vấn đề nhưng tôi đã thấy nó được đề cập nhiều lần (có thể là một loại phụ thuộc vòng tròn).

Nó cũng có thể được sửa chữa bằng cách thay đổi thứ tự xuất khẩu trong thùng (không biết chi tiết, nhưng cũng được đề cập)

Ngoài các câu trả lời trước đó, có vẻ như lỗi này cũng bị ném khi dịch vụ tiêm của bạn thiếu @Injectable()trang trí thực tế . Vì vậy, trước khi bạn gỡ lỗi điều phụ thuộc theo chu kỳ và thứ tự nhập / xuất của bạn, hãy kiểm tra đơn giản xem dịch vụ của bạn có thực sự có@Injectable() được xác định hay không.

Điều này áp dụng cho Angular mới nhất hiện tại, Angular 2.1.0.

Tôi đã mở một vấn đề về vấn đề này .

Kể từ Angular 2.2.3, giờ đây đã có một forwardRef()chức năng tiện ích cho phép bạn tiêm các nhà cung cấp chưa được xác định.

Bởi không được xác định, tôi có nghĩa là bản đồ tiêm phụ thuộc không biết định danh. Đây là những gì xảy ra trong các phụ thuộc tròn. Bạn có thể có các phụ thuộc tròn trong Angular rất khó gỡ rối và nhìn thấy.

export class HeaderComponent {
  mobileNav: boolean = false;

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

}

Thêm @Inject(forwardRef(() => MobileService))vào tham số của hàm tạo trong mã nguồn của câu hỏi ban đầu sẽ khắc phục vấn đề.

Người giới thiệu

Hướng dẫn sử dụng góc 2: ForwardRef

Chuyển tiếp tài liệu tham khảo trong Angular 2

SAU # 1: Quên trang trí:

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

SAU # 2: Bỏ qua biểu tượng "@":

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

SAU # 3: Bỏ qua các biểu tượng "()":

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

SAU # 4: Chữ thường "i":

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

SAU # 5: Bạn đã quên: nhập {tiêm} từ '@ angular / core';

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

CHÍNH XÁC:

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

Như đã nêu, vấn đề là do lệnh xuất khẩu trong thùng gây ra bởi sự phụ thuộc vòng tròn.

Một lời giải thích chi tiết hơn có tại đây: https://stackoverflow.com/a/37907696/893630

Tôi cũng gặp phải điều này bằng cách tiêm dịch vụ A vào dịch vụ B và ngược lại.

Tôi nghĩ rằng điều tốt là điều này thất bại nhanh vì có lẽ nên tránh . Nếu bạn muốn các dịch vụ của mình trở nên mô đun hơn và có thể sử dụng lại, tốt nhất nên tránh các tham chiếu vòng càng nhiều càng tốt. Bài đăng này nêu bật những cạm bẫy xung quanh đó.

Do đó, tôi có các khuyến nghị sau:

• Nếu bạn cảm thấy các lớp tương tác quá thường xuyên (tôi đang nói về sự ghen tị về tính năng ), bạn có thể muốn xem xét việc hợp nhất 2 dịch vụ thành 1 lớp .
• Nếu những điều trên không phù hợp với bạn, hãy cân nhắc sử dụng dịch vụ thứ 3 , (một EventService) cả hai dịch vụ có thể tiêm để trao đổi tin nhắn.

Vì lợi ích của người tìm kiếm; Tôi đã nhận được lỗi này. Nó chỉ đơn giản là một biểu tượng @ bị thiếu.

Tức là điều này tạo ra Can't resolve all parameters for MyHttpServicelỗi.

Injectable()
export class MyHttpService{
}

Thêm @biểu tượng bị thiếu sẽ sửa nó.

@Injectable()
export class MyHttpService{
}

Trong trường hợp của tôi, tôi cần thêm import "core-js/es7/reflect";vào ứng dụng của mình để thực hiện @Injectablecông việc.

Một khả năng khác là không emitDecoratorMetadatađược đặt thành true trong tsconfig.json

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

Bạn gặp lỗi này nếu bạn có dịch vụ A phụ thuộc vào thuộc tính / phương thức dịch vụ B tĩnh và chính dịch vụ B phụ thuộc vào dịch vụ A phụ thuộc vào máng dịch vụ . Vì vậy, nó là một loại phụ thuộc vòng tròn, mặc dù không phải vì thuộc tính / phương thức là tĩnh. Có lẽ là một lỗi xảy ra kết hợp với AOT .

Ngoài việc @Injectable()trang trí còn thiếu

Thiếu @Injectable()trang trí trong lớp trừu tượng đã tạo ra Không thể giải quyết tất cả các tham số cho dịch vụ: (?) Trình trang trí cần có mặt MyServicecũng như trong lớp dẫn xuấtBaseService

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

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

Trong trường hợp của tôi, nó đã xảy ra bởi vì tôi đã không khai báo kiểu cho tham số hàm tạo.

Tôi đã có một cái gì đó như thế này:

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

và sau đó thay đổi nó thành mã dưới đây đã giải quyết vấn đề của tôi.

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

Đối với tôi, nó chỉ thiếu ()trong @Injectable. Đúng là @Injectable ()

Loại bỏ các tham số từ phương thức constructor () có thể giải quyết nó cho trường hợp của tôi.

Trong trường hợp của tôi là do plugin Augury, vô hiệu hóa nó sẽ hoạt động tốt. Tùy chọn thay thế là aot, cũng hoạt động.

tất cả các khoản tín dụng cho @ Boboss74, anh ấy đã đăng câu trả lời tại đây: https://github.com/angular/angular/issues/23958

Đối với tôi, vấn đề thậm chí còn khó chịu hơn, tôi đã sử dụng một dịch vụ trong một dịch vụ và quên thêm nó dưới dạng phụ thuộc trong appModule! Hy vọng điều này sẽ giúp ai đó tiết kiệm được vài giờ để phá vỡ ứng dụng chỉ để xây dựng lại nó

Bạn phải thêm mảng nhà cung cấp trong trang trí @Component hoặc trong mô-đun nơi thành phần của bạn được khai báo. Thành phần bên trong bạn có thể làm như dưới đây:

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

Trong trường hợp của tôi chuyển các tham số sai cho hàm tạo tạo ra lỗi này, ý tưởng cơ bản về lỗi này là bạn vô tình truyền một số đối số sai cho bất kỳ hàm nào.

export class ProductComponent {
    productList: Array<Product>;

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

Tôi đã giải quyết điều này bằng cách loại bỏ lập luận đó.

Đối với tôi, tôi đã gặp lỗi này khi tôi vô hiệu hóa việc nhập sai này trong tệp polyfills.ts, bạn cần đảm bảo rằng nó được nhập để tránh lỗi đó.

/** 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';

Trong trường hợp của tôi, tôi đã cố gắng mở rộng " NativeDateAdapter" để ghi đè "format(date: Date, displayFormat: Object) phương thức "" ".

Trong AngularM vật liệu-2 DatePicker.

Vì vậy, về cơ bản tôi đã quên để thêm @Injectableanotation.

Sau khi tôi thêm phần này vào lớp "CustomDateAdOG" của mình:

@Injectable({
  providedIn: 'root'
})

Lỗi đã biến mất.

Câu trả lời này có thể rất hữu ích cho vấn đề này. Ngoài ra, đối với trường hợp của tôi, xuất khẩu dịch vụ là defaultnguyên nhân.

SAI LẦM:

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

CHÍNH XÁC:

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

Đây có thể là một vấn đề thực sự khó khăn để gỡ lỗi do thiếu thông tin phản hồi trong lỗi. Nếu bạn lo lắng về sự phụ thuộc theo chu kỳ thực tế, đây là điều quan trọng nhất cần xem xét trong dấu vết ngăn xếp a) tên của dịch vụ b) tham số hàm tạo trong dịch vụ có dấu chấm hỏi, ví dụ như nếu nó trông như thế này:

không thể giải quyết tất cả các tham số cho AuthService: ([Object Object], [object Object], [object Object], [object Object] ,?)

thì nó có nghĩa là tham số thứ 5 là một dịch vụ cũng phụ thuộc vào AuthService. tức là dấu hỏi, nghĩa là nó không được giải quyết bởi DI.

Từ đó, bạn chỉ cần tách 2 dịch vụ bằng cách cấu trúc lại mã.

Tôi đã gặp phải lỗi này bằng cách nhập sai tên của dịch vụ, tức là hàm tạo (private myService: MyService ).

Đối với các dịch vụ sai chính tả, tôi có thể xác định dịch vụ nào là sự cố (tôi có một số được liệt kê trong hàm tạo) bằng cách kiểm tra trang trong Chrome-> Bảng điều khiển. Bạn sẽ thấy như là một phần của thông báo danh sách mảng "tham số" bằng cách hiển thị đối tượng Object, Object Object ,? (hoặc điều tương tự). Lưu ý nơi "?" và đó là vị trí của dịch vụ gây ra vấn đề.

Mặc dù đặt hàng của các lớp xuất khẩu từ trong thùng có thể đã được đề cập, kịch bản sau đây cũng có thể tạo ra hiệu ứng tương tự.

Giả sử bạn có các lớp học A, Bvà Cxuất khẩu từ bên trong cùng một tập tin mà Aphụ thuộc vào Bvà C:

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

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

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

Vì các lớp phụ thuộc (nghĩa là trong các trường hợp này Bvà các lớp C) chưa được biết đến với Angular, ( có lẽ tại thời điểm chạy trong quá trình tiêm phụ thuộc của Angular vào lớpA ), lỗi đã được nêu ra.

Giải pháp

Giải pháp là khai báo và xuất các lớp phụ thuộc trước lớp mà DI được thực hiện.

tức là trong trường hợp trên, lớp Ađược khai báo ngay sau khi các phụ thuộc của nó được định nghĩa:

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

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

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

Trong trường hợp của tôi, tôi đã xuất một Class và Enum từ cùng một tệp thành phần:

mComponent.component.ts:

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

Sau đó, tôi đã cố gắng sử dụng MyEnumtừ một đứa trẻ MyComponentClass. Điều đó đã gây ra lỗi Không thể giải quyết tất cả các tham số .

Bằng cách di chuyển MyEnumtrong một thư mục riêng biệt MyComponentClass, điều đó đã giải quyết vấn đề của tôi!

Như Günter Zöchbauer đã đề cập, điều này xảy ra do một dịch vụ hoặc thành phần phụ thuộc theo vòng tròn.

Nếu dịch vụ của bạn được xác định trong cùng một tệp với một thành phần (tiêu thụ nó) và dịch vụ được xác định sau thành phần trong tệp, bạn có thể gặp lỗi này. Điều này là do cùng một vấn đề 'ForwardRef' mà những người khác đã đề cập. Tại thời điểm này, VSCode không tuyệt vời khi hiển thị cho bạn lỗi này và bản dựng đã biên dịch thành công.

Chạy bản dựng có --aotthể che giấu vấn đề này do cách trình biên dịch hoạt động (có thể liên quan đến rung cây).

Giải pháp: Đảm bảo dịch vụ được xác định trong tệp khác hoặc trước định nghĩa thành phần. (Tôi không chắc chắn nếu ForwardRef có thể được sử dụng trong trường hợp này, nhưng có vẻ vụng về khi làm như vậy).

Nếu tôi có một dịch vụ rất đơn giản gắn chặt với một thành phần (giống như mô hình khung nhìn) - vd. ImageCarouselComponent, Tôi có thể đặt tên cho nó ImageCarouselComponent.service.tsđể nó không bị lẫn lộn với các dịch vụ khác của tôi.

Trong trường hợp của tôi, nó là một tài liệu tham khảo tròn. Tôi đã có MyService gọi Myservice2 và MyService2 gọi MyService.

Không tốt :(

Trong trường hợp của tôi, lý do là như sau:

• dịch vụ tiêm của tôi A mở rộng một lớp B khác
• B có một hàm tạo cần một đối số
• Tôi đã không xác định bất kỳ nhà xây dựng trong A

Kết quả là, khi cố gắng tạo một đối tượng A, hàm tạo mặc định đã thất bại. Tôi không biết tại sao đây không phải là lỗi biên dịch.

Tôi đã sửa nó bằng cách thêm một hàm tạo vào A, được gọi chính xác là hàm tạo của B.

Gotcha!

Nếu không có câu trả lời nào ở trên giúp bạn, có thể bạn đang nhập một số phần tử từ cùng một tệp nơi một thành phần đang tiêm dịch vụ.

Tôi giải thích rõ hơn:

Đây là tập tin dịch vụ :

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

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

Đây là tập tin thành phần :

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

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

Vì vậy, nó gây ra vấn đề ngay cả khi biểu tượng không nằm trong cùng một thành phần, mà chỉ bên trong cùng một tệp. Di chuyển biểu tượng (nó có thể là một hàm, một hằng số, một lớp và vv ...) ở nơi khác và lỗi sẽ biến mất

đối với phiên bản 6 góc và mới hơn, hãy thử

@Injectable({
  providedIn: 'root'
})

.. ngay phía trên lớp dịch vụ của bạn không có dòng nào khác ở giữa

lợi thế

• không cần thêm dịch vụ vào bất kỳ mô-đun nào (sẽ được "tự động phát hiện")
• dịch vụ sẽ là một singleton (vì nó sẽ được đưa vào root)

[ tài liệu góc ]