অ্যাঙ্গুলার-সিএলআই দিয়ে নির্দিষ্ট মডিউলে উপাদান তৈরি করুন

Question

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

নতুন মডিউলে কোনও উপাদান তৈরি করার কোনও উপায় আছে?

উদাহরণ: ng g module newModule

ng g component newComponent (কীভাবে এই উপাদানটিকে নতুন মডুলেলে যুক্ত করবেন ??)

কারণ কৌণিক-ক্লিপ ডিফল্ট আচরণ হ'ল সমস্ত নতুন উপাদান ভিতরে .োকানো app.module। আমার উপাদানটি কোথায় থাকবে তা আমি বেছে নিতে চাই, যাতে আমি পৃথক পৃথক মডিউল তৈরি করতে পারি এবং আমার সমস্ত উপাদান ভিতরে না থাকে app.module। কৌণিক-ক্লিপ ব্যবহার করে এটি করা সম্ভব বা আমাকে নিজেই এটি করতে হবে?

Answer 1

মডিউলের অংশ হিসাবে একটি উপাদান তৈরি করতে আপনার উচিত

1. ng g module newModule একটি মডিউল উত্পাদন করতে,
2. cd newModulenewModuleফোল্ডারে ডিরেক্টরি পরিবর্তন করতে
3. ng g component newComponent মডিউলটির শিশু হিসাবে একটি উপাদান তৈরি করতে।

আপডেট: কৌণিক 9

উপাদানটি তৈরি করার সময় আপনি কোন ফোল্ডারে রয়েছেন তা বিবেচ্য নয়।

1. ng g module NewMoudle একটি মডিউল উত্পাদন করতে।
2. ng g component new-module/new-component নিউ কম্পোনেন্ট তৈরি করতে।

দ্রষ্টব্য: যখন কৌণিক সিএলআই নতুন-মডিউল / নতুন-উপাদান দেখায়, এটি নতুন মডিউল -> নিউমোডুল এবং নতুন-উপাদান -> নিউকম্পোনেন্টের সাথে মিলের জন্য কেসটি বোঝে এবং অনুবাদ করে। এটি শুরুতে বিভ্রান্তি পেতে পারে, তাই সহজ উপায় হল মডিউল এবং উপাদানগুলির ফোল্ডারের নামের সাথে # 2-তে নামগুলি মেলা।

Comments

আপনি প্রকল্পের মূলটিতে থাকতে পারেন এবং মডিউলের নামের সাথে উপাদানটি উপসর্গ করতে পারেন ng g component moduleName/componentName।

— জয়চেইস

কৌণিক সিএলআই সংস্করণ ১. With.৮ সহ আমি যখনই একটি বিদ্যমান মডিউলটি পৃথক করি, তখন আমি সর্বদা 'নির্দিষ্ট মডিউলটি উপস্থিত নেই' এমন সিঙায় ত্রুটি পেতে থাকি। আমি নিম্নলিখিত কমান্ডটি চেষ্টা করার সময় এটি কাজ করেছিল: এনজি জেনারেট সার্ভিস সার্ভিস 1 - মডুল = মডিউল 1 / মডিউল 1.মডিউল.টস । দ্রষ্টব্য: আমার পরিষেবার নামটি সার্ভিস 1 এবং আমার মডিউলটির নাম মডিউল 1

— ডায়ালো

এটি নির্দিষ্ট ডিরেক্টরিতে একটি নতুন উপাদান তৈরি করবে তবে এটি মডিউলে নিবন্ধন করবে না। এটি app.module এ এটি নিবন্ধন করবে। আপনাকে --moduleবিকল্পটির মতো মডিউলটি নির্দিষ্ট করতে হবে :ng g component <your component> --module=<your module name>

— বিনিত সারভেদে

6 ই অক্টোবর, কৌণিক 6

— tom87416

সেকেলে. কোনটি মডিউলটি মডিউলটি রয়েছে তা দেখার জন্য কৌণিক 6 ফোল্ডার কাঠামোর উপর নির্ভর করে না Two একই ডিরেক্টরিতে দুটি মডিউল থাকতে পারে। @ দানিয়েলের উত্তর stackoverflow.com/a/44812014/511719 6. কৌণিক জন্য কাজ করে

— imafish

Answer 2

ng g component nameComponent --module=app.module.ts

Comments

অন্যান্য উত্তরগুলি কাজ করে তবে এটি সবচেয়ে কার্যকর। এর --dry-runশেষে কী যুক্ত হবে তা দেখার জন্য এটি একটি দুর্দান্ত

— বিচক্ষণতা

ng g component path/to/myComponent --module=app.module.ts --dry-runএকটি খুব দরকারী আদেশ; আপনার উপাদানটি সঠিক ডিরেক্টরিতে তৈরি হয়েছে তা নিশ্চিত করার জন্য।

— theman0123

Answer 3

নিশ্চিত নয় যে সম্ভবত লেখার সময় আলেকজান্ডার সিজিলস্কির উত্তর সঠিক ছিল কিনা, তবে আমি যাচাই করতে পারি যে এটি আর কাজ করে না। আপনি কৌনিক সিএলআই চালাচ্ছেন প্রকল্পের কোন ডিরেক্টরি তা বিবেচ্য নয়। যদি আপনি টাইপ করেন

ng g component newComponent

এটি একটি উপাদান তৈরি করে এবং এটিকে app.module.ts ফাইলে আমদানি করবে

এটিকে স্বয়ংক্রিয়ভাবে অন্য মডিউলে আমদানি করার জন্য আপনি সিএলআই ব্যবহার করতে পারবেন তা উল্লেখ করে

ng g component moduleName/newComponent

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

Comments

এটি আমার পক্ষে সঠিক উত্তর ছিল..এটি সঠিকভাবে কাজ করে। আমি ডক্সে এই তথ্য যুক্ত করার জন্য একটি টান অনুরোধ তৈরি করি। এর অন্যতম অবদানকারী আমাকে সিডি-আইএন অংশটি অপসারণ করতে বলুন ... এর শেষটি হবে ১. ng g module newModule ২. ng g component new-module/newComponentতাঁর মতে নতুন মডুলের পরিবর্তে নতুন-মডিউল হওয়া উচিত

— এলমার ড্যান্টাস

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

— চার্লি-গ্রিনম্যান

আমি বলব যে পুরো উত্তরটি হলng g component moduleName/newComponent -m moduleName

— স্লাভুগান

আমার ক্ষেত্রে উপাদানটির নাম মডিউলের নামের মতোই তাই আমি ng generate module {modComName}1 দিয়ে মডিউলটি তৈরি করেছি) 1 ফোল্ডার তৈরি করেছি 2) একই নামের ফোল্ডারের ভিতরে একটি মডিউল ফাইল তৈরি করেছি; কমান্ডটি ng generate component {modComName}আসলে 1) একই নামের ফোল্ডারের ভিতরে একটি উপাদান ফাইল তৈরি করেছে 2) উপাদানটি আমদানি করার জন্য মডিউলটি সংশোধন করেছে

— রেড মটর

আপনি যদি একটি মডিউল তৈরি করেন এবং এটি একটি বেস মডিউলটিতে আমদানি করেন তবে সাবধান হন; অ্যারের শেষেng আমদানি যুক্ত করে ; তবে আপনি চাইতে পারেন: "কনফিগারেশনের রুটের ক্রমটি গুরুত্বপূর্ণ এবং এটি ডিজাইনের মাধ্যমে।"

— লাল মটর

Answer 4

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

মডিউলটি তৈরি করতে এটি চালান:

ng g module foo

Foo মডিউল ফোল্ডারের ভিতরে উপাদান তৈরি করতে এবং এটি foo.module.ts এর ঘোষণা সংকলনে যোগ করতে এটি চালান:

ng g component foo/fooList --module=foo.module.ts

এবং ক্লিপটি এই জাতীয় মডিউল এবং উপাদানগুলি ভিজিয়ে দেবে:

--EDIT কৌনিক ক্লাইয়ের নতুন সংস্করণটি আলাদাভাবে আচরণ করে। 1.5.5 কোনও মডিউল ফাইলের নাম চায় না তাই v1.5.5 সহ কমান্ডটি হওয়া উচিত

ng g component foo/fooList --module=foo

Comments

জন্য ইয়ে --moduleযুক্তি; ডক্স বলুন "ঘোষণা মডিউল স্পেসিফিকেশন অনুমতি দেয়।" ; আপনি যে মডিউলটি তৈরি করতে চলেছেন তা আমদানি করার জন্য --moduleকোন বিদ্যমান মডিউলটি পরিবর্তন করতে হবে তা উল্লেখ করব

— রেড মটরটি

@TheRedPea আমার বিশ্বাস আপনি বলতে চাইছেন "- মডেলটি নির্দিষ্ট করে যে কোন উপাদানকে আপনি যে উপাদানটি আমদানি করতে হবে তা পরিবর্তন করতে হবে ..."

— কোবলস্টিংকস

হ্যাঁ আপনি ঠিক বলেছেন! বিদ্যমান উপাদানটি

— রেড মটর

Answer 5

আপনি কমান্ডের নীচে চেষ্টা করতে পারেন, যা

ng -> Angular 
g  -> Generate
c  -> Component
-m -> Module 

তাহলে আপনার আদেশটি হবে:

ng g c user/userComponent -m user.module

Answer 6

কৌণিক v4 এবং উপরে জন্য, সহজভাবে ব্যবহার করুন:

ng g c componentName -m ModuleName

Comments

Specified module does not existমডিউলটি বিদ্যমান থাকাকালীন একটি ত্রুটি

— ফেলেছিল

আপনি মডিউলটির নাম নির্দিষ্ট করেন না, আপনি মডিউলটির ফাইলের নাম উল্লেখ করেন।

— রজার

মোহন মত কাজ! উদাহরণস্বরূপ যদি আপনার মডিউল ফাইল হয় user-settings.module.tsএবং আপনি কোনও উপাদান যুক্ত করতে চান তবে কমান্ডটি হ'ল public-info:ng g c PublicInfo -m user-settings

— সর্পিল

এটি সহজ এবং পরিষ্কার উত্তর!

— বার্না টেকসে

Answer 7

এটিই আমার পক্ষে কাজ করেছে:

1 -->  ng g module new-module

2 -->  ng g c new-module/component-test --module=new-module/new-module.module.ts

আপনি যদি কোনও উপাদান এর ডিরেক্টরি ছাড়াই উত্পাদন করতে চান তবে --flat পতাকা ব্যবহার করুন ।

Comments

.ts লেখার দরকার নেই

— ল্যাপেনকভ ভ্লাদিমির

--মডিউল = পাথ-টু-মডিউল আমাকে ফর্মটি ধন্যবাদ জানায় @ মোহাম্মদ মক্কাউই

— ইয়ান পোস্টন

Answer 8

1. প্রথমে আপনি নির্বাহ করে একটি মডিউল তৈরি করেন।

ng g m modules/media

এটি mediaভিতরে modulesফোল্ডার নামে পরিচিত একটি মডিউল তৈরি করবে ।

2. দ্বিতীয়ত, আপনি এই মডিউলটিতে যুক্ত একটি উপাদান তৈরি করেন

ng g c modules/media/picPick --module=modules/media/media.module.ts

কমান্ড প্রথম অংশ ng g c modules/media/picPickনামক একটি উপাদান ফোল্ডারের উত্পন্ন করবে picPickভিতরে modules/mediaজাদুকরী আমাদের নতুন ধারণ ফোল্ডারের mediaমডিউল।

দ্বিতীয় অংশটি আমাদের নতুন picPickউপাদানটিকে mediaমডিউলটিতে মডিউল ফাইলটিতে আমদানি করে এবং এই মডিউলটির declarationsঅ্যারেতে যুক্ত করে ঘোষণা করবে ending

Comments

এটি কীভাবে প্রশ্নের উত্তর দেয় তা দয়া করে আরও ব্যাখ্যা করতে পারেন?

— স্টার্লিং আর্চার

আপনার নোটের জন্য আপনাকে ধন্যবাদ, আমি ভবিষ্যতের পাঠক হিসাবে আমি আমার উত্তরটি সম্পাদনা করেছি @

— কেরিন্ট

Answer 9

মডিউল স্তরে যান / আমরা মূল স্তরেও থাকতে পারি এবং নীচের কমান্ডগুলি টাইপ করতে পারি

ng g component "path to your component"/NEW_COMPONENT_NAME -m "MODULE_NAME"

উদাহরণ:

ng g component common/signup/payment-processing/OnlinePayment -m pre-login.module

Answer 10

প্রথম উত্পাদন মডিউল:

ng g m moduleName --routing

এটি একটি মডিউলনেম ফোল্ডার তৈরি করবে তারপরে মডিউল ফোল্ডারে নেভিগেট করবে

cd moduleName

এবং এর পরে তৈরি উপাদান:

ng g c componentName --module=moduleName.module.ts --flat

মডিউল ফোল্ডারের ভিতরে চাইল্ড ফোল্ডার তৈরি না করার জন্য - ফ্ল্যাট ব্যবহার করুন

Answer 11

অ্যাপ্লিকেশনটিতে একাধিক মডিউল নিয়ে আমার একই সমস্যা রয়েছে। কোনও উপাদান কোনও মডিউলে তৈরি করা যায় তাই একটি উপাদান তৈরি করার আগে আমাদের নির্দিষ্ট মডিউলটির নাম উল্লেখ করতে হবে।

'ng generate component newCompName --module= specify name of module'

Answer 12

এই সাধারণ কমান্ডটি ব্যবহার করুন:

ng g c users/userlist

users: আপনার মডিউল নাম।

userlist: আপনার উপাদানটির নাম।

Answer 13

কৌণিক ডক্স অনুসারে নির্দিষ্ট মডিউলের জন্য একটি উপাদান তৈরি করার উপায় হ'ল,

ng g component <directory name>/<component name>

"ডিরেক্টরি নাম" = যেখানে CLI বৈশিষ্ট্য মডিউলটি তৈরি করেছে

উদাহরণ: -

ng generate component customer-dashboard/CustomerDashboard

এটি গ্রাহক-ড্যাশবোর্ড ফোল্ডারের মধ্যে নতুন উপাদানগুলির জন্য একটি ফোল্ডার তৈরি করে এবং গ্রাহকড্যাশবোর্ডকম্পোনেন্ট সহ বৈশিষ্ট্য মডিউল আপডেট করে

Answer 14

প্রথম রান ng g module newModule । তারপরে দৌড়াওng g component newModule/newModule --flat

Answer 15

আমি নির্দিষ্ট রুট ফোল্ডার সহ উপাদান ভিত্তিক শিশু মডিউল তৈরি করেছি

আমি উল্লিখিত নীচে ক্লাইম কমান্ড, দয়া করে চেক আউট

ng g c Repair/RepairHome -m Repair/repair.module

মেরামত হ'ল আমাদের শিশু মডিউলটির রুট ফোল্ডার

-ম হ'ল -মডিউল

পরিমানের জন্য সি

উত্স জন্য জি

Answer 16

একটি কৌণিক 9 অ্যাপ্লিকেশন ভাসিয়ে দেওয়ার সময় আমি আজ এই সমস্যাটিতে এসে পৌঁছেছি। আমি যখনই মডিউলটির সাথে .module.tsবা .moduleমডিউলটির সাথে যুক্ত করেছিলাম "মডিউলটি ত্রুটির উপস্থিতি নেই" পেয়েছি । ক্লিপটির কোনও এক্সটেনশন ছাড়াই মডিউলের নাম প্রয়োজন। ধরে নিলাম আমার একটি মডিউলের নাম ছিল:, আমি যে brands.module.tsকমান্ডটি ব্যবহার করেছি তা ছিল

ng g c path/to/my/components/brands-component -m brands --dry-run

--dry-runএকবার আপনি ফাইলের কাঠামোটি সঠিক হওয়ার বিষয়টি নিশ্চিত করেছেন remove

Answer 17

একটি সাধারণ প্যাটার্ন হ'ল রুট, একটি অলস বোঝা মডিউল এবং একটি উপাদান সহ একটি বৈশিষ্ট্য তৈরি করা।

রুট: myapp.com/feature

অ্যাপ্লিকেশান-routing.module.ts

{ path: 'feature', loadChildren: () => import('./my-feature/my-feature.module').then(m => m.MyFeatureModule) },

ফাইল গঠন:

app   
└───my-feature
│   │   my-feature-routing.module.ts
│   │   my-feature.component.html
│   │   my-feature.component.css
│   │   my-feature.component.spec.ts
│   │   my-feature.component.ts
│   │   my-feature.module.ts

এই সমস্ত ক্লাইমে এর সাথে করা যেতে পারে:

ng generate module my-feature --module app.module --route feature

বা সংক্ষিপ্ত

ng g m my-feature --module app.module --route feature

অথবা আপনি যদি নামটি ছেড়ে যান তবে ক্লিপ আপনাকে এর জন্য অনুরোধ করবে। আপনার বেশ কয়েকটি বৈশিষ্ট্য তৈরি করার দরকার হলে খুব দরকারী

ng g m --module app.module --route feature

Answer 18

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

অ্যাপটিতে একটি নতুন কৌণিক 4 উপাদান যুক্ত করতে কমান্ডটি ব্যবহার করুন ng g component componentName। এই কমান্ডটি কার্যকর করার পরে, কৌণিক সিএলআই একটি ফোল্ডার যুক্ত component-nameকরে src\app। এছাড়াও, এর উল্লেখগুলি src\app\app.module.tsস্বয়ংক্রিয়ভাবে ফাইলটিতে যুক্ত করা হয়।

একটি উপাদান একটি @Componentশোভাকর ফাংশন থাকবে classযার পরে একটি exportএড করা প্রয়োজন। @Componentপ্রসাধক ফাংশন মেটা ডেটা গ্রহণ করে।

কৌণিক সিএলআই ব্যবহার করে কৌণিক 4 অ্যাপের নির্দিষ্ট ফোল্ডারে একটি উপাদান যুক্ত করুন

একটি নির্দিষ্ট ফোল্ডারে একটি নতুন উপাদান যুক্ত করতে কমান্ডটি ব্যবহার করুন ng g component folderName/componentName

Answer 19

আপনার যদি .angular-cli.json এ ঘোষিত একাধিক অ্যাপস থাকে (উদাহরণস্বরূপ বৈশিষ্ট্য মডিউলে কাজ করার ক্ষেত্রে)

"apps": [{
    "name": "app-name",
    "root": "lib",
    "appRoot": ""
}, {...} ]

আপনি পারেন:

ng g c my-comp -a app-name

-a মানে - অ্যাপ (নাম)

Answer 20

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

ng g c <module-directory-name>/<component-name>

এই কমান্ডটি মডিউলে স্থানীয় উপাদান তৈরি করবে। অথবা আপনি প্রথমে টাইপ করে ডিরেক্টরি পরিবর্তন করতে পারেন।

cd <module-directory-name>

এবং তারপরে উপাদান তৈরি করুন।

ng g c <component-name>

দ্রষ্টব্য: <> এ সংযুক্ত কোডটি ব্যবহারকারীর নির্দিষ্ট নাম উপস্থাপন করে।

Answer 21

1.- যথারীতি আপনার বৈশিষ্ট্য মডিউল তৈরি করুন।

ng generate module dirlevel1/module-name

2.- আপনি নির্দিষ্ট করতে পারেন মূল পথ আপনার প্রকল্পের --module (শুধুমাত্র --module এ, (/) আপনার রুট পয়েন্ট প্রকল্প রুট এবং ব্যবস্থার আমুল নয় !!! )

ng generate component dirlevel1/component-name --module /src/app/dirlevel1/module-name.module.ts

বাস্তব উদাহরণ:

ng generate module stripe/payment-methods-list

ng generate component stripe/payment-methods-list --module=/src/app/stripe/payment-methods-list/payment-methods-list.module.ts 

আউটপুট:

CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.scss (0 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.html (39 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.spec.ts (768 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.ts (322 bytes)
UPDATE src/app/stripe/payment-methods-list/payment-methods-list.module.ts (311 bytes)
[OK] Generated component!

কৌণিক সিএলআই এর সাথে পরীক্ষিত: 9.1.4

Answer 22

ng g c componentName --module=path-to-your-module-from-src-folder

উদাহরণ:

ng g c testComponent --module=/src/app/home/test-component/test-component.module

Answer 23

---

নির্দিষ্ট মডিউলে একটি মডিউল, পরিষেবা এবং উপাদান তৈরি করুন

Basic:

    ng g module chat     
    ng g service chat/chat -m chat
    ng g component chat/chat-dialog -m chat

    In chat.module.ts:
        exports: [ChatDialogComponent],
        providers: [ChatService]

    In app.module.ts:

        imports: [
            BrowserModule,
            ChatModule
        ]

    Now in app.component.html:
        <chat-dialog></chat-dialog>


LAZY LOADING:
    ng g module pages --module app.module --route pages

        CREATE src/app/pages/pages-routing.module.ts (340 bytes)
        CREATE src/app/pages/pages.module.ts (342 bytes)
        CREATE src/app/pages/pages.component.css (0 bytes)
        CREATE src/app/pages/pages.component.html (20 bytes)
        CREATE src/app/pages/pages.component.spec.ts (621 bytes)
        CREATE src/app/pages/pages.component.ts (271 bytes)
        UPDATE src/app/app-routing.module.ts (8611 bytes)       

    ng g module pages/forms --module pages/pages.module --route forms

        CREATE src/app/forms/forms-routing.module.ts (340 bytes)
        CREATE src/app/forms/forms.module.ts (342 bytes)
        CREATE src/app/forms/forms.component.css (0 bytes)
        CREATE src/app/forms/forms.component.html (20 bytes)
        CREATE src/app/forms/forms.component.spec.ts (621 bytes)
        CREATE src/app/forms/forms.component.ts (271 bytes)
        UPDATE src/app/pages/pages-routing.module.ts (437 bytes)