例外：すべてのパラメーターを解決できない

Angular 2で基本的なアプリを作成しましたが、コンポーネントの1つにサービスを注入できないという奇妙な問題が発生しました。ただし、私が作成した他の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);
  }

}

ブラウザコンソールで発生するエラーは次のとおりです。

例外：HeaderComponent：（？）のすべてのパラメーターを解決できません。

ブートストラップ機能にサービスがあるので、プロバイダーがあります。そして、他のコンポーネントのコンストラクタに問題なく注入できるようです。

バレルの代わりに直接宣言されているファイルからインポートします。

問題の正確な原因はわかりませんが、何度か言及されているのを見ました（おそらく、ある種の循環依存）。

また、バレル内のエクスポートの順序を変更することで修正できるはずです（詳細は不明ですが、言及されていました）。

上記の回答に加えて、注入可能なサービスに実際の@Injectable()デコレーターが欠落している場合にも、このエラーがスローされるようです。したがって、循環依存関係とインポート/エクスポートの順序をデバッグする前に、サービスが実際に@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マニュアル：ForwardRef

Angular 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：あなたは忘れました： '@ 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つのクラスにマージすることを検討することをお勧めします。
• 上記の方法でうまくいかない場合は、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でtrueに設定していないことです

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

あなたは、サービス持っている場合は、このエラーを取得するAに依存静的プロパティ/メソッドサービスのB及びサービスB自体がサービスに依存してAトラフ依存性注入を。つまり、プロパティ/メソッドが静的であるためではありませんが、循環依存の一種です。おそらくAOTと組み合わせて発生するバグです。

不足している@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/issues/23958

私にとっては、問題はさらに煩わしく、サービス内でサービスを使用していて、appModuleに依存関係として追加するのを忘れていました！これが誰かがアプリを分解するために数時間節約するのに役立ち、再びそれを再構築することを願っています

@Componentデコレーターまたはコンポーネントが宣言されているモジュールにプロバイダー配列を追加する必要があります。コンポーネント内では、次のように実行できます。

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

私の場合、コンストラクタに間違ったパラメータを渡すとこのエラーが発生します。このエラーの基本的な考え方は、知らないうちに誤った引数を関数に渡したということです。

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 { ... }

エラーのフィードバックがないため、これはデバッグするのが本当に難しい問題です。実際の循環依存関係が心配な場合は、スタックトレースで確認する最も重要なことをここに示します。

AuthServiceのすべてのパラメーターを解決できません：（[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト] 、?）

次に、5番目のパラメーターがAuthServiceにも依存するサービスであることを意味します。つまり、疑問符は、DIによって解決されなかったことを意味します。

そこから、コードを再構築して2つのサービスを分離するだけです。

サービスの名前、つまりコンストラクター（private myService：MyService）を誤って入力すると、このエラーが発生しました。

スペルミスのあるサービスについては、Chrome-> Consoleでページを検査することにより、どのサービスが問題であるか（コンストラクターにいくつかリストしました）を特定できました。メッセージの一部として、object Object、object Object 、? （またはそのようなもの）。「？」それが問題の原因となっているサービスの位置です。

が、順序バレル内からエクスポートされたクラスが言及されている場合がありますが、次のシナリオでも同じ効果が得られる場合があります。

あなたはクラスを持っていると仮定し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) {}
}

私の場合、同じコンポーネントファイルからクラスと列挙型をエクスポートしていました。

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のコンストラクターを正しく呼び出したものです。

ゲッチャ！

上記の回答のいずれも役に立たなかった場合は、コンポーネントがサービスを注入している同じファイルからいくつかの要素をインポートしている可能性があります。

私はよりよく説明します：

これはサービスファイルです。

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

..サービスクラスの真上に他の行がない

利点

• モジュールにサービスを追加する必要はありません（「自動検出」されます）
• サービスはシングルトンになります（ルートに注入されるため）

[ 角度付きドキュメント ]