角度js不明なプロバイダー

152

自分のREST APIに合わせてmongolabの例を「カスタマイズ」しようとしています。今、私はこのエラーに遭遇していて、私が何を間違っているのかわかりません：

Error: Unknown provider: ProductProvider <- Product
    at Error (unknown source)
    at http://localhost:3000/js/vendor/angular.min.js:28:395
    at Object.c [as get] (http://localhost:3000/js/vendor/angular.min.js:26:180)
    at http://localhost:3000/js/vendor/angular.min.js:28:476
    at c (http://localhost:3000/js/vendor/angular.min.js:26:180)
    at d (http://localhost:3000/js/vendor/angular.min.js:26:314)

これは私のコントローラーです：

function ProductListCtrl($scope, Product) {
  $scope.products = Product.query();
}

そしてこれはモジュールです：

angular.module('productServices', ['ngResource']).
    factory('Product', ['$resource', function($resource){
      var Product = $resource('/api/products/:id', {  }, {
        update: { method: 'PUT' }
      });

      return Product;
    }]);

angularjs

— ステファン・エルンスト
ソース

このエラーは、angularが製品ファクトリーを認識していないことを示しています。このサービスのJSが最初に参照であることを確認してください。また、モジュールを宣言するときは、依存関係を明示的に定義するようにしてください。ファイルを最小化すると、名前のマングリングが原因でこのエラーも発生するためです。詳細は、この記事を見て::のためのozkary.com/2015/11/...

— ozkary

130

あなたのコードは、よさそうだサンプルjsFiddleにコピー＆ペーストしたときに実際には（離れて通話そのものから）作品：http://jsfiddle.net/VGaWD/

より完全な例を見ずに何が起こっているかを言うのは難しいですが、上記のjsFiddleが役立つことを願っています。私が疑っているのは、「productServices」モジュールでアプリを初期化していないことです。同じエラーが発生します。これは別のjsFiddleで確認できます：http ://jsfiddle.net/a69nX/1/

あなたはAngularJSとMongoLabで動作するように計画している場合はI $リソースとMongoLabのための既存のアダプタを使用することをお勧めし：https://github.com/pkozlowski-opensource/angularjs-mongolab それはあなた、MongoLabでの作業の痛みの多くを容易にしますここで実際にそれを見ることができます：http : //jsfiddle.net/pkozlowski_opensource/DP4Rh/ 免責事項！私はこのアダプター（AngularJSの例に基づいて作成）を維持しているため、明らかにここに偏っています。

— pkozlowski.opensource
ソース

私は同じ問題を抱えていますが、これで問題は解決しませんでした。私は実際にデータを取り戻します...このエラーメッセージを除いて、すべてがうまく機能していると思います。body要素でng-appを使用していませんが、次のようにブートストラップしています：angular.element（document）.ready（function（）{angular.bootstrap（document、['reportServices']）;}）;

— トム

17

こんにちは、これは少し恥ずかしいです。まったく同じ問題があります。しかし、私は2つのjsFiddlesの違いを見つけることができません。正確にどこを見ればよいかについてのヒントは非常にありがたいです。

— schacki 2013年

4

@schacki、フィドルの違いは情報タブにあります。それらの1つは<body ng-app="productServices">とボディがあり、もう1つは<body ng-app="">。

— Vineet Reynolds 2013

そして、情報タブはどこですか？:)

— アレクス

3

情報タブがFiddle Options右側のタブになりました

— Gangstead

40

誤ったパラメーターをファクトリー定義に渡していたため、このエラーが発生しました。私が持っていた：

myModule.factory('myService', function($scope, $http)...

を削除し$scopeてファクトリー定義を次のように変更したときに機能しました：

myModule.factory('myService', function( $http)...

注入する必要がある場合は$scope、以下を使用します。

myModule.factory('myService', function($rootScope, $http)...

— ブレスレベルオペラ
ソース

32

同様の問題が発生しました。エラーは同じ質問でそれを言った、pkozlowski.opensourceとベンGの答えでそれを解決しようとしました。どちらも正しい答えです。

私の問題は実際に同じエラーで異なっていました：

私のHTMLコードでは、このような初期化をしました...

<html ng-app>

少し下に私はこのようなことをやろうとしました：

<div id="cartView" ng-app="myApp" ng-controller="CartCtrl">

私は最初のものを取り除きました...それからそれはうまくいきました...明らかにng-appを2回以上初期化することはできません。けっこうだ。

私は最初の "ng-app"を完全に忘れ、完全にイライラしました。多分これはいつか誰かを助けるつもりです...

— Preexo
ソース

2

同様の問題がありましたが、私の場合、divにng-controllerが指定されていることが、サービスを参照するコントローラーの原因でした。Angularはビューを解析したときにサービスを解決する方法を知りませんでした。

— Hector Correa 2013

25

メインapp.jsに、依存するサービスが含まれていることを確認してください。例えば：

/* App Module */
angular.module('myApp', ['productServices']). 
.....

— BeginnerAngularJs
ソース

1

私が間違っていないのであれば、そのような場合productServicesはモジュールであるべきですので、そのようなモジュールの中に何があるか（サービスかどうか）は関係ありません。

— greenoldman 2016年

17

pkozlowskiの答えは正しいですが、これが他の誰かに起こった場合に備えて、同じモジュールを誤って2回作成した後で同じエラーが発生しました。2番目の定義は1番目のプロバイダーをオーバーライドしていました。

私はモジュールを作成して

angular.module('MyService'...
).factory(...);

その後、同じファイルの少し下に：

angular.module('MyService'...
).value('version','0.1');

これを行う正しい方法は次のとおりです。

angular.module('MyService'...
).factory(...).value('version','0.1');

— ベンG
ソース

11

私の場合、私は新しいプロバイダーを定義しました、例えば、 xyz

angular.module('test')
.provider('xyz', function () {
    ....
});

上記のプロバイダーを設定するときは、Provider文字列を追加して注入する必要があります->に xyzなりxyzProviderます。

例：

angular.module('App', ['test'])
.config(function (xyzProvider) {
     // do something with xyzProvider....
});

上記のプロバイダーを「プロバイダー」文字列なしで注入すると、OPで同様のエラーが発生します。

— マニカンタ
ソース

8

JSファイルの最後で、ファクトリー関数を閉じました

});

の代わりに

}());

— ミロP
ソース

1

私のプロジェクトでは通常使用します})();

— mrOak

5

これでは、追跡に時間がかかりすぎました。ディレクティブ内でコントローラーをミニセーフにしてください。

.directive('my_directive', ['injected_item', function (injected_item){

  return {

    controller: ['DO_IT_HERE_TOO', function(DO_IT_HERE_TOO){

    }]
  }
}

それが役に立てば幸い

— pk1m
ソース

5

ここで自分の経験を追加するために、モジュール構成関数の1つにサービスを注入しようとしました。私が最終的に見つけたドキュメントのこの段落は、それがうまくいかない理由を説明しています：

アプリケーションのブートストラップ中に、Angularがすべてのサービスを作成する前に、すべてのプロバイダーを構成してインスタンス化します。これをアプリケーションライフサイクルの構成フェーズと呼びます。このフェーズでは、まだ作成されていないため、サービスにアクセスできません。

プロバイダーをmodule.config（...）関数に注入できますが、サービスを注入できません。そのため、module.run（...）まで待つか、モジュールに注入できるプロバイダーを公開する必要があります。設定

— スチュワートA
ソース

4

私にとって、このエラーは、角度付きアプリの縮小版を実行したことが原因でした。Angularのドキュメントはこれを回避する方法を提案しています。これは問題を説明する関連する引用です、そしてあなたはここのドキュメント自体で提案された解決策を見つけることができます：

縮小に関する注意事項Angularは、コントローラーのコンストラクター関数への引数の名前からコントローラーの依存関係を推測するため、PhoneListCtrlコントローラーのJavaScriptコードを縮小すると、その関数の引数もすべて縮小され、依存関係インジェクターは行われません。サービスを正しく識別することができる。

— サーシャ
ソース

3

これが現在Googleでの「angularjs unknown provider」のトップの結果なので、ここに別の問題があります。Jasmineでユニットテストを行う場合は、beforeEach()関数に次のステートメントがあることを確認してください。

module('moduleName');

そうしないと、テストで同じエラーが発生します。

— ルーファマティック
ソース

3

このエラーが発生するさらに別のケースとして、サービスが別のjavascriptファイルで定義されている場合は、それを参照してください。はい、私は知っています、新人の間違い。

— ジェイソン
ソース

2

サービスをまとめたファイルを挿入するのを忘れていました。アプリモジュールを初期化するときは、必ずこれを実行してください。

angular.module('myApp', ['myApp.services', ... ]);

— Jorisw
ソース

2

私の場合、次のように無名関数を角度モジュールのラッパーとして使用しました。

(function () {
var app = angular.module('myModule', []);
...
})();

かっこを閉じた後、上記のようにかっこを再度開いて閉じて無名関数を呼び出すのを忘れました。

— エマヌエーレベリーニ
ソース

あなたが4年前に答えたのはわかっていますが、今日は役に立ちました。ありがとう。

— レゴラス

1

私にとっての問題は遅延読み込みでした。コントローラーとサービスの読み込みが遅れたため、ページの読み込み（およびAngularの初期化）では利用できませんでした。私はui-ifタグでこれを行いましたが、それは無関係です。解決策は、ページをロードした状態でサービスをロードすることでした。

— ゴンフィデンチャル
ソース

1

このエラーが表示される可能性のある別のシナリオを次に示します。

Sublime Text 2とAngularプラグインを使用すると、次のようなスタブが生成されます

angular.module('utils', [])
.factory('utilFactory', [''
    function() {
        return {

        }
    }
]);

空の ''が 'utilFactory'文字列の後の配列の最初の要素であることを確認してください。依存関係がない場合は、次のように削除します。

angular.module('utils', [])
.factory('utilFactory', [
    function() {
        return {

        }
    }
]);

— dustin.schultz
ソース

1

この質問はGoogleの上位の結果なので、別の可能なものをリストに追加します。

使用しているモジュールの依存関係注入ラッパーで障害が発生した場合、同じ結果が得られます。たとえば、インターネットからモジュールをコピーして貼り付けると、underscore.jsに依存して、diラッパーで「_」を挿入しようとする場合があります。プロジェクトの依存関係プロバイダーにアンダースコアが存在しない場合、コントローラーがモジュールのファクトリーを参照しようとすると、ブラウザーのコンソールログでファクトリーの「不明なプロバイダー」が取得されます。

— ユーザー1082202
ソース

1

私にとっての問題は、サービスを参照するために作成した新しいjavascriptファイルがいくつかあったにもかかわらず、Chromeが古いバージョンしか認識しなかったことでした。CTRL + F5で修正されました。

— モーティー
ソース

0

Gruntでプロジェクトをコンパイルすると、角度モック（ngMockE2E）に関連する「不明なプロバイダー」エラーが発生しました。問題は、角度モックを縮小できないため、縮小ファイルのリストから削除する必要があったことです。

— さびたフォーサック
ソース

0

このエラーも処理した後、私は自分のケースでこの回答のリストをサポートできます。

それは同時にシンプルで愚かです（私のような初心者にとっては多分愚かではありませんが、エキスパートにとってはそうです）、angular.min.jsへのスクリプト参照は、htmlページのスクリプトリストの最初の参照でなければなりません。

これは機能します：

<script src="Scripts/angular.min.js"></script>
<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>

これは：

<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>
<script src="Scripts/angular.min.js"></script>

angular.min.jsに注意してください。

それが誰にも役立つことを願っています!! :)

— ジョー・ルイス
ソース

0

私の問題は、（大文字）を使用して、ヨーマンでした：

yo angular:factory Test

作成されたファイル（大文字ではない）：

app/scripts/services/test.js

しかし、index.htmlファイルが含まれています（大文字）：

<script src="scripts/services/Test.js"></script>

これが誰かを助けることを願っています。

— コーリー・ロスウェル
ソース

0

さらに別の可能性。

持っていたunknown Provider <- <- nameOfMyService。エラーの原因は次の構文です。

module.factory(['', function() { ... }]);

Angularは''依存関係を探していました。

— ヒューゴウッド
ソース

エラー：[$ injector：unpr]不明なプロバイダー：LoginFactoryProvider <-LoginFactoryこの問題を解決するには、どうすればこの問題を解決できますか

— ninjaXnado

0

私のシナリオは少しあいまいかもしれませんが、同じエラーを引き起こし、誰かがそれを経験するかもしれないので、：

$ controllerサービスを使用して新しいコントローラーをインスタンス化するとき（最初の注入された引数として '$ scope'を期待していました）、新しいコントローラーのローカルスコープを$ controller（）関数の2番目のパラメーターに渡していました。これにより、Angularは存在しない$ scopeサービスを呼び出そうとします（ただし、しばらくの間、実際に '$ scope'サービスをAngularのキャッシュから削除したのではないかと思っていました）。解決策は、ローカルスコープをローカルオブジェクトにラップすることです。

// Bad:
$controller('myController', newScope);

// Good:
$controller('myController, {$scope: newScope});

— ザックセス
ソース

0

上記の答えはどれもうまくいきませんでした。多分私は完全に間違っていましたが、初心者としてはそれを行います。

divリストを作成するためにコントローラを初期化していました：

 <div ng-controller="CategoryController" ng-init="initialize()">

次に、を使用$routeProviderしてURLを同じコントローラーにマップします。ng-initコントローラーを取り外すとすぐに、コントローラーはルートを処理しました。

— jfs.csantos
ソース

0

同じ問題がありました。ブーストラップの$('body').attr("ng-app", 'MyApp')代わりに使用することを修正しました<body ng-app="MyApp">。

私がしたので

angular.element(document).ready(function () {        
    angular.bootstrap(document, [App.Config.Settings.AppName]);
})

アーキテクチャ要件。

— ジョーカーム
ソース

0

Ruby on Railsアプリでは、次のことを行いました。

rake assets:precompile

これは、Angular.jsを縮小して/public/assets/application.jsファイルに含めた「開発」環境で行われました。

/public/assets/*ファイルを削除すると、問題が解決しました。

— ナイジェルシェリダンスミス
ソース

0

今日も同様の問題に直面し、問題は非常に少なかった

 app.directive('removeFriend', function($scope) {
return {
    restrict: 'E',
    templateUrl: 'removeFriend.html',
    controller: function($scope) {
        $scope.removing = false;
        $scope.startRemove = function() {
            $scope.removing = true;
        }
        $scope.cancelRemove = function() {
            $scope.removing = false;
        }
        $scope.removeFriend = function(friend) {
            var idx = $scope.user.friends.indexOf(friend)
            if (idx > -1) {
                $scope.user.friends.splice(idx, 1);
            }
        }
    }
}
});

上記のブロックを確認すると、最初の行で、誤って$ scopeを誤って挿入したことがわかります。問題を解決するために、不要な依存関係を削除しました。

 app.directive('removeFriend', function() {
return {
    restrict: 'E',
    templateUrl: 'removeFriend.html',
    controller: function($scope) {
        $scope.removing = false;
        $scope.startRemove = function() {
            $scope.removing = true;
        }
        $scope.cancelRemove = function() {
            $scope.removing = false;
        }
        $scope.removeFriend = function(friend) {
            var idx = $scope.user.friends.indexOf(friend)
            if (idx > -1) {
                $scope.user.friends.splice(idx, 1);
            }
        }
    }
}
});

— ラケシュバーブレ
ソース

0

新しいファクトリを作成してコンポーネント内で使用した後、このエラーが発生しましたが、そのコンポーネントの仕様を確認していません

（specs）テストファイルでエラーが発生した場合

追加する必要があります beforeEach(module('YouNewServiceModule'));

— バッシャーアルモマーニ
ソース

-1

別の「問題」：$ timeoutを挿入するこのエラーが発生し、配列の値に空白があることに気づくまでに数分かかりました。これは機能しません：

angular.module('myapp',[].
  controller('myCtrl', ['$scope', '$timeout ', 
    function ($scope, $timeout){
      //controller logic
    }
  ]);

他の誰かがこのような愚かなエラーを持っている場合に備えて投稿します。

— ルクス
ソース

-2

私のケースは危険なタイピングでした

myApp.factory('Notify',funtion(){

関数には 'c'があります！

— 上陸した
ソース