কীভাবে সিএলআই ব্যবহার করে কৌণিক 4 এ একটি নতুন উপাদান তৈরি করবেন


96

কৌণিক 2 এ আমি ব্যবহার করি

ng g c componentname

তবে এটি কৌণিক 4 এ সমর্থিত নয়, তাই আমি নিজে এটি তৈরি করেছি, তবে এটি ত্রুটি দেখায় যে এটি কোনও মডিউল নয়।



4
আপনাকে মডিউল.টস ফাইলটিতে ম্যানুয়ালি তৈরি উপাদান আমদানি করতে হবে
surbhiGoel

অ্যাঙ্গুলার 7 এ এটিও কাজ করে। ng g c <componentname>বাng generate component <Name>
চিন্ময়

আপনি এটির
স্কিমেটিকস

উত্তর:


11

ডেভলপমেন্ট সার্ভারের মাধ্যমে একটি কৌণিক প্রকল্প উত্পন্ন এবং পরিবেশন করা -

প্রথমে আপনার প্রকল্প ডিরেক্টরিতে যান এবং নীচে টাইপ করুন -

ng new my-app
cd my-app
ng g component User
ng serve

এখানে “ D: \ Angular \ my-app> ” হ'ল আমার কৌণিক অ্যাপ্লিকেশন প্রকল্পের ডিরেক্টরি এবং " ব্যবহারকারী " উপাদানটির নাম।

কমন্ডগুলি দেখে মনে হচ্ছে -

D:\Angular\my-app>ng g component User
  create src/app/user/user.component.html (23 bytes)
  create src/app/user/user.component.spec.ts (614 bytes)
  create src/app/user/user.component.ts (261 bytes)
  create src/app/user/user.component.css (0 bytes)
  update src/app/app.module.ts (586 bytes)

147

Angular4 এ এটি একই কাজ করবে। আপনি যদি ত্রুটি পান তবে আমি মনে করি আপনার সমস্যাটি অন্য কোথাও।

কমান্ড প্রম্পট টাইপ

এনজিও YOURCOMPONENTNAME উপাদান তৈরি করুন

এর জন্য এমনকি সংক্ষিপ্তসার রয়েছে: কমান্ডগুলি generateহিসাবে gএবং componentহিসাবে ব্যবহার করা যেতে পারে c:

এনজি জিসি আপনার কম্পিউটার

আপনি ব্যবহার করতে পারেন ng --help, ng g --helpবা ng g c --helpডক্স জন্য।

অবশ্যই আপনি ব্যবহার করতে চাইছেন এমন নামটি YOURCOMPONENTNAME এর নামকরণ করুন।

দস্তাবেজ: কৌণিক-ক্লিপ অ্যাপ্লিকেশনগুলিতে স্বয়ংক্রিয়ভাবে উপাদানগুলি, নির্দেশাবলী এবং পাইপগুলিকে রেফারেন্স যুক্ত করবে।

আপডেট: এটি এখনও কৌণিক সংস্করণ 8 এ কাজ করে।


4
আমি এই ত্রুটিটি পেয়ে যাচ্ছি ----------- ঘোষণার জন্য উপাদানটি ইনস্টল করার সময় ত্রুটি সাইলেন্টেরর: কোনও মডিউল ফাইল পাওয়া যায় নি
surbhiGoel

4
আমি ভাবছি, এটির রেফারেন্স অ্যাপ্লিকেশন মডিউল সহ তৈরি উপাদানগুলি সরানোর জন্য কি কোনও আদেশ রয়েছে?
পঙ্কি শর্মা

4
@ পঙ্কিশর্মা না কোনও উপাদান অপসারণের জন্য কৌণিক সিএলআই-তে কোনও আদেশ নেই, তবে আপনি যদি বিভিন্ন বিকল্পের সাহায্যে উপাদানটি পুনরায় তৈরি করতে চান; আপনি --forceফাইলগুলি ওভাররাইড করতে (শর্টহ্যান্ড: -ফ) বিকল্পটি ব্যবহার করতে পারেন ।
মাইক বোভেনল্যান্ডার

"এনজি জিসি কর্মীরা" আমার পক্ষে কাজ করেছেন। আমি 'এনজি' এর আগে '$ এনজি জিসি কর্মচারীদের' মতো '$' ব্যবহার করছিলাম যা এই ক্ষেত্রে সমস্যা তৈরি করছিল।
রাজ চৌরাসিয়া

যদি আপনার নতুন উপাদানটির জন্য টেস্ট ফাইলের (.spec.ts) দরকার না হয় তবে আপনার কমান্ডটিতে যুক্তি -স্কিপ টেস্ট যুক্ত করুন।
চিরাগ কে

27

1) প্রথমে আপনার প্রকল্প ডিরেক্টরিতে যান

2) তারপরে টার্মিনালে কমান্ডের নীচে রান করুন।

ng generate component componentname

বা

ng g component componentname

3) এর পরে আপনি এরকম আউটপুট দেখতে পাবেন,

create src/app/test/componentname.component.css (0 bytes)
create src/app/test/componentname.component.html (23 bytes)
create src/app/test/componentname.component.spec.ts (614 bytes)
create src/app/test/componentname.component.ts (261 bytes)
update src/app/app.module.ts (1087 bytes)

14

আপনি যদি .specফাইল ছাড়াই নতুন উপাদান তৈরি করতে চান তবে আপনি ব্যবহার করতে পারেন

ng g c component-name --spec false

আপনি এই বিকল্পগুলি ব্যবহার করে খুঁজে পেতে পারেন ng g c --help


11
ng g component componentname

এটি উপাদান তৈরি করে এবং মডিউল ঘোষণায় উপাদান যুক্ত করে।

ম্যানুয়ালি উপাদান তৈরি করার সময়, আপনাকে মডিউলটির ঘোষণায় উপাদানটি যুক্ত করতে হবে:

@NgModule({
  imports: [
    yourCommaSeparatedModules
    ],
  declarations: [
    yourCommaSeparatedComponents
  ]
})
export class yourModule { }

8

নিশ্চিত করুন যে আপনি সিএমডি লাইনে আপনার প্রকল্প ডিরেক্টরিতে রয়েছেন

    ng g component componentName

6

নির্দিষ্ট ফোল্ডারের অধীনে উপাদান তৈরি করার জন্য

ng g c employee/create-employee --skipTests=false --flat=true

এই লাইনটি একটি ফোল্ডার নাম 'কর্মচারী' তৈরি করবে, এর নীচে এটি একটি 'তৈরি-কর্মচারী' উপাদান তৈরি করে।

কোনও ফোল্ডার তৈরি না করেই

ng g c create-employee --skipTests=false --flat=true


3

এনজি জেনারেট কম্পোনেন্ট_নাম আমার ক্ষেত্রে কাজ করছে না কারণ 'অ্যাপ্লিকেশন' প্রজেক্ট ফোল্ডারের নাম হিসাবে ব্যবহার করার পরিবর্তে আমি এর নাম পরিবর্তন করে অন্য কিছুতে রেখেছি। আমি আবার এটি অ্যাপ্লিকেশন পরিবর্তন। এখন এটা সূক্ষ্ম কাজ করছে


3
ng g c COMPONENTNAME

এই কমান্ডটি টার্মিনাল ব্যবহার করে উপাদান তৈরি করার জন্য এটি আমি কৌণিক 2 এ ব্যবহার করি।

উপাদান জন্য সি উত্পাদনের জন্য জি


2

আমার ক্ষেত্রে .angular-cli.jsonআমার srcফোল্ডারে অন্য ফাইল রয়েছে । এটি সরানো সমস্যার সমাধান করে। আশা করি এটা সাহায্য করবে

angular 4.1.1 angular-cli 1.0.1


2
ng g component component name

আপনি এই প্রশংসনীয় পরীক্ষাটি টাইপ করার আগে আপনি আপনার প্রকল্পের দিকনির্দেশক পথে থাকবেন


2

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


2

src/appকমান্ড লাইনে আপনার কৌণিক-ক্লিপ প্রকল্পের ফোল্ডারে থাকা উচিত । উদাহরণ স্বরূপ:

D:\angular2-cli\first-app\src\app> ng generate component test

তবেই এটি আপনার উপাদান তৈরি করবে।


1

আপনি কি কৌনিক-ক্লাইটি সর্বশেষ সংস্করণে আপডেট করেছেন? অথবা আপনি নোড বা এনপিএম বা টাইপস্ক্রিপ্ট আপডেট করার চেষ্টা করেছেন? এই সমস্যাটি কৌণিক / টাইপসক্রিপ্ট / নোডের মতো সংস্করণের কারণে আসে। আপনি যদি ক্লাইটি আপডেট করছেন তবে এই লিঙ্কটি এখানে ব্যবহার করুন। https://github.com/angular/angular-cli/wiki/stories-1.0-update


1

আপনার কৌণিক প্রকল্প ফোল্ডারে যান এবং কমান্ডটি প্রবর্তন করুন এমন একটি "এনজি জি কম্পোনেন্ট শিরোলেখ" টাইপ করুন যেখানে শিরোনামটি আপনি তৈরি করতে চান এমন নতুন উপাদান default উপাদান। উদাহরণস্বরূপ, যদি আপনি তাঁর হেডারের ভিতরে এমন একটি উপাদান তৈরি করতে চান যা আমরা উপরে তৈরি করেছিলাম তবে "এনজি জি উপাদান উপাদান / মেনু" টাইপ করুন। এটি শিরোনাম উপাদানটির ভিতরে একটি মেনু উপাদান তৈরি করবে


1

ng g c COMPONENTNAME কাজ করা উচিত, যদি আপনার মডিউলটি ব্যতিক্রম না পেয়ে থাকে তবে এই জিনিসগুলি চেষ্টা করে দেখুন-

  1. আপনার প্রকল্প ডিরেক্টরি পরীক্ষা করুন।
  2. আপনি যদি ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করছেন তবে এটিকে পুনরায় লোড করুন বা এতে আপনার প্রকল্পটি আবার খুলুন।

1

নির্দিষ্ট ফোল্ডারে প্রকল্পের অবস্থানে যান

C:\Angular6\sample>

এখানে আপনি কমান্ডটি টাইপ করতে পারেন

C:\Angular6\sample>ng g c users

এখানে g এর অর্থ জেনারেট করা, সি এর অর্থ উপাদান, ব্যবহারকারীরা উপাদানটির নাম

এটি 4 টি ফাইল উত্পন্ন করবে

users.component.html,
users.component.spec.ts,
users.component.ts,
users.component.css

1

ধাপ 1:

প্রকল্প ডিরেক্টরিতে প্রবেশ করুন! (তৈরি অ্যাপে সিডি)।

ধাপ ২:

নিম্নলিখিত কমান্ড টাইপ করুন এবং রান করুন!

ng generate component [componentname]

  • আপনি যে উপাদানটি তৈরি করতে চান তার নাম [উপাদান]] বিভাগে যুক্ত করুন।

বা

ng generate c [componentname]

  • আপনি [উপাদানটির] বিভাগে যে উপাদানটি উত্পন্ন করতে চান তার নাম যুক্ত করুন।

দুজনেই কাজ করবে

রেফারেন্স চেকআউটের জন্য কৌনিক ডকুমেন্টেশনের এই বিভাগটি!

https://angular.io/tutorial/toh-pt1

রেফারেন্সের জন্য গিথুবে অ্যাংুলার ক্লায়ার লিঙ্কটিও চেকআউট করুন!

https://github.com/angular/angular-cli/wiki/generate-comp घटक


1
ng generate component componentName.

এটি স্বয়ংক্রিয়ভাবে মডিউল.tsগুলিতে উপাদানটি আমদানি করবে


1

আপনার প্রকল্পে সিডি করুন এবং রান করুন,

> ng generate component "componentname"
ex: ng generate component shopping-cart

বা

> ng g c shopping-cart

(এটি "শপিং-কার্ট" নাম সহ "অ্যাপ্লিকেশন" ফোল্ডারের অধীনে নতুন ফোল্ডার তৈরি করবে এবং .html, .ts, .css। স্পেস ফাইলগুলি তৈরি করবে))

আপনি যদি .spec ফাইল উত্পন্ন করতে না চান

> ng g c shopping-cart --skipTests true

আপনি যদি "অ্যাপ্লিকেশন" এর অধীনে কোনও নির্দিষ্ট ফোল্ডারে উপাদান তৈরি করতে চান

> ng g c ecommerce/shopping-cart

(আপনি ফোল্ডার কাঠামো "অ্যাপ / ইকমার্স / শপিং-কার্ট" পাবেন)


1

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

ng generate component "component_name"

বা

ng g c "component_name"

এর সাথে একটি নতুন ফোল্ডার তৈরি করা "component_name"হবে

উপাদান_নাম / উপাদান_নাম.কম / বিভাগ_এইচটিএমএল উপাদান_নাম / উপাদান_নাম.কম্পোনেন্ট.স্পেক.এসটি উপাদান_নাম / উপাদান_নাম.কম্পোনেন্ট.স উপাদান_নাম / উপাদান_নাম.কম

নতুন উপাদান স্বয়ংক্রিয়ভাবে মডিউল যুক্ত করা হবে।

কমান্ড অনুসরণ করে আপনি নির্দিষ্ট ফাইল তৈরি করা এড়াতে পারবেন

ng g c "component_name" --nospec


0

অ্যাঙ্গুলারে নতুন উপাদান উত্পন্ন করার প্রধানত দুটি উপায় রয়েছে ng g c <component_name>, অন্য উপায়টি হ'ল ব্যবহার করা ng generate component <component_name>। এই কমান্ডগুলির একটি ব্যবহার করে নতুন উপাদান তৈরি করা যায়।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.