Angular $インジェクター:理由unpr不明なプロバイダーの問題概要



Angular Injector Reason Unpr Unknown Provider Issues Summary



不明なプロバイダー:tProvider<- t Angular 1.xユーザーの多くにとって、ユーザーはどこに理由があるのか​​わからないため、非常に面倒なことです。

この記事では、これまで考えられるすべての問題の原因を要約しています。この問題が発生したことを願っています。慌てる必要はありません。次の内容の調査を段階的に実行します。



問題の説明:

不明なプロバイダー 一般に、依存関係のため、注入の結果として解決することはできません。これらのタイプが一般的に次の可能性を持っている理由:



1.依存関係が定義されていません

angular.module('myApp', []) .controller('MyController', ['myService', function (myService) { // Do something with myService }])

上記のコードは、myServiceに依存する前に定義されていないため、[$ injector:unpr]不明なプロバイダーが指定されています。依存関係の定義がない場合は、最初にこの依存関係を事前に定義する必要があります。

angular.module('myApp', []) .service('myService', function () { /* ... */ }) .controller('MyController', ['myService', function (myService) { // Do something with myService }])

2.angular.moduleを再利用します

angular.module('myModule', []) .service('myCoolService', function () { /* ... */ }) angular.module('myModule', []) // myModule has already been created! This is not what you want! .directive('myDirective', ['myCoolService', function (myCoolService) { // This directive definition throws unknown provider, because myCoolService // has been destroyed. }])

上記のコード、angular.module( 'myModule'、[])を再利用すると、このモジュールの角度myModuleが再定義され、エラーが発生します。 angle.module( 'myModule'、[])この構文も一般的に定義されたモジュールです。この問題を回避するには、angular.module( 'myModule')を直接使用するか、変数の代わりに使用されるモジュールを定義した後に使用します。

angular.module('myModule', []) .service('myCoolService', function () { /* ... */ }) angular.module('myModule') .directive('myDirective', ['myCoolService', function (myCoolService) { // This directive definition does not throw unknown provider. }]) or var app = angular.module('myModule', []) app.service('myCoolService', function () { /* ... */ }) app.directive('myDirective', ['myCoolService', function (myCoolService) { // This directive definition does not throw unknown provider. }])

3.コントローラーとしての別のコントローラーへの依存性注入

angular.module('myModule', []) .controller('MyFirstController', function() { /* ... */ }) .controller('MySecondController', ['MyFirstController', function(MyFirstController) { // This controller throws an unknown provider error because // MyFirstController cannot be injected. }])

実際、コントローラーをインスタンス化する場合は、$コントローラーサービスを使用できます(フォローアップブログが更新されます)



4.アセンブリ$スコープがコントローラーまたはディレクティブに挿入されない

angular.module('myModule', []) .service('MyController', ['$scope', function($scope) { // This controller throws an unknown provider error because // a scope object cannot be injected into a service. }])

これが発生し、調査も非常に優れています。依存関係として$スコープを挿入するコントローラーとディレクティブのみを念頭に置いてください。

5.角度のあるコンパクトを使用するとエラーが発生します

使える ngStrictDi

まあ、これがあなたに役立つことを願っています、パニックに陥ったこの問題に遭遇しないでください!