কৌণিক - উপাদানটিতে মডিউল.আইডের অর্থ কী?

Question

একটি কৌণিক অ্যাপে আমি দেখেছি যে @Componentএর সম্পত্তি আছে moduleId। এর মানে কী?

এবং যখন module.idকোথাও সংজ্ঞায়িত করা হয় না, অ্যাপ্লিকেশনটি এখনও কাজ করে। এটি এখনও কিভাবে কাজ করতে পারে?

@Component({
  moduleId: module.id,
  selector: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [AppComponent]
});

Comments

সেরা schwarty.com/2015/12/22/…

— জৈন

Answer 1

অ্যাঙ্গুলারের বিটা রিলিজ (যেহেতু ভেনশন 2-আলফা.51) উপাদানগুলির জন্য টেম্পলেট ইউআরএল এবং স্টাইলআরআলস@Component সাজসজ্জারীর ক্ষেত্রে অপেক্ষাকৃত সম্পদের সমর্থন করে ।

module.idকমনজেএস ব্যবহার করার সময় কাজ করে। এটি কীভাবে কাজ করে সে সম্পর্কে আপনাকে চিন্তা করার দরকার নেই।

মনে রাখবেন : মডিউলআইডি: মডিউল.আইডিকে @ কমপোনেন্ট ডেকরেটারে সেট করা এখানে মূল। আপনার যদি তা না থাকে তবে কৌনিক 2 আপনার ফাইলগুলি মূল স্তরে সন্ধান করবে।

জাস্টিন শোয়ার্টজেনবার্গারের পোস্ট থেকে উত্স , @ প্রদীপ জৈনকে ধন্যবাদ

16 সেপ্টেম্বর 2016 এ আপডেট করুন:

আপনি যদি বান্ডিলিংয়ের জন্য ওয়েবপ্যাক ব্যবহার করছেন তবে আপনার ডেকরেটারে দরকার নেই module.id। module.idচূড়ান্ত বান্ডেলে ওয়েবপ্যাক প্লাগইনগুলি অটো হ্যান্ডেল (এটি যোগ করুন)

Comments

আপনার স্বাগত, দয়া করে এই প্রশ্নটি দেখুন আশা করি আপনি আমাকে সাহায্য করতে পারেন। stackoverflow.com/q/36451917/5043867

— পারদীপ জৈন

ওয়েবপ্যাকের রেফারেন্সের জন্য +1, আমার কোনও ধারণা ছিল না যে যখন তাদের যখন কাজ করার কথা ছিল এবং যখন তারা ভাঙ্গার কথা ছিল তখন কেন কাজ করা হচ্ছে ...

— জোও মেন্ডেস

উদ্ভাবনের জন্য আরও পাল্টা-স্বজ্ঞাত জিনিসটির কথা ভাবতে পারি না

— খুশরাভ

এটি কীভাবে ব্যাখ্যা করবে যে মডিউল.আইডি কি?

— gyozo kudor

@gyozokudor আপনার যদি তা না থাকে তবে কৌনিক 2 আপনার ফাইলগুলি মূল স্তরে সন্ধান করবে।

— নিশ্চিত ধনানী

Answer 2

(2017-03-13) এর জন্য আপডেট :

মডিউলআইডির সমস্ত উল্লেখ মুছে ফেলা হয়েছে। "উপাদানগুলির আপেক্ষিক পাথ" কুকবুক মোছা হয়েছে

আমরা আমাদের প্রস্তাবিত সিস্টেমজেএস কনফিগারেশনে একটি নতুন সিস্টেমজেএস প্লাগইন (systemjs-angular-loader.js) যুক্ত করেছি। এই প্লাগইনটি গতিশীলভাবে টেম্পলেট ইউআরএল এবং স্টাইলআরলগুলিতে "উপাদান-সম্পর্কিত" পাথগুলি আপনার জন্য "পরম পথে" রূপান্তর করে।

আমরা আপনাকে কেবল উপাদান-সম্পর্কিত পাথ লিখতে উত্সাহিত করি। এই ডক্সে আলোচিত ইউআরএলের একমাত্র ফর্ম এটি। আপনার আর লেখার দরকার নেই @Component({ moduleId: module.id }), আপনারও উচিত নয়।

সূত্র: https://angular.io/docs/ts/latest/guide/change-log.html

সংজ্ঞা:

moduleId?: string

moduleIdটীকাটির ভিতরে প্যারামিটারটি @Componentএকটি stringমান নেয় যা হয়;

" উপাদান রয়েছে এমন মডিউলটির মডিউল আইডি " "

CommonJS ব্যবহার: module.id,

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

---

ব্যবহারের কারণmoduleId :

moduleId এটি আপনার স্টাইলশিট এবং টেম্পলেটগুলির জন্য আপেক্ষিক পাথগুলি সমাধান করতে ব্যবহৃত হয় যেমন এটি ডকুমেন্টেশনে বলে।

উপাদান রয়েছে এমন মডিউলটির মডিউল আইডি। টেমপ্লেট এবং শৈলীর জন্য আপেক্ষিক url সমাধান করতে সক্ষম হতে হবে। ডার্টে, এটি স্বয়ংক্রিয়ভাবে নির্ধারণ করা যেতে পারে এবং সেট করার দরকার নেই। কমনজেএসে, এটি সর্বদা মডিউল.আইডে সেট করা যেতে পারে।

রেফ (পুরানো): https://angular.io/docs/js/latest/api/core/index/Comp घटकMetadata- class.html

আমরা কেবলমাত্র কম্পোনেন্ট মেটাডেটার মডিউলআইড সম্পত্তি সেট করে উপাদান উপাদান শ্রেণীর ফাইলের সাথে সম্পর্কিত টেম্পলেট এবং স্টাইল ফাইলগুলির অবস্থানগুলি নির্দিষ্ট করতে পারি

রেফ: https://angular.io/docs/ts/latest/cookbook/comp घटक-relative- paths.html

---

ব্যবহারের উদাহরণ:

ফোল্ডার কাঠামো:

RootFolder
├── index.html
├── config.js
├── app
│   ├── components
│   │   ├── my.component.ts
│   │   ├── my.component.css
│   │   ├── my.component.html

মডিউল.আইড ছাড়া :

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my.component.html', <- Starts from base path
  styleUrls:  ['app/components/my.component.css'] <- Starts from base path
})

মডিউল.আইড সহ :

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs", <- need to change this if you want to use module.id property
...

@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

Comments

তবে এটি কীভাবে কাজ করে, কোথায়

— মডিউল id

@ নিশ্চীতধনানি এটি প্রয়োজনীয় নয় তবে আমি github.com/angular/angular/issues/6053 পরীক্ষা করার পরামর্শ দিচ্ছি এটি mapআপনার কনফিগারেশনের ভিতরে থাকা কীগুলিতে মানচিত্র করে maps লাইক app।

— ইকো

ইকোনাক্সের ডক্সের লিঙ্কটি বর্তমানে কাজ করছে না - যদিও এটি অ্যাঙ্গুলার.ও উপাদান অংশের লিঙ্ক is চেষ্টা করুন: কৌণিক.ইও

— জন পানকোভিজ

দেখে মনে হচ্ছে আপনি মডিউল.আইডি ছাড়াই পদ্ধতির 'অ্যাপ' রুট ডিরেক্টরিটির 'উপাদানগুলি' উপ-ডিরেক্টরিটি ভুলে গেছেন, তাই না? আমি মনে করি এটি হওয়া উচিত: templateUrl: 'app/components/my.component.html', styleUrls: ['app/components/my.component.css']

— ইলকার বিড়াল

Answer 3

যদি আপনি পান তবে আপনার ফাইলটিতে typescript errorকেবল declareপরিবর্তনশীল।

// app.component.ts
declare var module: {
   id: string;
}
//
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

UPDATE - December 08, 2016

moduleশব্দ পাওয়া যায় node। সুতরাং আপনি যদি @types/nodeআপনার প্রকল্পে ইনস্টল করেন , আপনার moduleকীওয়ার্ডটি আপনার টাইপ স্ক্রিপ্ট ফাইলগুলিতে প্রয়োজন না declareহয়ে স্বয়ংক্রিয়ভাবে পাওয়া যাবে ।

npm install -D @types/node

আপনার কনফিগারেশনের উপর নির্ভর করে টুলিংটি পেতে আপনার ফাইলটিতে এটি অন্তর্ভুক্ত করতে হতে পারে :tsconfig.json

//tsconfig.json
{
   ...
   "compilerOptions": {
       "types" : ["node"]
   }
   ...
}

// some-component.ts
// now, no need to declare module
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

শুভকামনা

Comments

tnq এত! পরিশেষে আমি দীর্ঘ সময় ব্যয় ng build --prod --aotকরার npm install -D @types/nodeপরে আমার কাজটি পেয়েছিলাম :)

— আনন্দ রকজ ২৩

আমি আরও একটি কাজ করেছিলাম moduleId: 'module.id'(মডিউল.আইডের চারপাশে একক উদ্ধৃতি লক্ষ্য করুন)

— আনন্দ রকজ

@ আনন্দআরকজ আমি আনন্দিত যে আপনি এই পোস্টটি সহায়ক বলে খুঁজে পেয়েছেন। আমার মনে হয় না আপনাকে module.idস্ট্রিং হিসাবে যুক্ত করতে হবে । যদি এটি কাজ করে তবে কিছু ভুল বলে মনে হচ্ছে। আপনার এটি আরও গবেষণা করার প্রয়োজন হতে পারে।

— আকাশ

Answer 4

থেকে দুর্দান্ত ব্যাখ্যা ছাড়াও echonaxএবং Nishchit Dhananiআমি যুক্ত করতে চাই, যেগুলির সাথে উপাদানগুলির জনসংখ্যাকে আমি সত্যিই ঘৃণা করি module.id। বিশেষত, যদি আপনার কাছে (পূর্বে-সময়ের) এওটি-সংকলনের জন্য সমর্থন থাকে এবং একটি বাস্তবসম্মত প্রকল্পের জন্য এটি আপনার লক্ষ্য করা উচিত, তবে module.idআপনার উপাদান মেটাডেটার মতো কোনও কিছুর জন্য কোনও জায়গা নেই ।

দস্তাবেজ থেকে :

জিআইটি-সংকলিত অ্যাপ্লিকেশনগুলি যা SystemJSলোডার এবং উপাদান-সম্পর্কিত ইউআরএল ব্যবহার করে সেগুলিতে অবশ্যই @Component.moduleIdসম্পত্তি সেট করতে হবে module.id। যখন কোনও এওটি-সংকলিত অ্যাপ্লিকেশন চালিত হয় তখন মডিউল অবজেক্টটি অনির্ধারিত হয়। আপনি যদি সূচক এইচটিএমটিএলে কোনও বৈশ্বিক মডিউল মান নির্ধারণ না করেন তবে অ্যাপটি নাল রেফারেন্স ত্রুটির সাথে ব্যর্থ হয়:

<script>window.module = 'aot';</script>

আমি মনে করি index.htmlফাইলটির উত্পাদনের সংস্করণে এই লাইন থাকা একেবারেই গ্রহণযোগ্য নয়!

অতএব, লক্ষ্যটি নিম্নোক্ত উপাদান মেটাডেটা সংজ্ঞা সহ উত্পাদনের জন্য (জাস্ট-ইন-টাইম) জিআইটি-সংকলন এবং এওটি সমর্থন পাওয়ার রয়েছে: ( moduleId: module.idলাইন ছাড়াই )

@Component({      
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

একই সময়ে আমি উপাদান উপাদান পাথের তুলনায় শৈলী, পছন্দ my.component.cssএবং টেম্পলেট ফাইল স্থাপন করতে চাই ।my.component.html my.component.ts

এই সমস্ত অর্জনের জন্য, আমি যে সমাধানটি ব্যবহার করছি তা হ'ল একাধিক ডিরেক্টরি উত্স থেকে ডেভলপমেন্ট ফেজ চলাকালীন ওয়েব সার্ভার (লাইট-সার্ভার বা ব্রাউজার-সিঙ্ক) হোস্ট করা!

bs-config.json:

{
  "port": 8000,
  "server": ["app", "."]
}

আমার বিবরণ জন্য এই উত্তরটি একবার গ্রহণ করুন।

অনুকরণীয় কৌণিক 2 দ্রুত শুরু প্রকল্প, যা এই পদ্ধতির উপর নির্ভর করে এখানে হোস্ট করা হয়েছে ।

Answer 5

কৌণিক ডক অনুসারে, আপনি @ কম্পোনেন্ট ({মডিউলআইডি: মডিউল.আইডি}) ব্যবহার করবেন না

দয়া করে রেফ করুন: https://angular.io/docs/ts/latest/guide/change-log.html

এই পৃষ্ঠা থেকে প্রাসঙ্গিক পাঠ্য এখানে:

মডিউলআইডির সমস্ত উল্লেখ মুছে ফেলা হয়েছে। "অংশের আপেক্ষিক পাথ" কুকবুক মুছে ফেলা হয়েছে (2017-03-13)

আমরা systemjs-angular-loader.jsআমাদের প্রস্তাবিত সিস্টেমজেএস কনফিগারেশনে একটি নতুন সিস্টেমজেএস প্লাগইন ( ) যুক্ত করেছি। এই প্লাগইনটি গতিশীলভাবে টেম্পলেট ইউআরএল এবং স্টাইলআরলগুলিতে "উপাদান-সম্পর্কিত" পাথগুলি আপনার জন্য "পরম পথে" রূপান্তর করে।

আমরা আপনাকে কেবল উপাদান-সম্পর্কিত পাথ লিখতে উত্সাহিত করি। এই ডক্সে আলোচিত ইউআরএলের একমাত্র ফর্ম এটি। আপনার আর লেখার দরকার নেই @Component({ moduleId: module.id }), আপনারও উচিত নয়।

Comments

আমি এটিকে আমার দাবিতে অস্বীকৃতি হিসাবে যুক্ত করব, আপডেটের জন্য ধন্যবাদ।

— একো

Answer 6

দেখে মনে হচ্ছে আপনার "মডিউল": tsconfig.json এ "এস 6" ব্যবহার করে, আপনাকে এটি ব্যবহার করতে হবে না :)

Comments

এটা করা হবে না transpile ES6 মধ্যে যদি আমরা এই কাজ করতে?

— আকাশ

Answer 7

এই মডিউলআইডি মানটি কৌণিক প্রতিবিম্ব প্রক্রিয়া এবং মেটাডেটা_রেসোলভার উপাদান দ্বারা উপাদানটি নির্মাণের পূর্বে পুরোপুরি-যোগ্য উপাদানগুলির পাথ মূল্যায়নের জন্য ব্যবহৃত হয়।

Answer 8

moduleId: module.idদেশীয়-কৌণিক অ্যাপ্লিকেশন এবং কৌণিক ওয়েব অ্যাপ্লিকেশন তৈরি করার সময় ঘটতে পারে এমন কয়েকটি সমস্যা সংশোধন করা হচ্ছে । এটি ব্যবহার করার পক্ষে এটি সর্বোত্তম অনুশীলন।

এটি শীর্ষ ফোল্ডারের পরিবর্তে ফাইলগুলির জন্য বর্তমান ডিরেক্টরিটি অনুসন্ধান করার জন্য উপাদানটিকে সক্ষম করে