서비스를 각도 구성 요소에 주입하려고 할 때 오류가 발생했습니다. "예외: 구성 요소의 모든 매개 변수를 해결할 수 없습니다." 이유는 무엇입니까?

서비스를 각도 구성 요소에 주입하려고 할 때 오류가 발생했습니다. "예외: 구성 요소의 모든 매개 변수를 해결할 수 없습니다." 이유는 무엇입니까?

Angular에서 기본 앱을 구축했는데 컴포넌트 중 하나에 서비스를 삽입할 수 없는 이상한 문제가 발생했습니다.단, 제가 작성한 다른 3가지 컴포넌트에는 문제가 없습니다.

우선, 다음과 같은 서비스를 제공합니다.

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

}

브라우저 콘솔에 표시되는 오류는 다음과 같습니다.

예외: Header Component: (?)에 대한 일부 매개 변수를 확인할 수 없습니다.

부트스트랩 기능에 서비스가 있기 때문에 프로바이더가 있습니다.다른 컴포넌트의 컨스트럭터에도 문제없이 삽입할 수 있을 것 같습니다.

배럴 대신 직접 선언된 파일에서 가져옵니다.

문제의 정확한 원인은 알 수 없지만 여러 번 언급되는 것을 보았습니다(아마도 순환 의존 관계일 것입니다).

또, 배럴내의 수출 순서를 변경하는 것으로 고정할 수 있을 것입니다(자세한 것은 모릅니다만, 언급도 있었습니다).

에도 이 하는 것으로 .@Injectable()에 서비스에 실제로 Import/export가 있는지 여부를 합니다.@Injectable()정의되어 있습니다.

이는 현재 Angular 최신 Angular 2.1.0에 적용됩니다.

저는 이 건에 대해 창간했습니다.

의 경우2.2.3이제 가 있다forwardRef()아직 정의되지 않은 공급자를 주입할 수 있는 유틸리티 함수입니다.

정의되지 않았다는 것은 종속성 주입 맵이 식별자를 인식하지 못한다는 것을 의미합니다.이것은 순환 의존관계에서 일어나는 일입니다.Angular(각도)에서 원형의 종속성을 풀고 보기 어려울 수 있습니다.

export class HeaderComponent {
  mobileNav: boolean = false;

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

}

" " " @Inject(forwardRef(() => MobileService))원래 질문의 소스 코드에 있는 생성자의 매개 변수로 지정하면 문제가 해결됩니다.

레퍼런스

Angular 2 설명서:Forward Ref(전송 참조)

각도 2의 순방향 참조

WROCK #1: 데코레이터를 잊은 경우:

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

WRIGH #2: "@" 기호가 누락되었습니다.

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

WRIGH #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: 잊어버렸습니다: '@angular/core'에서 {Injectable} 가져오기;

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

정답:

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

이미 말한 바와 같이, 이 문제는 순환 의존성에 의한 배럴 내 수출 주문에 기인합니다.

상세한 것에 대하여는, https://stackoverflow.com/a/37907696/893630 를 참조해 주세요.

또, 서비스 A를 서비스 B에 삽입해, 그 반대의 경우도 발생하고 있습니다.

어차피 피해야 할 일이기 때문에 빨리 실패하는 것은 좋은 일이라고 생각합니다.서비스를 모듈화하고 재사용하려면 순환 참조를 가능한 한 피하는 것이 좋습니다.이 게시물은 그것을 둘러싼 함정을 강조하고 있다.

따라서 다음과 같은 권장 사항이 있습니다.

• 클래스가 너무 자주 상호 작용한다고 생각되는 경우(기능에 대한 선망)에는 2개의 서비스를 1개의 클래스로 통합하는 것을 검토해 주십시오.
• 위 내용이 여의치 않을 경우 세 번째 서비스를 이용해 주십시오.EventService양쪽 서비스가 메시지를 교환하기 위해 주입할 수 있습니다.

검색자를 위해 이 오류가 발생했습니다.단순히 누락된 @ 기호입니다.

,, 과, 과, 과, 과, i, i, i, i, i이 생성됩니다.Can't resolve all parameters for MyHttpService

Injectable()
export class MyHttpService{
}

된 " " " 를 합니다.@기호에 의해 수정됩니다.

@Injectable()
export class MyHttpService{
}

하나의 은 '보다 낫다'가 입니다.emitDecoratorMetadatajsontsconfig.json에서 됩니다.

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

나'나 '나'를 붙여야 요.import "core-js/es7/reflect";제 신청에 따라@Injectable을 하다

「 」가 것 에, 「 」도 없습니다.@Injectable()

★★★@Injectable()service:(?) Cannot all parameters for service:(?)를 했습니다.데코레이터는 다음 장소에 있어야 합니다.MyService 파생 클래스 '''도 마찬가지입니다.BaseService

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

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

이 에러는 서비스 A가 서비스 B의 정적 속성/방식에 의존하며 서비스 B 자체가 서비스A 트로프 의존성 주입에 의존하면 발생합니다.즉, 속성/방식이 정적이기 때문에 순환 의존성이라는 것입니다.AOT와 조합하여 발생하는 버그일 수 있습니다.

제 경우 컨스트럭터 파라미터의 유형을 선언하지 않았기 때문에 발생하였습니다.

난 이런 게 있었어

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

그리고 아래 코드로 바꾸면 문제가 해결되었습니다.

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

이 답변은 이 문제에 매우 도움이 될 수 있습니다.또, 제 경우는, 서비스를 export 하는 것.default인이었었다다

틀렸다:

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

정답:

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

로서는 그저 했다.()@주입 불가.은 @Injectable입니다.

인젝터블 컨스트럭터() 메서드에서 파라미터를 삭제함으로써 해결되었습니다.

내 경우 플러그인 Augury를 비활성화하면 정상적으로 작동합니다.다른 옵션은 aot입니다.또한 동작합니다.

모든 크레딧은 @Boboss74로, 그는 여기에 답을 올렸습니다.https://github.com/angular/angular/issues/23958

이는 에러에 피드백이 없기 때문에 디버깅이 매우 어려운 문제가 될 수 있습니다.실제 순환 의존성에 대해 우려하는 경우 스택트레이스에서 가장 중요한 것은 다음과 같습니다a) 서비스 b) 해당 서비스의 컨스트럭터 파라미터에 물음표가 붙어 있습니다.예를 들어 다음과 같습니다.

AuthService의 모든 파라미터를 해결할 수 없습니다([개체], [개체], [개체], [개체], [개체], ?).

5번째 파라미터는 AuthService에 의존한 서비스임을 의미합니다.즉, 물음표는 DI에 의해 해결되지 않았음을 의미합니다.

여기서부터는 코드를 재구성하여 2개의 서비스를 분리하기만 하면 됩니다.

저는 이 문제가 더 귀찮아서 서비스 내에서 서비스를 사용하다가 appModule에 종속성을 추가하는 것을 잊었습니다.이를 통해 누군가가 앱을 분해하는 데 몇 시간을 절약할 수 있기를 바랍니다.

주입식 추가로 문제 해결:

에러 코드

import { Observable } from 'rxjs';
import { io } from 'socket.io-client';
import { HttpClient } from '@angular/common/http';

export class Chat {

수정 후

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { io } from 'socket.io-client';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class Chat {

서비스 이름(즉, 컨스트럭터(프라이빗 my Service: 마이 서비스)

철자가 틀린 서비스의 경우 Chrome-> Console 페이지를 조사하여 문제가 있는 서비스(컨트롤러에 몇 개 기재되어 있습니다)를 판별할 수 있었습니다.메시지의 일부로서 오브젝트, 오브젝트, ?(또는 그와 유사한 것)를 표시함으로써 "파라미터" 배열 목록을 볼 수 있습니다.문제의 원인이 되고 있는 것은, 「?」의 위치와 서비스의 위치입니다.

컴포넌트가 선언된 모듈 또는 @Component 데코레이터에 공급자 배열을 추가해야 합니다.내부 컴포넌트에서는 다음과 같이 할 수 있습니다.

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

잘못된 파라미터를 컨스트럭터에 전달하면 이 에러가 발생합니다.이 에러에 대한 기본적인 생각은 자신도 모르게 잘못된 arg를 함수에 전달한 것입니다.

export class ProductComponent {
    productList: Array<Product>;

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

나는 그 논쟁을 제거함으로써 이 문제를 해결했다.

이 에러는 polyfiles.ts 파일에서 Import를 잘못 디세블로 했을 때 발생하였습니다.이 에러를 피하기 위해서는 Import가 되어 있는지 확인해야 합니다.

/** 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)method."

Angular Material-2 DatePicker의 경우.

으로는 제가 안 요, 안 넣었어요.@Injectable아노테이션

이것을 「CustomDateAdapter」클래스에 추가한 후:

@Injectable({
  providedIn: 'root'
})

오류가 사라졌습니다.

내 경우 그것은 순환 참조였다.MyService가 MyService2를 호출하고 MyService2가 MyService를 호출했습니다.

좋지 않다:(

알았어. 거짓말하지 마.

위의 답변이 도움이 되지 않는 경우 컴포넌트가 서비스를 주입하고 있는 파일과 동일한 파일에서 요소를 Import하고 있을 수 있습니다.

더 잘 설명할 수 있습니다.

서비스 파일은 다음과 같습니다.

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

따라서 심볼이 같은 컴포넌트 안에 있는 것이 아니라 같은 파일 안에 있는 경우에도 문제가 발생합니다.기호(함수, 상수, 클래스 등)를 다른 곳으로 이동하면 오류가 사라집니다.

angular 6 이상 버전에서는

@Injectable({
  providedIn: 'root'
})

..서비스 클래스 바로 위, 중간에는 다른 선이 없습니다.

이점

• 어떤 모듈에도 서비스를 추가할 필요가 없습니다('자동 검출'됩니다).
• 서비스는 싱글톤이 됩니다(루트에 삽입되기 때문에).

[의사님들

배럴 내에서의 수출 등급의 주문도 언급되었을 수 있지만, 다음과 같은 시나리오도 같은 효과를 낼 수 있다.

.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에 알려지지 않았습니다.오류가 발생합니다.

솔루션

해결책은 DI가 실행되는 클래스 전에 종속 클래스를 선언하고 내보내는 것입니다.

의 경우 「」, 「」가 됩니다.A됩니다.

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

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

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

이 경우 동일한 컴포넌트 파일에서 Class와 Enum을 내보내고 있었습니다.

mComponent.component.ts:

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

그리고 나서, 나는 그것을 사용하려고 했다.MyEnum의子의 MyComponentClass이로 인해 "모든 파라미터를 해결할 수 없습니다" 오류가 발생하였습니다.

이동에 의해MyEnum와는 다른 폴더에MyComponentClass그게 내 문제를 해결했어!

귄터 쾨흐바우어가 언급한 바와 같이, 이는 서비스 또는 구성요소가 순환적으로 의존하기 때문에 발생합니다.

서비스가 컴포넌트(사용하는 컴포넌트)와 같은 파일에 정의되어 있고 서비스가 파일 내의 컴포넌트 뒤에 정의되어 있는 경우 이 오류가 발생할 수 있습니다.이는 다른 사용자가 언급한 것과 동일한 'forwardRef' 문제 때문입니다.현재 VSCode는 이 오류를 표시하고 빌드를 성공적으로 컴파일하는 데 적합하지 않습니다.

를 사용한 빌드 실행--aot는 컴파일러의 동작방식으로 인해 이 문제를 숨길 수 있습니다(트리의 흔들림과 관련된 문제).

솔루션:서비스가 다른 파일에 정의되어 있는지 또는 구성 요소 정의 전에 정의되어 있는지 확인하십시오.(이 경우 forwardRef를 사용할 수 있을지 모르겠지만, 그렇게 하는 것은 서투른 것 같습니다).

컴포넌트(뷰 모델 등)와 매우 밀접하게 관련되어 있는 심플한 서비스가 있는 경우. ImageCarouselComponentImageCarouselComponent.service.ts다른 서비스와 혼동되지 않도록 하겠습니다.

언급URL : https://stackoverflow.com/questions/37997824/error-when-trying-to-inject-a-service-into-an-angular-component-exception-can