angularjs - angular jsの不明なプロバイダー

Question

独自の 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;
    }]);

score 130 · Accepted Answer

あなたのコードは見栄えがよく、実際、サンプルのjsFiddleにコピーして貼り付けると（呼び出し自体は別として）機能します：http://jsfiddle.net/VGaWD/

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

AngularJS と MongoLabを使用する予定がある場合は、$resource と MongoLab に既存のアダプターを使用することをお勧めします: https://github.com/pkozlowski-opensource/angularjs-mongolabここで動作を確認できます: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ 免責事項! 私はこのアダプター (AngularJS の例に基づいて作成されたもの) を維持しているので、ここでは明らかに偏っています。

score 40 · Accepted Answer

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

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

を削除し$scope、ファクトリ定義を次のように変更すると機能しました。

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

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

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

score 32 · Accepted Answer

私はちょうど同様の問題を抱えていました。エラーは質問と同じで、pkozlowski.opensource と Ben G の回答で解決しようとしましたが、どちらも正しい回答であり、良い回答です。

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

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

<html ng-app>

もう少し下に、私はこのようなことをしようとしました:

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

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

最初の「ng-app」のことをすっかり忘れていて、すっかりイライラしてしまいました。たぶん、これはいつか誰かを助けるでしょう...

score 27 · Accepted Answer

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

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

score 18 · Accepted Answer

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

私はモジュールを作成しました

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

次に、同じファイルのもう少し下に:

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

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

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

score 12 · Accepted Answer

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

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

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

元：

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

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

score 8 · Accepted Answer

私が持っていたファクトリ関数を閉じるJSファイルの最後に

});

それ以外の

}());

score 5 · Accepted Answer

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

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

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

score 3 · Accepted Answer

これは現在、Google の「angularjs 不明なプロバイダー」のトップの結果であるため、ここに別の落とし穴があります。Jasmine で単体テストを行うときは、beforeEach()関数に次のステートメントがあることを確認してください。

module('moduleName');

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

score 2 · Accepted Answer

I was forgetting to inject the file that held my services altogether. Remember to do this when initializing your app module:

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

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

        }
    }
]);

「utilFactory」文字列の後の配列の最初の要素として空の「」に注意してください。依存関係がない場合は、次のように削除します。

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

        }
    }
]);

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

プロジェクトを Grunt でコンパイルすると、angular-mocks (ngMockE2E) に関連する「不明なプロバイダー」エラーが発生しました。問題は、angular-mocks を縮小できないことでした。そのため、縮小されたファイルのリストから削除する必要がありました。

score 0 · Accepted Answer

私のシナリオは少しあいまいかもしれませんが、同じエラーが発生する可能性があり、誰かがそれを経験する可能性があります:

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

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

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

score 0 · Accepted Answer

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

rake assets:precompile

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

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

score 0 · Accepted Answer

私の問題は、（大文字で始まる）を使用してYeomanにありました：

yo angular:factory Test

作成されたファイル (大文字なし):

app/scripts/services/test.js

ただし、index.html ファイルが含まれています (大文字):

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

これが誰かに役立つことを願っています。

score 0 · Accepted Answer

私は同じ問題を抱えていました。$('body').attr("ng-app", 'MyApp')ブーストラップの代わりに使用して修正し<body ng-app="MyApp">ました。

やったから

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

アーキテクチャ要件。

score 0 · Accepted Answer

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

それは同時にシンプルで愚かです (私のような初心者にとっては愚かではないかもしれませんが、専門家にとってはそうです)、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 について注意してください。

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

score -2 · Accepted Answer

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

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

関数に 'c' があります!

angularjs - angular jsの不明なプロバイダー

30 に答える 30

Related

Reference