কৌনিক 2, 4, 5, 6 এ প্লাগইন আর্কিটেকচার / প্লাগইন সিস্টেম / প্লাগেবল কাঠামো কার্যকর করা হচ্ছে

Question

5/24/2018 আপডেট করুন: আমরা এখন আমার মূল পোস্ট থেকে কৌণিক সংস্করণের +3 সংস্করণ এবং এখনও একটি চূড়ান্ত কার্যক্ষম সমাধান নেই। লার্স মেইজডাম (@ লার্সমিজডাম) একটি আকর্ষণীয় পদ্ধতির সাথে উপস্থিত হয়েছে যা অবশ্যই দেখার জন্য মূল্যবান। (মালিকানা সংক্রান্ত সমস্যার কারণে, তাকে অস্থায়ীভাবে গিটহাবের সংগ্রহশালাটি সরিয়ে ফেলতে হয়েছিল যেখানে তিনি তার নমুনাটি মূলত পোস্ট করেছিলেন However তবে, আপনি যদি একটি অনুলিপি চান তবে আপনি সরাসরি তাকে বার্তা দিতে পারেন। আরও তথ্যের জন্য নীচের মন্তব্যগুলি দেখুন see)

অ্যাঙ্গুলার 6 এ সাম্প্রতিক স্থাপত্যগুলি পরিবর্তনগুলি আমাদের একটি সমাধানের আরও কাছে নিয়ে আসে। অতিরিক্তভাবে, কৌণিক উপাদানসমূহ ( https://angular.io/guide/eferences ) কিছু উপাদান কার্যকারিতা সরবরাহ করে - যদিও আমি এই পোস্টে মূলত বর্ণনা করেছি তা পুরোপুরি নয়।

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

---

আমি একটি প্লাগেবল (প্লাগ-ইন) একটি ইন ফ্রেমওয়ার্ক বাস্তবায়ন চাই Angular 2, Angular 4, Angular 5, অথবা Angular 6আবেদন।

(এই প্লাগেবল ফ্রেমওয়ার্কটি বিকাশের জন্য আমার নির্দিষ্ট ব্যবহারের ক্ষেত্রে হ'ল আমাকে একটি ক্ষুদ্র বিষয়বস্তু পরিচালনার সিস্টেম বিকাশ করতে হবে a বেশ কয়েকটি কারণে এখানে প্রয়োজনীয়ভাবে বিশদভাবে Angular 2/4/5/6বর্ণনা করা হয়নি that সিস্টেমটির বেশিরভাগ প্রয়োজনের জন্য এটিই একটি নিখুঁত উপযুক্ত fit

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

(" অ্যাপ্লিকেশনটির সোর্স কোড বা অভ্যন্তরীণ কার্যক্রমে সরাসরি অ্যাক্সেস বা জ্ঞান না থাকা " সম্পর্কে এই বাক্যটি একটি মূল উদ্দেশ্য))

প্লাগযোগ্য ফ্রেমওয়ার্কগুলির উদাহরণগুলির মধ্যে WordPressবা যেমন সাধারণ সামগ্রী সামগ্রী ব্যবস্থা অন্তর্ভুক্ত Drupal।

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

আমি বর্তমানে নিম্নলিখিত পাঁচটি প্রশ্নের উত্তর ( আপনার সহায়তায় ) নির্ধারণ করার চেষ্টা করছি ।

1. ব্যবহারিকতা: একটি Angular 2/4/5/6অ্যাপ্লিকেশন জন্য একটি প্লাগইন কাঠামো এমনকি ব্যবহারিক? (এখন অবধি, এর সাথে সত্যিকারের প্লাগযোগ্য কাঠামো তৈরি করার কোনও ব্যবহারিক উপায় আমি পাইনি have Angular2/4/5/6)
2. প্রত্যাশিত চ্যালেঞ্জগুলি: একটি Angular 2/4/5/6অ্যাপ্লিকেশনটির জন্য প্লাগইন কাঠামো বাস্তবায়নে কোন কোন চ্যালেঞ্জের মুখোমুখি হতে পারে ?
3. বাস্তবায়ন কৌশল: কোন Angular 2/4/5/6অ্যাপ্লিকেশনটির জন্য প্লাগইন কাঠামো বাস্তবায়নের জন্য কোন নির্দিষ্ট কৌশল বা কৌশল ব্যবহার করা যেতে পারে ?
4. সেরা অনুশীলন: একটি Angular 2/4/5/6অ্যাপ্লিকেশন জন্য একটি প্লাগইন সিস্টেম বাস্তবায়নের জন্য সেরা অনুশীলন কি ?
5. বিকল্প প্রযুক্তি: যদি একটি প্লাগইন ফ্রেমওয়ার্ক হয় না একটি ব্যবহারিক Angular 2/4/5/6প্রয়োগ, কি অপেক্ষাকৃত সমতুল্য প্রযুক্তির (যেমন React) একটি জন্য উপযুক্ত হতে পারে আধুনিক অত্যন্ত প্রতিক্রিয়াশীল ওয়েব অ্যাপ্লিকেশন ?

সাধারণভাবে, এর ব্যবহার Angular 2/4/5/6খুব পছন্দসই কারণ:

• এটি স্বাভাবিকভাবেই অত্যন্ত দ্রুত - স্পষ্টভাবে তাই।
• এটি খুব অল্প ব্যান্ডউইথ খরচ করে (প্রাথমিক লোডের পরে)
• এটির তুলনামূলকভাবে ছোট পায়ের ছাপ রয়েছে (পরে AOTএবং tree shaking) - এবং সেই পদক্ষেপটি সঙ্কুচিত অবিরত
• এটি অত্যন্ত কার্যকরী, এবং কৌণিক দল এবং সম্প্রদায় তার বাস্তুতন্ত্রের দ্রুত বর্ধন অব্যাহত রেখেছে
• এটা যেমন সেরা এবং সর্বশেষ ওয়েব টেকনোলজি অনেক সঙ্গে ভাল খেলে TypeScriptএবংObservables
• কৌণিক 5 এখন পরিষেবা কর্মীদের সমর্থন করে ( https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7 )
• সমর্থিত হওয়ার পরে Googleএটি সম্ভবত সমর্থিত হবে এবং ভবিষ্যতেও উন্নত হবে

আমি Angular 2/4/5/6আমার বর্তমান প্রকল্পের জন্য ব্যবহার করতে চাই । যদি আমি ব্যবহার করতে সক্ষম হয় তবে আমিও Angular 2/4/5/6ব্যবহার করব Angular-CLIএবং সম্ভবত Angular Universal(সার্ভার-সাইড রেন্ডারিংয়ের জন্য))

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

• Angular 2/4/5/6অ্যাপ্লিকেশনগুলি প্যাকেজগুলি গ্রাস করে - তবে এটি কোনও অ্যাপ্লিকেশনের মধ্যে প্লাগইনগুলিকে অনুমতি দেওয়ার মতো নয়। অন্যান্য সিস্টেমে (যেমন Drupal) একটি প্লাগইন মূলত প্লাগইন ফোল্ডারটি একটি সাধারণ মডিউল ডিরেক্টরিতে রেখে যেখানে এটি স্বয়ংক্রিয়ভাবে সিস্টেমের দ্বারা "বাছাই করা হয়" যুক্ত করা যায়। ইন Angular 2/4/5/6, একটি প্যাকেজ (প্লাগইন হিসাবে হতে পারে) সাধারণত এর মাধ্যমে ইনস্টল করা হয় npm, এতে যুক্ত করা হয় package.jsonএবং তারপরে ম্যানুয়ালি অ্যাপ্লিকেশনটিতে আমদানি করা হয় - যেমন app.module। এটি Drupalকোনও ফোল্ডার ফেলে দেওয়ার পদ্ধতি এবং সিস্টেমটি স্বয়ংক্রিয়ভাবে প্যাকেজটি সনাক্ত করার পদ্ধতির চেয়ে অনেক জটিল । একটি প্লাগইন ইনস্টল করা যত জটিল হয়, লোকেদের সেগুলি ব্যবহার করার সম্ভাবনা তত কম। এটির জন্য যদি কোনও উপায় থাকে তবে এটি আরও ভালAngular 2/4/5/6প্লাগইনগুলি স্বয়ংক্রিয়ভাবে সনাক্ত এবং ইনস্টল করতে। আমি এমন একটি পদ্ধতি খুঁজে পেতে আগ্রহী যেটি অ-বিকাশকারীদের Angular 2/4/5/6অ্যাপ্লিকেশনটির সমস্ত আর্কিটেকচার বুঝতে না পেরে অ্যাপ্লিকেশনটি ইনস্টল করতে এবং কোনও নির্বাচিত প্লাগইন ইনস্টল করতে দেয়।

• সাধারণত, প্লাগেবল আর্কিটেকচার সরবরাহের অন্যতম সুবিধা হ'ল তৃতীয় পক্ষ বিকাশকারীদের পক্ষে সিস্টেমটির কার্যকারিতা বাড়ানো খুব সহজ। স্পষ্টতই, এই বিকাশকারীরা যে অ্যাপ্লিকেশনটিতে প্লাগ ইন করছে তার কোডের সমস্ত জটিলতার সাথে তাদের পরিচিত হবে না। প্লাগইনগুলি বিকাশ হওয়ার পরে, অন্যান্য এমনকি কম প্রযুক্তিগত ব্যবহারকারীরা কেবল অ্যাপ্লিকেশন এবং কোনও নির্বাচিত প্লাগইন ইনস্টল করতে পারেন। তবে Angular 2/4/5/6এটি তুলনামূলকভাবে জটিল এবং এর একটি দীর্ঘতর লার্নিং বক্ররেখা রয়েছে। আরও জটিল জিনিস, সবচেয়ে প্রকাশনা Angular 2/4/5/6অ্যাপ্লিকেশন এছাড়াও ব্যবহার করা Angular-CLI, Angular Universalএবং WebPack। যে কেউ একটি প্লাগইন বাস্তবায়ন করছে তার সম্ভবত একটি দৃ strong় কার্যকরী জ্ঞানের পাশাপাশি এই সমস্তগুলি কীভাবে ফিট হয় তার কমপক্ষে কিছু প্রাথমিক জ্ঞান থাকতে হবেTypeScriptএবং একটি যুক্তিসঙ্গত পরিচয় NodeJS। জ্ঞানের প্রয়োজনীয়তাগুলি কি এত চরম যে কোনও তৃতীয় পক্ষ কোনও প্লাগইন বিকাশ করতে চায় না?

• বেশিরভাগ প্লাগইনগুলিতে সম্ভবত কিছু সার্ভার সাইড উপাদান (যেমন প্লাগইন সম্পর্কিত ডেটা সংরক্ষণ / পুনরুদ্ধারের জন্য) পাশাপাশি কিছু ক্লায়েন্ট-সাইড আউটপুট থাকবে। Angular 2/4/5বিশেষত (এবং দৃ strongly়ভাবে) বিকাশকারীদের রানটাইমের সময় তাদের নিজস্ব টেম্পলেটগুলি ইনজেকশন দেওয়া থেকে নিরুৎসাহিত করে - কারণ এটি মারাত্মক সুরক্ষা ঝুঁকিপূর্ণ। একটি প্লাগইন সামঞ্জস্য করতে পারে এমন অনেক ধরণের আউটপুট পরিচালনা করার জন্য (উদাহরণস্বরূপ কোনও গ্রাফের প্রদর্শন), এটি প্রদর্শিত হয় যে ব্যবহারকারীদের এমন একটি সামগ্রী তৈরি করতে দেয় যা প্রতিক্রিয়া প্রবাহে ইনজেক্ট করা হয়, এক ফর্মের মধ্যে অন্যটি সম্ভবত প্রয়োজনীয়। আমি আশ্চর্যরূপে Angular 2/4/5/6সুরক্ষার ব্যবস্থা না করে কীভাবে এই প্রয়োজনটিকে সামঞ্জস্য করা সম্ভব wonder

• বেশিরভাগ উত্পাদন Angular 2/4/5/6অ্যাপ্লিকেশনগুলি Ahead of Time( AOT) সংকলন ব্যবহার করে প্রাক-সংকলিত । (সম্ভবত সব কিছু হওয়া উচিত)) প্রাক-সংকলিত অ্যাপ্লিকেশনগুলিতে প্লাগইনগুলি কীভাবে যুক্ত করা যায় (বা এর সাথে সংহত করা হয়) সে সম্পর্কে আমি অনিশ্চিত। সেরা দৃশ্যে মূল অ্যাপ্লিকেশন থেকে পৃথকভাবে প্লাগইনগুলি সংকলন করা জড়িত। তবে এই কাজটি কীভাবে করা যায় তা নিয়ে আমি অনিশ্চিত। একটি ফ্যালব্যাকটি কোনও অন্তর্ভুক্ত প্লাগইনগুলির সাথে পুরো অ্যাপ্লিকেশনটি পুনরায় সংকলন করা হতে পারে তবে এটি কোনও প্রশাসনিক ব্যবহারকারীর জন্য কিছুটা জটিল করে তোলে যিনি কোনও নির্বাচিত প্লাগইন সহ অ্যাপ্লিকেশনটি (কেবল নিজের সার্ভারে) ইনস্টল করতে চান।

• একটি Angular 2/4/5/6অ্যাপ্লিকেশনটিতে, বিশেষত একটি প্রাক-সংকলিত একটি, একক টুকরোটি ভুল বা বিবাদী কোড পুরো অ্যাপ্লিকেশনটিকে ভেঙে দিতে পারে। Angular 2/4/5/6অ্যাপ্লিকেশনগুলি ডিবাগ করা সর্বদা সহজ নয়। খারাপ আচরণযুক্ত প্লাগইনগুলির প্রয়োগের ফলে খুব অপ্রীতিকর অভিজ্ঞতা আসতে পারে। অসদাচরণযুক্ত প্লাগইনগুলি করপুণভাবে পরিচালনা করার জন্য আমি কোনও প্রক্রিয়া সম্পর্কে অবগত নই।

Comments

আমার বিপরীতে, একটি কৌণিক 2 মডিউল একটি প্লাগইন। @ কৌণিক / রাউটার, @ কৌণিক / রূপগুলি, @ কৌনিক / http, @ কৌনিক / উপাদান, এগুলি কৌনিক থেকে 'প্লাগইন', তারা কীভাবে 'প্লাগইন' তৈরি করে তা আমরা পরীক্ষা করতে পারি।

— টিমাথন

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

— অ্যান্টনি গ্যাটলিন

আপনি কি এই সাথে কোথাও পেয়েছেন? আমি অনুরূপ কিছু চেষ্টা করতে আগ্রহী। কৌণিক 2 যেভাবে তৈরি হচ্ছে (মডিউলগুলির আশেপাশে) আমি ভেবেছিলাম একটি প্লাগইন ধরণের আর্কিটেকচার এটি খুব ভাল ফিট করবে তবে এটি কোনও উদাহরণ ইত্যাদি বলে মনে হয় না

— জো

@ জো, আমার কাছে এখনও এই সমস্যার কোনও ভাল সমাধান নেই। আমি আপনার মত একই চিন্তা।

— অ্যান্থনি গ্যাটলিন 21

আমি গিথুব এ একটি সমাধান দিয়ে একটি সংগ্রহস্থল তৈরি করেছি যা সাহায্য করতে পারে। এটি অ্যাঙ্গুলার 6 লাইব্রেরি এবং 1 বেস অ্যাপ্লিকেশন ব্যবহার করে যা ইউএমডি বান্ডিল গ্রন্থাগারগুলি অলসভাবে লোড করে; github.com/lmeijdam/angular-umd-dynamic-example আপনার যদি কোনও পরামর্শ থাকে তবে দয়া করে সংযোজন করুন!

— লার্স মেইজডাম

Answer 1

আমি গিথুব এ একটি সমাধান দিয়ে একটি সংগ্রহস্থল তৈরি করেছি যা সাহায্য করতে পারে। এটি অ্যাঙ্গুলার 6 লাইব্রেরি এবং 1 বেস অ্যাপ্লিকেশন ব্যবহার করে যা ইউএমডি বান্ডিল গ্রন্থাগারগুলি অলসভাবে লোড করে; https://github.com/lmeijdam/angular-umd-dynamic-example

আপনার যদি কোনও পরামর্শ থাকে তবে দয়া করে বিনা দ্বিধায় যোগ করুন!

Comments

অন্য একটি মন্তব্যে যেমন উল্লেখ করা হয়েছে, কোম্পানির নীতিমালার কারণে আমাকে সংগ্রহস্থলটি বেসরকারী করতে হয়েছিল .. আলোচনা চলমান

— থাকায়

দয়া করে আপনার সমাধানটি দেখতে পছন্দ করবেন।

— সুবহান আহমেদ

@ শুভান, আমি বর্তমানে পুনরায় জিএইচ-তে ফিরিয়ে দেওয়ার আগে ভান্ডারটি পুনরায় লেখায় ব্যস্ত। আমাকে আরও একটু সময় দিন। অন্যথায় আপনি সরাসরি যোগাযোগ করতে পারেন! : ডি

— লার্স মেইজদাম

@ লার্স-মাইজদাম: আমরা এখনও অনেক অপেক্ষা করব: ডি ... আমাকেও খুব আগ্রহী। আপনাকে অগ্রিম ধন্যবাদ

— আগুয়েট

Answer 2

🛠️ গিথুব ডেমো কৌণিক-প্লাগইন-আর্কিটেকচার

হতে পারে আইভী কিছু পরিবর্তন করতে পারে তবে আপাতত আমি সমাধানটি ব্যবহার করি যা কৌণিক সিএলআই কাস্টম বিল্ডার ব্যবহার করে এবং নিম্নলিখিত প্রয়োজনীয়তাগুলি পূরণ করে:

• AOT
• সদৃশ কোড এড়ান (@ কৌণিক / কোর like সাধারণ, ফর্ম, রাউটার}, rxjs, tslib এর মত প্যাকেজ)
• সমস্ত প্লাগইনগুলিতে ভাগ করা লাইব্রেরি ব্যবহার করুন তবে প্রতিটি প্লাগইনে সেই ভাগ করা লাইব্রেরি থেকে উত্পন্ন কারখানাগুলি না পাঠিয়ে দিন বরং লাইব্রেরি কোড এবং কারখানাগুলি পুনরায় ব্যবহার করুন
• কৌনিক সিএলআই আমাদেরকে একই স্তরের অপ্টিমাইজেশান দেয়
• বাহ্যিক মডিউলগুলি আমদানির জন্য আমাদের কেবল একটি জিনিস জানতে হবে: তাদের বান্ডিল ফাইলের পথ
• আমাদের কোডটি মডিউলটি সনাক্ত করতে হবে এবং পৃষ্ঠাটিতে প্লাগইন স্থাপন করবে
• সার্ভার সাইড রেন্ডারিং সমর্থন
• প্রয়োজন হলে লোড মডিউল

ব্যবহারটি যেমন সহজ:

ng build --project plugins --prod --modulePath=./plugin1/plugin1.module#Plugin1Module 
         --pluginName=plugin1 --sharedLibs=shared --outputPath=./src/assets/plugins

আমার নিবন্ধে এই সম্পর্কে আরও:

• অ্যাংুলার সহ এক্সটেনসিবল ডায়নামিক প্লাগেবল এন্টারপ্রাইজ অ্যাপ্লিকেশন বিল্ডিং

Comments

দুর্দান্ত উদাহরণ! একটি প্রশ্ন. আমি কীভাবে OAuthTokenআমাদের মূল অ্যাপ্লিকেশন থেকে লাইব্রেরি পরিষেবাতে রানটাইম পাস করতে পারি ?

— যোগেন দার্জি

@ ইউরজুই যদি আমরা একাধিক কৌণিক অ্যাপ্লিকেশন ব্যবহার করি এবং আমরা আপনার প্লাগইন 1 এবং প্লাগইন 2 এর মতো একটি মডিউল তৈরির পরিবর্তে তাদের সম্পূর্ণ বিতরণটি ব্যবহার করি তবে আমরা একই পন্থাটি ব্যবহার করতে পারি?

— মমিন শাহজাদ

আপনি কি এই উদাহরণটি আবার ঘুরে দেখতে এবং নিকটবর্তী অদূর ভবিষ্যতে আইভির সাথে সামঞ্জস্য করতে সক্ষম হবেন? আপনি যদি চান তবে দয়া করে একটি ভাগ InjectionTokenকরে নেওয়া পরিষেবাদির একটি উদাহরণ যুক্ত করুন এবং ভাগ করা যা অ্যাপমডুলিতে সরবরাহ করা হবে এবং অন্যান্য প্লাগইনগুলিতে ইনজেকশন দেওয়া হবে। ধন্যবাদ!

— Jyrkka

Answer 3

আমি আমার বই " অ্যাঙ্গুলার উইথ অ্যাংুলার " এর জন্য একটি নতুন অধ্যায় প্রকাশ করেছি যা অ্যাংুলার 2+ এ প্লাগইনগুলির বিষয়টিকে সম্বোধন করে এবং বাহ্যিক প্লাগইনগুলি তৈরি করার চেষ্টা করা লোকদের জন্য এটি একটি আগ্রহী হওয়া উচিত।

গুরুত্বপূর্ণ দিক:

• প্লাগইন
• স্ট্রিং নামের উপর ভিত্তি করে বিল্ডিং উপাদান
• বাহ্যিক উত্স থেকে কনফিগারেশন লোড হচ্ছে
• গতিশীল অ্যাপ্লিকেশন রুট পরিবর্তন
• বাহ্যিক প্লাগইন
• প্লাগইন লাইব্রেরি তৈরি করা হচ্ছে
• অ্যাপ্লিকেশনটিতে প্লাগইনগুলি লোড হচ্ছে
• প্লাগইন সামগ্রী সহ গতিময় রুট

বইটি বিনামূল্যে পাওয়া যায় এবং এতে "আপনি যা চান তা পরিশোধ করুন" মডেল রয়েছে। অনুলিপি একটি অনুলিপি দখল করুন এবং আশা করি যা সহায়তা করে।

Comments

বইটিতে চিত্রিত করা আপনার প্লাগইন আর্কিটেকচারের দ্বারা আমি কীভাবে একটি উপ-উপাদানকে প্রতিস্থাপন করতে পারি? আমি টেমপ্লেটটি প্রতিস্থাপন করব বা সম্ভবত আমি একটি ইনপুট সম্পত্তি ইসিসি যুক্ত করব ... একই সাথে আমাকে জানতে হবে কোনও সরবরাহিত পরিষেবাকে ওভাররাইড / প্রসারিত করার কোনও উপায় বিদ্যমান কিনা।

— মাত্তেও ক্যালি

@ ডেনিস ভ্যুকা, বইটি দুর্দান্ত দেখাচ্ছে তবে এতে গুরুত্বপূর্ণ অংশের অভাব রয়েছে - এওটি সংকলনের সমর্থন।

— সের্গেই সোকোলভ

Answer 4

কাজ প্লাগইন সিস্টেমের সাথে উদাহরণ অ্যাপ্লিকেশন (GitHub রেপো প্রতিষ্ঠাতা জন্য Gijs ধন্যবাদ!) Https://github.com/PacktPublishing/Mastering-Angular-2-Components/tree/master/angular-2-components-chapter-10 ভিত্তিক ই-বুক মাস্টারিং কৌণিক 2 উপাদান

• মূল অ্যাপ্লিকেশন উপাদানগুলি প্রসারিত করতে প্লাগইন আর্কিটেকচার
• ফাইল প্লাগইন সিস্টেম (কোনও মূল কনফিগার ফাইল বা আপনার অ্যাপ্লিকেশনটি পুনরায় সংকলনের প্রয়োজন ছাড়াই প্লাগইন ডিরেক্টরি / ফাইল যুক্ত করার জন্য!)
• গতিশীলভাবে প্লাগইনগুলি লোড করুন এবং ব্যবহার করুন
• ফ্লাই-অন / ডিএ্যাকটিভ প্লাগইনগুলি সক্রিয় করতে একটি প্রাথমিক প্লাগইন ম্যানেজার তৈরি করা

চিয়ার্স, নিক্লাস

Comments

এই লিঙ্কটি থেকে উদাহরণ কোডটি দেখতে পাচ্ছেন না, আপনি একটি কোড পেন বা জেএসফিডেল পোস্ট করতে পারেন?

— শন চেজ

github.com/PacktPublishing/Masting-Angular-2- উপাদানগুলি

— Gijs

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

— লুইজি ডালাভালো

এটির সহায়তা করা উচিত: github.com/mgechev/angular-seed/issues/…

— গিলিয়াম

উপরের কাজ করে যদি কেউ নিশ্চিত করতে পারেন? যদি আমরা systemjs ব্যবহার করতে চান আত

— জ্যাঙ্গো

Answer 5

আপনি যা সন্ধান করছেন তা হ'ল অলস মডিউল লোড। এখানে এর উদাহরণ: http://plnkr.co/edit/FDaiDvklexT68BTaNqvE?p= পূর্বরূপ

import {Component} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'my-app',
  template: `
    <a [routerLink]="['/']">Home</a> | 
    <a [routerLink]="['/app/home']">App Home</a> |
    <a [routerLink]="['/app/lazy']">App Lazy</a>

    <hr>
    <button (click)="addRoutes()">Add Routes</button>

    <hr>
    <router-outlet></router-outlet>
  `
})
export class App {
  loaded: boolean = false;
  constructor(private router: Router) {}

  addRoutes() {
    let routerConfig = this.router.config;

    if (!this.loaded) {
      routerConfig[1].children.push({
        path: `lazy`,
        loadChildren: 'app/lazy.module#LazyModule'
      });

      this.router.resetConfig(routerConfig);
      this.loaded = true;
    }
  }
}

শ্রেষ্ঠ ... টম

Comments

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

— অ্যান্টনি গ্যাটলিন

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

— জো

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

— ভ্লাদিমির প্রুজনিকভ

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

— অ্যান্টনি গ্যাটলিন

Answer 6

আমি বুটস্ট্র্যাপের সময় লোড করার জন্য এবং অন্যান্য মডিউলগুলি সংকলনের জন্য একটি হ্যাক করেছি, তবে আমি চক্রীয় নির্ভরতার সমস্যাটি সমাধান করি নি

 const moduleFile: any = require(`./${app}/${app}.module`),
                    module = moduleFile[Object.keys(moduleFile)[0]];

 route.children.push({
     path: app,
     loadChildren: (): Promise<any> => module
 });
 promises.push(this.compiler.compileModuleAndAllComponentsAsync(module));

তারপরে AppModule এ এটি যুক্ত করুন:

{
        provide: APP_INITIALIZER,
        useFactory: AppsLoaderFactory,
        deps: [AppsLoader],
        multi: true
},

Answer 7

কর্মক্ষেত্রে একটি এন্টারপ্রাইজ অ্যাপ্লিকেশনটির জন্য একটি RAD পরিবেশ বিকাশের জন্য আমি কৌনিক 2/4 তে একটি প্লাগইন সিস্টেমের সন্ধান করছিলাম। কিছু গবেষণা করার পরে, আমি সিউডো-কৌণিক উপাদানগুলির ডাটাবেস-সঞ্চিত (তবে ফাইল সিস্টেমে থাকতে পারে) একটি সংগ্রহ বাস্তবায়নের সিদ্ধান্ত নিয়েছি।

ডাটাবেস ডাটাবেসে সঞ্চিত উপাদানগুলি এনজি-ডায়নামিকের উপর ভিত্তি করে এবং মূল উপাদান প্রয়োগটি এর সাথে সমান:

declare var ctx: any;

@Component({
    selector: 'my-template',
    template: `
<div>
    <div *dynamicComponent="template; context: { ctx: ctx };"></div>
</div>
  `,
    providers: [EmitterService],

})

export class MyTemplateComponent implements OnMount, AfterViewInit, OnChanges {


    // name
    private _name: string;
    get name(): string {
        return this._name;
    }
    @Input()
    set name(name: string) {
        this._name = name;        
        this.initTemplate();
    }

    template: string;
    ctx: any = null;

    private initTemplate() {

        this.templateSvc.getTemplate(this.name).subscribe(res => {
            // Load external JS with ctx implementation
            let promise1 = injectScript(res.pathJs);
            // Load external CCS
            let promise2 = injectScript(res.pathCss);

            Promise.all([promise1, promise2]).then(() => {

                // assign external component code
                this.ctx = ctx; //

                // sets the template
                this.template = res.template;

                this.injectServices();

                if (this.ctx && this.ctx.onInit) {
                    this.ctx.onInit();
                }

            });

        });

    }

বাহ্যিক জাভাস্ক্রিপ্ট কোডটি কৌণিক উপাদানগুলির মতো:

var ctx = {

// injected    
_httpService: {},
_emitterService: null,

// properies
model: {
    "title": "hello world!",
},


// events
onInit() {
    console.log('onInit');
},

onDestroy() {
    console.log('onDestroy');
},

onChanges(changes) {
    console.log('changes', changes);
},

customFunction1() {
    console.log('customFunction1');
},

childTemplateName: string = 'other-component'; 

};

এবং উপাদানগুলির টেমপ্লেটগুলি কৌনিক টেম্পলেটগুলির মতো:

<a (click)="customFunction1()">{{ ctx.model.title }}</a>
<input [(ngModel)]="ctx.model.title" type="text" />

এবং খুব বাসা বাঁধতে পারে:

<a (click)="customFunction1()">{{ ctx.model.title }}</a>
<my-template [name]="childTemplateName"></my-template>

এটি নিখুঁত না হলেও কাস্টম উপাদানগুলির বিকাশকারীগুলির কৌণিক 2/4 এর চেয়ে একই কাঠামো রয়েছে।

Answer 8

এটি "ম্যানুয়ালি" করা যায়। যেহেতু ওয়েবপ্যাকটি বহিরাগত (প্লাগইনগুলি) মডিউল সম্পর্কে কিছুই জানে না, তাই সেগুলি সেগুলি বান্ডিলগুলিতে অন্তর্ভুক্ত করতে পারে না। সুতরাং আমি যা করেছি তা হ'ল ওয়েবপ্যাকের দ্বারা উত্পন্ন কোডটি সন্ধান করা এবং আমি কোডের এই পাইগুলি মেইন.বান্ডেল.জেএস এ পেয়েছি:

var map = {
"./dashboard/dashboard.module": ["../../../../../src/app/dashboard/dashboard.module.ts","dashboard.module"]}; 

সেই অ্যারেতে কী রয়েছে তা পরীক্ষা করে দেখুন:

1. "./dashboard/dashboard.module" - মডিউল জাদুকরী আমরা উদাহরণস্বরূপ অলস লোড করতে চান এই রাউটিং হয় URL টি: {পথ: 'ড্যাশবোর্ড', loadChildren: './dashboard/dashboard.module#DashboardModule'}
2. "../../../../../src/app/dashboard/dashboard.module.ts" - এটি এন্ট্রি পয়েন্ট (কনট্রাক্টর) থেকে নেওয়া
3. "ড্যাশবোর্ড.মডিউল" - chunk.js ছাড়াই প্রকৃত ফাইলের নাম (উদাহরণস্বরূপ: dashboard.module.chunk.js )

সুতরাং তত্ত্ব অনুসারে, আপনি যদি মানচিত্রের বৈশিষ্ট্যে প্রবেশ করে আপনার রাউটিংটি কনফিগার করেন এবং প্যাটার্নটি অনুসরণ করেন তবে আপনার একটি প্লাগ-ইন সিস্টেম থাকতে পারে। এখন চ্যালেঞ্জটি হ'ল কীভাবে সেই মানচিত্রের সম্পত্তি থেকে এন্ট্রি যুক্ত করা বা সরিয়ে ফেলা যায়। স্পষ্টতই এটি কৌনিক কোড থেকে করা যায় না, এটি বাহ্যিক সরঞ্জামের জন্য করা উচিত।

Answer 9

আমি এবিপি, কৌণিক এবং এএসপি.নেট কোর ব্যবহার করে একটি প্লাগইন আর্কিটেকচার বাস্তবায়নের চেষ্টা করেছি: https://github.com/chanjunweimy/abp_plugin_with_ui

মূলত, আমি বিভিন্ন কৌণিক অ্যাপ্লিকেশন ব্যবহার করে কৌণিক প্লাগইনগুলি বিকাশ করি, তারপরে আমি এগুলি গতিশীলভাবে একসাথে যুক্ত করি।

আমি কীভাবে এটি অর্জন করব সে সম্পর্কে আরও তথ্য:

আমার কাছে দুটি কৌণিক-ক্লিপ অ্যাপ্লিকেশন রয়েছে, 1 হ'ল প্রধান কৌণিক ক্লাইপ অ্যাপ্লিকেশন এবং অন্যটি প্লাগইন কৌণিক ক্লাইপ অ্যাপ্লিকেশন। কৌণিক-ক্লাইপ প্লাগইন আর্কিটেকচার পদ্ধতির মধ্যে আমরা যে সমস্যার মুখোমুখি হচ্ছি তা হ'ল আমরা কীভাবে তাদেরকে সংহত করছি।

এখনই, আমি যা করেছি তা হ'ল, আমি উভয় অ্যাপ্লিকেশনগুলিতে এনজি-বিল্ড চালিয়েছি এবং এগুলিকে একটি "wwwroot" ফোল্ডারে রেখেছি, যা এএসপি.নেট কোর 2.0 সার্ভারে হোস্ট করা হয়েছিল। একটি সহজ ভাণ্ডার যা এই ধারণাটি দেখায় তা হ'ল কৌণিক একাধিক অ্যাপ: https://github.com/chanjunweimy/angular-m Multipleple-app

abp_plugin_with_ui একটি ভাণ্ডার যা একটি প্লাগইন বিকাশে কাজ করে যা ব্যাকএন্ড এবং কৌণিক ক্লিপ উভয়ই অন্তর্ভুক্ত করে। ব্যাকএন্ডের জন্য, আমি অ্যাসপেটবাইলারপ্লেট ফ্রেমওয়ার্কটি ব্যবহার করেছি, যা একাধিক কৌণিক-ক্লাইপ অ্যাপ্লিকেশন ব্যবহার করে সীমান্তটি তৈরি করা হয়েছে।

মূল অ্যাপ্লিকেশনটি প্লাগইন অ্যাপ্লিকেশনের সাথে সংহত করতে, আমাদের উভয় অ্যাপ্লিকেশনটিতে "এনজি-বিল্ড" চালাতে হবে (নোট করুন যে আমাদেরও প্লাগইন অ্যাপ্লিকেশনটির href এ পরিবর্তন করতে হবে), তারপরে আমরা প্লাগইনটির বিল্ট সামগ্রীগুলি সরিয়ে নিয়েছি কৌণিক ক্লাইপ অ্যাপ্লিকেশন, মূল অ্যাপ্লিকেশন "wwwroot" ফোল্ডারে। এগুলি অর্জনের পরে আমরা "এনজি বিল্ড" দ্বারা উত্পন্ন স্ট্যাটিক ফাইলগুলি হোস্ট করার জন্য এএসপি.নেট কোর 2.0 ওয়েব অ্যাপ্লিকেশন পরিবেশন করতে "ডটনেট রান" চালাতে পারি।

আশা করি এটি সাহায্য করবে। কোন মন্তব্য স্বাগত! ^^

Comments

আমি আপনার প্লাগইন ডক্স অনুসরণ করার চেষ্টা করছি, তবে আমি মনে করি ডকুমেন্টেশনটি কয়েক ধাপ এড়িয়ে চলেছে। আমি যদি এটির ভুল পড়ে থাকি তবে আমি ক্ষমা চাই। পুরো 'প্লাগইন যুক্ত করা' টুকরোটি আমার কাছে পরিষ্কার নয়। আমি এই পদক্ষেপটি ধাপে ধাপে অনুসরণ করেছি, তবে আমি সত্যিই ফলাফল দেখছি না। আমি পাওয়ার শেলটি চালানোর পরে 4200 বন্দরে আমার কী দেখা উচিত? আমি /aspnet-core/src/Todo.MainProject.Web.Host/ এ প্লাগইন ফোল্ডারটি দেখতে পাচ্ছি না। আমি পাওয়ারশেল চালিয়েছি, এবং সেই ফোল্ডারটি তৈরি করা হয়নি। কোন সাহায্য প্রশংসা। আমি মনে করি আপনার পদ্ধতির আমার যা প্রয়োজন তা হল তবে এটি কীভাবে কাজ করে তা নিয়ে আমি খানিকটা অস্পষ্ট।

— ব্রায়ান কিট

ঠিক আছে. প্রশ্ন জিজ্ঞাসার আগে আমার এটি করা উচিত ছিল। আমি ডিবাগ করতে সময় ব্যয় করেছি এবং আমার উত্তরগুলি সন্ধান করেছি। # 1) পাওয়ারশেলটি যেখানে জিপ যেতে হবে সেখানে জিপটি রাখে না, আমার প্লাগইন ফোল্ডারটি তৈরি করতে হবে এবং জিপটি স্থানান্তরিত করতে হবে। # 2) যখন কৌণিক অ্যাপ্লিকেশন শুরু হয়, তখন এটি গতিশীলভাবে লোডারকে কল করে এবং ওয়েবরূটে প্লাগইনগুলি অনুলিপি করে। এটি এক ধরনের বানান ছিল, কিন্তু আমি এখন এটি পেয়েছি। # 3) প্লাগইনটি শুরু করতে আমাকে ইউআরএল ব্যবহার করতে হবে, এটি কোথাও প্রদর্শিত হবে না। আমি এটি ড্যাশবোর্ডে থাকার আশা করছিলাম। আপনার কাজের জন্য ধন্যবাদ, এটি কোডের একটি উল্লেখযোগ্য অংশ।

— ব্রায়ান কিট

Answer 10

কিছুটা সামান্য বিষয়, তবে ইউআই কম্পোনেন্ট লাইব্রেরিগুলি পাঠকদের জন্য আগ্রহী হতে পারে, যারা প্লাগইনগুলি সন্ধান করে: https://medium.com/@nikolasleblanc/building-an-angular-4-comp घटक-library-with-
theth -angular-CLI-এবং-nG-packagr-53b2ade0701e

নেটিভস্রিপ্ট-এ ইউআই প্লাগইন রয়েছে:
https://docs.nativescript.org/plugins/building-plugins
এই প্লাগইনগুলির একটি কৌণিক মোড়ানো দরকার:
https://docs.nativescript.org/plugins/angular-plugin

Answer 11

আমি বর্তমানে আপনার মতো একই সন্ধানে আছি, কৌনিকটির একটি প্লাগেবল / থেম্যাবল সংস্করণ তৈরি করার চেষ্টা করছি এবং এটি কোনও তুচ্ছ সমস্যা নয়।

আমি আসলে পাওয়া প্রশংসনীয় ভাল সমাধান, বই পড়া কৌণিক সঙ্গে ডেভেলপিং Genius দ্বারা Denys Vuyika তিনি আসলে বই একটি প্রশংসনীয় ভাল সমাধান ব্যাখ্যা তিনি পৃষ্ঠা বইয়ের 356 বাহ্যিক প্লাগিন সম্পর্কে আলোচনা ও ব্যবহার করে Rollup.js অর্জন করা সমাধান, তিনি তারপরে আপনার অ্যাপ্লিকেশনের বাইরে তৈরি করা বাহ্যিক প্লাগইনগুলি গতিশীলভাবে লোড করার প্রক্রিয়া করবেন।

আরও দুটি গ্রন্থাগার / প্রকল্প রয়েছে যা আপনাকে এনজি-প্যাকাগ্রার এবং এনএক্স এক্সটেনশনগুলি অগ্নুলার (এনআরওএল থেকে) এর ফলাফল অর্জনে সহায়তা করে এবং আমরা বলব যে এটি আমাদের প্রত্যাশার মতো মসৃণ নয়, কৌণিকটি সহজ ছিল এর জন্য নির্মিত হয়নি, সুতরাং আমাদের কীভাবে কৌনিক, এবং এনএক্স পিপিএলএস এর মধ্যে অন্যতম সেরা সেটির মূল কিছুটা নিয়ে কাজ করতে হবে।

আমরা কেবল আমাদের ওপেন সোর্স প্রকল্পের শুরুতেই আছি, আমরা জ্যাঙ্গো + মঙ্গো + কৌণিক ব্যবহার করছি, (আমরা ওয়েবডাঙ্গাঙ্গুলার কল করছি এবং এই উত্তরের জন্য আমাদের সম্ভাব্য পদ্ধতির মধ্যে একটি, জ্যাঙ্গোকে কিছু জেএসএন কনফিগারেশন ফাইল লিখতে হবে এবং তৈরি করতে হবে অ্যাপ্লিকেশনটি প্রতিবার একটি নতুন প্লাগইন বা থিম ইনস্টল করা এবং সক্রিয় করা থাকে।

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

আমি আশা করি বইটি আপনাকে সহায়তা করতে পারে এবং রোলআপ.জেএস ব্যবহার করে আমি জানি আপনি এই অ-তুচ্ছ সমস্যাটি ক্র্যাক করতে সক্ষম হবেন।

Answer 12

কৌণিক ক্ষেত্রে কীভাবে প্লাগইন এক্সটেনসিবল অ্যাপ্লিকেশন তৈরি করতে হবে সে সম্পর্কে আমি পল আইনেস্কুর একটি ভাল নিবন্ধ পেয়েছি।

https://itnext.io/how-to-build-a-plugin-extensible-application-architecture-in-angular5-736890278f3f

তিনি গিথুবে একটি উদাহরণ প্রয়োগের উল্লেখ করেছেন: https://github.com/ionepaul/angular-plugin-architecture