"অজানা সরবরাহকারী: এপ্রোভিডার <- একটি" আমি মূল সরবরাহকারীকে কীভাবে খুঁজে পাব?

Question

আমি যখন আমার অ্যাংুলারজেএস অ্যাপ্লিকেশনটির মিনিফায়েড (ইউগ্লিফাইজেএস এর মাধ্যমে) সংস্করণটি লোড করছি তখন কনসোলে আমি নিম্নলিখিত ত্রুটিটি পেয়েছি:

Unknown provider: aProvider <- a

এখন, আমি বুঝতে পারি এটি পরিবর্তনশীল নাম ম্যাংলিংয়ের কারণে। বিহীন সংস্করণটি ঠিক কাজ করে। যাইহোক, আমি পরিবর্তনশীল নাম ম্যাংলিং ব্যবহার করতে চাই না , কারণ এটি আমাদের জেএস আউটপুট ফাইলের আকারকে মারাত্মকভাবে হ্রাস করে।

এই কারণে, আমরা আমাদের বিল্ড প্রক্রিয়ায় এনজিমন ব্যবহার করছি , তবে এটি অতীতে আমাদের ভাল পরিবেশিত করার পরেও এই সমস্যাটি সমাধান করবে বলে মনে হয় না।

সুতরাং, এই সমস্যাটি ডিবাগ করার জন্য, আমি আমাদের uglify গ্রান্ট টাস্কে উত্স মানচিত্র সক্ষম করেছি। তারা শুধু জরিমানা উত্পন্ন হয় এবং Chrome করে সার্ভার থেকে মানচিত্রগুলি লোড করুন। তবুও, আমি এখনও একই অনিচ্ছুক ত্রুটি বার্তাটি পেয়েছি, যদিও আমি এখন এই ধারণাটির মধ্যে ছিলাম যে আমার এখন সরবরাহকারীর আসল নামটি দেখতে পাওয়া উচিত।

আমি এখানে ক্রোমকে কীভাবে উত্স মানচিত্র ব্যবহার করতে পারি তা বলার জন্য এখানে কোন সরবরাহকারীর সমস্যা, বা বিকল্পভাবে আমি কীভাবে অন্য সরবরাহকারীর সন্ধান করতে পারি?

Comments

আপনি প্রতিটি জেএস উত্স ফাইলে স্বতন্ত্র মন্তব্য যুক্ত করার চেষ্টা করতে পারেন (যদি ইতিমধ্যে কেস না হয়), এবং ইউগ্লিফাইজেএস-র সংরক্ষণকারী বিকল্পগুলি ব্যবহার করতে পারেন: যা আপনাকে কোনও ফাইলটিতে ভুল কোড রয়েছে সে সম্পর্কে ধারণা দেয়।

— জেবি নিজত

আপনি কি সাজসজ্জা ব্যবহার করা হবে? আমি খুঁজে পেয়েছি যে আমি যখন অতীতে এটি ব্যবহার করেছি তখন আপনার মতো ত্রুটির ফলস্বরূপ এনজিমন সঠিকভাবে সাজসজ্জাগুলি পুনরায় লিখবেন বলে মনে হয় না।

— dherman

@ জেবিনিজেট: আমি ধারণাটি পছন্দ করি তবে বিকল্পগুলির সাথে সেই নির্দেশিকা যুক্ত করার ফলে কোনও প্রভাব পড়ে না বলে মনে হয়।

— ডের হচস্টাপলার

@ থেরম্যান: আপনি কি আমাকে সাজসজ্জার উদাহরণ দিতে পারেন? আমি নিশ্চিত নই যে তারা এই প্রসঙ্গে কী হবে।

— ডের হচস্টাপলার

Github.com/gruntjs/grunt-contrib-uglify দেখুন (যদি আপনি গ্রান্ট ব্যবহার করেন)। বিকল্পটির মান "সমস্ত" হওয়া উচিত।

— জেবি নিজত

Answer 1

আমি এখনও আমাদের উত্স কোডে এই সমস্যাটি সৃষ্টি করে এমন জায়গাটি কীভাবে খুঁজে পেলাম তা জানতে আমি এখনও আগ্রহী, তবে আমি তখন থেকেই সমস্যাটি ম্যানুয়ালি খুঁজে পেতে সক্ষম হয়েছি।

.controller()অ্যাপ্লিকেশন মডিউলে কোনও কল ব্যবহার না করে বৈশ্বিক স্কোপে একটি কন্ট্রোলার ফাংশন ঘোষণা করা হয়েছিল ।

সুতরাং এরকম কিছু ছিল:

function SomeController( $scope, i18n ) { /* ... */ }

এটি AngularJS এর ​​জন্য ঠিক কাজ করে তবে এটিকে ম্যাংলিংয়ের সাথে সঠিকভাবে কাজ করতে আমাকে এটিকে পরিবর্তন করতে হয়েছিল:

var applicationModule = angular.module( "example" );
function SomeController( $scope, i18n ) { /* ... */ }
applicationModule.controller( "SomeController", [ "$scope", "i18n", SomeController ] );

আরও পরীক্ষার পরে, আমি প্রকৃতপক্ষে আরও নিয়ন্ত্রণকারীদের উদাহরণ পেয়েছি যা সমস্যার কারণও ছিল। আমি নিজেই সেগুলির সকলের উত্স খুঁজে পেয়েছি :

প্রথমত, আমি uglif বিকল্পগুলিতে আউটপুট বিউটিফিকেশন সক্ষম করা বরং এটি গুরুত্বপূর্ণ মনে করি। আমাদের ভয়াবহ কাজের জন্য যার অর্থ:

options : {
    beautify : true,
    mangle   : true
}

এর পরে আমি ক্রোমে প্রোজেক্ট ওয়েবসাইটটি খুললাম, সাথে দেবটুলগুলি খোলা ছিল। নীচের মত একটি ত্রুটি ফলে যা লগ করা হচ্ছে:

আমাদের আগ্রহী কল কলটির পদ্ধতিটি হ'ল আমি একটি তীর দ্বারা চিহ্নিত করেছি। এই providerInjectorভিতরেinjector.js । আপনি একটি ব্রেকপয়েন্ট স্থাপন করতে চান যেখানে এটি একটি ব্যতিক্রম ছুঁড়েছে:

আপনি যখন এখন অ্যাপ্লিকেশনটি আবার চালাবেন, ব্রেকপয়েন্টটি হিট হবে এবং আপনি কল স্ট্যাকটি লাফিয়ে উঠতে পারবেন। "ভুল ইনজেকশন টোকেন" স্ট্রিং থেকে সনাক্তযোগ্য, invokeভিতরেinjector.js থেকে একটি কল আসবে :

localsপ্যারামিটার (থেকে mangled dআমার কোড মধ্যে) একটি প্রশংসনীয় ভাল ধারণা আপনার সোর্স যা বস্তুর সম্পর্কে সমস্যা দেয়:

grepআমাদের উত্সের তাত্ক্ষণিকতার অনেক উদাহরণ খুঁজে পাওয়া যায় modalInstance, তবে সেখান থেকে গিয়ে উত্সটিতে এই স্পটটি পাওয়া সহজ ছিল:

var ModalCreateEditMeetingController = function( $scope, $modalInstance ) {
};

যা অবশ্যই এতে পরিবর্তন করতে হবে:

var ModalCreateEditMeetingController = [ "$scope", "$modalInstance", function( $scope, $modalInstance ) {
} ];

যদি ভেরিয়েবল দরকারী তথ্য না ধরে, আপনি স্ট্যাকটি আরও উপরে লাফিয়ে যেতে পারেন এবং আপনার একটি কল আঘাত করতে হবে invokeযাতে অতিরিক্ত ইঙ্গিত থাকতে হবে:

এটি আবার হতে আটকাবেন

এখন যেহেতু আপনি আশাবাদী সমস্যাটি পেয়ে গেছেন, আমি মনে করি ভবিষ্যতে আবার কীভাবে এড়াতে হবে তা থেকে কীভাবে সর্বোত্তমভাবে এড়ানো যায় সে সম্পর্কে আমার উল্লেখ করা উচিত।

স্পষ্টতই, আপনি কেবল ইনলাইন অ্যারে টীকাটি যে কোনও জায়গায় ব্যবহার করতে পারেন , বা (আপনার পছন্দের উপর নির্ভর করে) $injectসম্পত্তি টীকা এবং ভবিষ্যতে এটি ভুলে যাওয়ার চেষ্টা করবেন না। যদি আপনি এটি করেন, তবে তাড়াতাড়ি এর মতো ত্রুটিগুলি ধরার জন্য, কঠোর নির্ভরতা ইনজেকশন মোড সক্ষম করার বিষয়টি নিশ্চিত করুন ।

সতর্ক থেকো! আপনি যদি কৌণিক বাটারং ব্যবহার করছেন তবে স্ট্রাইকডিডি আপনার পক্ষে কাজ করবে না, কারণ কৌণিক বাটারং আপনার মধ্যে অননোটবিহীন কোডটি ইনজেক্ট করে (খারাপ বাটারং!)।

অথবা আপনি এনজি-টিকাটি এটিকে যত্ন নিতে দিতে পারেন। আমি অত্যন্ত তা করার পরামর্শ দিচ্ছি, কারণ এটি এই ক্ষেত্রের ভুলগুলির অনেক সম্ভাবনা সরিয়ে দেয়, যেমন:

• ডিআই টীকা অনুপস্থিত
• ডিআই টীকা অসম্পূর্ণ
• ভুল ক্রমে ডিআই টীকা

টীকাগুলি আপ টু ডেট রাখার জন্য পাছায় কেবল ব্যথা হয় এবং এটি স্বয়ংক্রিয়ভাবে করা গেলে আপনার এটি করা উচিত নয়। এনজি-এনোটেট ঠিক তাই করে।

এটি আপনার বিল্ড প্রক্রিয়ায় গ্রান্ট-এনজি-এনেটেট এবং গল্প-এনজি-এনেটেটের সাথে সুন্দরভাবে সংহত করা উচিত ।

Comments

এটি যত্ন সহ লেখা একটি দুর্দান্ত রচনা আপ। আমি কেবল এই ইস্যুতে দৌড়েছি, মনে হচ্ছে কোথাও কোথাও এনজিমন এর গভীর সমস্যা। আপনার টিপস আমাকে কোথায় দেখতে হবে তা জানতে সহায়তা করেছে। শেষ পর্যন্ত আমি আমার সমস্ত কৌণিক প্যারামগুলি কেবল "অ্যারে-আইফয়েড" করেছিলাম এবং সমস্যাটি চলে গেল। সমস্ত পূর্ববর্তী বিল্ডগুলি এনজি-মিনিফাইড ঠিক জরিমানা, এবং উল্লেখযোগ্য কিছুই পরিবর্তন হয়নি। আমি কোনও গ্লোবাল ফাংশন যোগ করিনি - এটি কেবল নিয়ন্ত্রক / নির্দেশিকা / পরিষেবা / ফিল্টারটি ম্যাঙ্গাল করে রহস্যজনকভাবে কাজ করা বন্ধ করে দিয়েছে?

— জেনোকন

এটি ছিল একটি দুর্দান্ত উত্স। আমি জানতাম না যে আপনাকে রাউটার

— রেজোলিউশন

আমার ক্ষেত্রে এটি পরিচালনাতে নিয়ন্ত্রক ছিল। যদি 'ডি' ভেরিয়েবলের মধ্যে আপনি $ অ্যাটর দেখতে পাবেন তবে সম্ভবত এটি একই সমস্যা। অভ্যন্তরীণ নির্দেশিকা নিয়ামকের জন্য আপনার অ্যারে বন্ধনীগুলিতে প্যারামগুলি আবৃত করা উচিত। নিয়ামক: ["$ সুযোগ", ফাংশন ($ সুযোগ) {...}] নিয়ন্ত্রকের পরিবর্তে: ফাংশন ($ সুযোগ) {...}

— অ্যালেক্স নুমভ

Var ফাংশন রেফারেন্সের জন্য নিরাপদ নির্ভরতা ইনজেকশন / অ্যারে স্বরলিপি ব্যবহার করে আপনার লেখার আপ এবং সমাধানের জন্য আপনাকে অনেক ধন্যবাদ। আমারও এই ত্রুটি ছিল এবং আপনার সমাধানের কারণে আমি সামনের দিকে এগিয়ে যেতে সক্ষম হয়েছি। তুমি!

— ফ্রেঞ্চি লসকাভিও

আমার যখনই এই সমস্যাটি রয়েছে তখনই আমি এটি আবার পড়েছি এবং এটির জন্য আবারও ভোট দিতে চাই। বিটিডব্লিউ, এখানে কীভাবে uglify({ output : { beautify : true }})

— গাল্প

Answer 2

অলিভার সালজবার্গের লেখা আপ চমত্কার ছিল। উত্সাহিত।

এই ত্রুটি থাকতে পারে এমন কারও জন্য টিপস। আমার নির্দেশ কেবল নিয়ামক নিয়ামকের জন্য একটি অ্যারে পাস করতে ভুলে যাওয়ার কারণে ঘটেছিল:

খারাপ

return {
    restrict: "E",
    scope: {                
    },
    controller: ExampleDirectiveController,
    templateUrl: "template/url/here.html"
};

ভাল

return {
    restrict: "E",
    scope: {                
    },
    controller: ["$scope", ExampleDirectiveController],
    templateUrl: "template/url/here.html"
};

Comments

এটি এমন চটকদার ছিল ... সাম্প্রতিক আপডেট হওয়া পর্যন্ত উগলিফাই আমার জন্য এটি ঘটায় নি!

— স্যামমরওরড্রমস

আমার ইস্যুটি একই ছিল, তবে এটি /* @ngInject */ফাংশনের আগে আমার কী যুক্ত করতে হবে তা সক্রিয় হয়ে গেছে । প্রতিটি অন্তর্ভুক্ত মডিউল (আমি ইয়োমন ব্যবহার করছি) টাইপ না করে জটিল ইঞ্জেকশন অংশটি করা মনে হচ্ছে

— নিকোলাস ব্লাসজেন

Answer 3

এনজি-অ্যাপ্লিকেশন সহ এনজি-কড়া-ডি ব্যবহার করুন

আপনি যদি কৌনিক 1.3 ব্যবহার করে থাকেন তবে আপনি এনজিপিআরটির সাথে এনজিস্ট্রিটডি ডাইরেক্টিভটি ব্যবহার করে নিজেকে আঘাতের একটি বিশ্ব বাঁচাতে পারেন :

<html lang="en" ng-app="myUglifiablyGreatApp" ng-strict-di>

এখন - প্রাক-মিনিফিকেশন - যে কোনও কিছু যা টীকাগুলি ব্যবহার করে না তা আপনার কনসোলটি ফুটিয়ে তুলবে এবং আপনি ম্যাংলেড স্ট্যাকের চিহ্নগুলির সাহায্যে শিকার না করে ফ্রিগিনের নাম দেখতে পাবেন।

দস্তাবেজগুলি:

অ্যাপ্লিকেশনটি এমন ক্রিয়াকলাপগুলি ব্যাহত করতে ব্যর্থ হবে যা স্পষ্টভাবে ফাংশন টীকাগুলি ব্যবহার করে না (এবং এইভাবে সংক্ষিপ্তকরণের জন্য অনুপযুক্ত)

একটি সতর্কতা , এটি কেবল টীকাগুলি রয়েছে তা সনাক্ত করে , টীকা সম্পূর্ণ নয়।

অর্থ:

['ThingOne', function(ThingA, ThingB) { … }]

থিংবি টি টীকাটির অংশ নয় তা ধরবে না।

এই টিপটির ক্রেডিট এনজি- এনোটেট ভাওয়াদের কাছে যায় , যা এখন অবহেলিত এনজিমন এর জন্য সুপারিশ করা হয়।

Comments

এটির জন্য আরও বেশি পরিমাণের প্রয়োজন। এটি এমন কোনও অ্যাপ্লিকেশন ডিবাগ করার জন্য দুর্দান্ত যা কখনও এনজিআইএনজেক্ট বা স্ট্রিং অ্যারের সিনট্যাক্স ব্যবহার করে না।

— মাইকেল পিয়ারসন

Answer 4

কৌণিক ছোট করার জন্য আপনাকে যা করতে হবে তা হল আপনার ঘোষণাকে "অ্যারে" ঘোষণা "মোডে" উদাহরণস্বরূপ পরিবর্তন করুন:

থেকে:

var demoApp= angular.module('demoApp', []);
demoApp.controller(function demoCtrl($scope) {
} );

প্রতি

var demoApp= angular.module('demoApp', []);
demoApp.controller(["$scope",function demoCtrl($scope) {
}]);

কারখানার পরিষেবা কীভাবে ঘোষণা করবেন?

demoApp.factory('demoFactory', ['$q', '$http', function ($q, $http) {
    return {
          //some object
    };
}]);

Comments

আমি জানি. এজন্য আমরা এনজিমন ব্যবহার করি। আমার সন্দেহ হয় যে এটি আমাদের উত্সের কিছু অংশ বা এর নির্ভরতা নিয়ে সমস্যা রয়েছে। যে কারণে আমি এই ইস্যুটির মূলে যাওয়ার চেষ্টা করছি।

— ডের হচস্টাপলার

আমার সুপারিশটি হ'ল আপনি এইভাবে আপনার কোড তৈরি করুন। সুতরাং আপনি যে কোনও

— মিনিফায়ার

আমি এইভাবে আমাদের কোড তৈরি করছি । তবে আমাদের বাহ্যিক নির্ভরতা রয়েছে যা নেই। ngmin অতীতে আমাদের জন্য এই সমস্যাটি ভালভাবে সমাধান করেছে। আমি ধরে নিলাম সাম্প্রতিক পরিবর্তনটি এই সমস্যাটি তৈরি করেছে। আমি এখন এই সমস্যার উত্সটি খুঁজতে চাই যাতে আমি এটি সঠিকভাবে আমাদের কোড, আমাদের নির্ভরতা বা সম্ভবত এনজিমন নিজেই ঠিক করতে পারি।

— ডের হচস্টাপলার

যেহেতু সমস্যাটি কোনও নির্দিষ্ট উপাদান বা কোডের কাছে খুব নির্দিষ্ট বলে মনে হচ্ছে দিক নির্দেশনা প্রদান করা কঠিন, অন্তত আমার শেষ থেকে

— ডালোরজো

এনজিমন আপনার অ্যারে ডিক্লেয়ারেশন মোড ব্যবহার করার প্রয়োজন হয় না, এটি প্রচুর অকেজো ঘোষণার যোগ করে।

— Nanocom

Answer 5

আমি ঠিক একই সমস্যাটি পেয়েছি এবং আমার গ্রান্ট বিল্ড টাস্কের জন্য এনজি-এনোটেট দিয়ে কেবল এনজিমন (এখন অবহেলিত) প্রতিস্থাপনের মাধ্যমে সমাধান করেছি।

দেখে মনে হচ্ছে যে এই প্রতিশ্রুতি হিসাবে এনজিও টীকাটি ব্যবহার করার জন্য ইয়েমেন কৌণিকটিও আপডেট করা হয়েছে: https://github.com/yeoman/generator-angular/commit/3eea4cbeb010eeaaf797c17604b4a3ab5371eccb

তবে আপনি যদি আমার মতো ইওমোন কৌনিকটির কোনও পুরানো সংস্করণ ব্যবহার করছেন তবে আপনার প্যাকেজ.জেসনে এনজি-এনোটেটের সাথে এনজি-মিনিট প্রতিস্থাপন করুন:

-    "grunt-ngmin": "^0.0.3",
+    "grunt-ng-annotate": "^0.3.0",

চালান npm install(তারপরে optionচ্ছিকভাবে npm prune), এবং সম্পাদনার প্রতিশ্রুতি পরিবর্তনগুলি অনুসরণ করুন Gruntfile.js।

Answer 6

আসল ভেরিয়েবলের নামটি কী তা জানতে আপনি কীভাবে অরগ্লিফ করে চলকগুলি পরিবর্তন করতে পারেন:

../ নোড_মডিউলস / গ্রান্ট- কন্ট্রিবিউ -ইগ্লিফাই / নোড_মডিউলসুগলিফাই-js/lib/scope.js

SymbolDef.prototype = {
  unmangleable: [...],
  mangle: function(options) {
    [...]
    this.mangled_name = s.next_mangled(options, this)+"_orig_"+this.orig[0].name;
    [...]
  }
};

এবং এখন ত্রুটিটি আরও স্পষ্ট

Error: [$injector:unpr] Unknown provider: a_orig_$stateProvider
http://errors.angularjs.org/1.3.7/$injector/unpr?p0=a_orig_%24stateProvider
at eval (eval at <anonymous> (http://example.com/:64:17), <anonymous>:3155:20)

সম্পাদনা

এখন খুব স্পষ্ট ...

গ্রান্টফিল.জেএস

uglify: {
  example: {
    options: {
      beautify: true,
      mangle: true
    },
    [...]
  },
  [...]
}

../ নোড_মডিউলস / গ্রান্ট- কন্ট্রিবিউ -ইগ্লিফাই / নোড_মডিউলসুগলিফাই-js/lib/scope.js

var numberOfVariables = 1;
SymbolDef.prototype = {
  unmangleable: [...],
  mangle: function(options) {
    [...]
    this.mangled_name = s.next_mangled(options, this)+"_orig_"+this.orig[0].name+"_"+numberOfVariables++;
    [...]
  }
};

এখন প্রতিটি ভেরিয়েবলটি একটি অনন্য মানেরতে মঙ্গল করা হয় যা মূলটিও অন্তর্ভুক্ত করে থাকে ... কেবলমাত্র সংশোধিত জাভাস্ক্রিপ্টটি খুলুন এবং "a_orig_ $ statePovider_91212" বা যা কিছু অনুসন্ধান করুন ... আপনি এটির মূল প্রসঙ্গে এটি দেখতে পাবেন ...

এর চেয়ে সহজ আর কিছু হতে পারে না ...

Answer 7

এছাড়াও resolveরুটের সম্পত্তি ভুলে যাবেন না । এটি অবশ্যই অ্যারে হিসাবে সংজ্ঞায়িত করা উচিত:

$routeProvider.when('/foo', {
    resolve: {
        bar: ['myService1', function(myService1) {
            return myService1.getThis();
        }],
        baz: ['myService2', function(myService2) {
            return myService2.getThat();
        }]
    }
});

Comments

আমার রুটগুলিতে সমাধানের একগুচ্ছ যুক্ত করার পরে আমার সাথে এটি ঘটেছিল। ধন্যবাদ আপনি আমাকে বেদনাদায়ক ডিবাগিংয়ের কয়েক ঘন্টা বাঁচিয়েছেন, ধন্যবাদ।

— পল ম্যাকক্লিয়ান

Answer 8

জেনারেটর-গাল্প-কৌণিক সহ:

   /** @ngInject */
    function SomeController($scope, myCoolService) {

}

প্রতিটি কন্ট্রোলার, পরিষেবা, নির্দেশনার আগে / ** @ngInject * / লিখুন ।

Answer 9

এটির জন্য দ্রুত এবং নোংরা ফিক্স যদি আপনার চক্রের নামগুলি মঙ্গল / সংক্ষিপ্ত করতে প্রয়োজন হয় না তবে আপনার গ্রাঞ্জফাইলে ম্যাঙ্গেল = মিথ্যা সেট করা হয় is

    uglify: {
        compile: {
            options: {
                mangle   : false,
                ...
            },
        }
    }

Comments

এটি সমস্যার সমাধান করতে পারে তবে ম্যাংলে অক্ষম থাকায় ফলস্বরূপ বিল্ড আকারটি আরও বড় হবে।

— নোটবোট

এখনও মোটেও uglifing না চেয়ে ছোট

— mjwrazor