Buat komponen ke modul tertentu dengan Angular-CLI


170

Saya mulai menggunakan angular-cli dan saya sudah membaca banyak untuk menemukan jawaban tentang apa yang ingin saya lakukan ... tidak berhasil, jadi saya datang ke sini.

Apakah ada cara untuk membuat komponen ke modul baru?

misalnya: ng g module newModule

ng g component newComponent (bagaimana cara menambahkan komponen ini ke newModule ??)

karena perilaku default angular-cli adalah untuk meletakkan semua komponen baru di dalamnya app.module. Saya ingin memilih di mana komponen saya akan, sehingga saya dapat membuat modul terpisah dan tidak akan memiliki semua komponen saya di dalamnya app.module. Dimungkinkan untuk melakukan itu dengan menggunakan angular-cli atau apakah saya harus melakukan ini secara manual?

Jawaban:


216

Untuk membuat komponen sebagai bagian dari modul, Anda harus

  1. ng g module newModule untuk menghasilkan modul,
  2. cd newModuleuntuk mengubah direktori ke dalam newModulefolder
  3. ng g component newComponent untuk membuat komponen sebagai anak dari modul.

PEMBARUAN: Sudut 9

Sekarang tidak masalah apa folder Anda saat menghasilkan komponen.

  1. ng g module NewMoudle untuk menghasilkan modul.
  2. ng g component new-module/new-component untuk membuat NewComponent.

Catatan: Ketika CLI Angular melihat modul-baru / komponen-baru, ia memahami dan menerjemahkan kasus untuk mencocokkan modul-baru -> NewModule dan komponen baru -> NewComponent. Ini bisa membingungkan pada awalnya, jadi cara mudah adalah mencocokkan nama-nama di # 2 dengan nama folder untuk modul dan komponen.


92
Anda juga dapat tetap di root proyek dan awalan komponen dengan nama modul ng g component moduleName/componentName.
JayChase

3
Dengan Angular CLI versi 1.6.8, saya selalu mendapatkan kesalahan karena 'modul yang ditentukan tidak ada', ketika saya memisahkan modul yang ada. Ini bekerja ketika saya mencoba perintah berikut: ng menghasilkan service service1 --module = module1 / module1.module.ts . Catatan: nama layanan saya adalah service1 dan nama modul saya module1
Diallo

8
Ini akan membuat komponen baru di direktori yang ditentukan tetapi tidak akan mendaftarkannya di modul. Ini akan mendaftarkannya di app.module. Anda perlu menentukan modul dengan --moduleopsi seperti:ng g component <your component> --module=<your module name>
Vinit Sarvade

3
usang pada 6 Oktober, Angular 6
tom87416

4
Ketinggalan jaman. Angular 6 tidak bergantung pada struktur folder untuk melihat modul mana komponennya berada. Dua modul bisa berada di direktori yang sama. @ daniel jawaban stackoverflow.com/a/44812014/511719 berfungsi untuk Angular 6.
imafish

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

10
jawaban yang lain berfungsi, tetapi ini yang paling efisien. Nilainya menambahkan --dry-runpada akhir itu hanya untuk melihat apa yang akan terpengaruh, itu adalah pemeriksaan kewarasan yang bagus
tony09uk

ng g component path/to/myComponent --module=app.module.ts --dry-runadalah perintah yang sangat berguna; hanya untuk memastikan komponen Anda dibuat di direktori yang benar.
theman0123

74

Tidak yakin apakah mungkin jawaban Alexander Ciesielski benar pada saat penulisan, tetapi saya dapat memverifikasi bahwa ini tidak lagi berfungsi. Tidak masalah direktori mana dalam proyek yang Anda jalankan Angular CLI. Jika Anda mengetik

ng g component newComponent

itu akan menghasilkan komponen dan mengimpornya ke file app.module.ts

Satu-satunya cara Anda dapat menggunakan CLI untuk secara otomatis mengimpornya ke modul lain adalah dengan menentukan

ng g component moduleName/newComponent

di mana moduleName adalah modul yang sudah Anda tetapkan dalam proyek Anda. Jika moduleName tidak ada, itu akan meletakkan komponen di moduleName / newComponent direktori tetapi masih mengimpornya ke app.module


2
itu adalah jawaban yang tepat untuk saya saat itu..bekerja dengan baik. Saya membuat permintaan tarik untuk menambahkan informasi ini ke dokumen. Salah satu kontributornya meminta saya untuk menghapus bagian cd-ing .. pada akhirnya akan menjadi 1. ng g module newModule 2. ng g component new-module/newComponentmenurutnya harus modul baru dan bukan modul baru
Elmer Dantas

Hanya untuk menunjukkan, menggunakan teknik oleh Alexander Ciesielski dan berfungsi seperti yang diharapkan. Saya harus perhatikan, saya tidak perlu membuat komponen hanya diperlukan untuk membuat folder. Jadi saya hanya mkdirfolder, dan kemudian menjalankan komponen newComponent di dalam folder yang baru dibuat.
Charlie-Greenman

2
Saya akan mengatakan bahwa jawaban lengkapnya adalahng g component moduleName/newComponent -m moduleName
slavugan

Dalam kasus saya nama komponen sama dengan nama modul jadi saya membuat modul dengan ng generate module {modComName}1) Membuat folder 2) Membuat file modul di dalam folder dengan nama yang sama; perintah ng generate component {modComName}sebenarnya 1) Membuat file komponen di dalam folder dengan nama yang sama 2) Memodifikasi modul untuk mengimpor komponen
The Red Pea

Hati-hati jika Anda membuat modul dan mengimpornya ke modul dasar; ngmenambahkan impor ke akhir array; tetapi Anda mungkin ingin: "Urutan rute dalam hal konfigurasi dan ini adalah desain."
Kacang Merah

37

Saya tidak menemukan jawaban yang menunjukkan cara menggunakan cli untuk menghasilkan komponen di dalam folder modul tingkat atas, dan juga memiliki komponen yang secara otomatis menambahkan koleksi deklarasi modul.

Untuk membuat modul, jalankan ini:

ng g module foo

Untuk membuat komponen di dalam folder modul foo dan menambahkannya ke koleksi deklarasi foo.module.ts, jalankan ini:

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

Dan cli akan merancah modul dan komponen seperti ini:

masukkan deskripsi gambar di sini

--EDIT versi baru dari CLI sudut berperilaku berbeda. 1.5.5 tidak menginginkan nama file modul sehingga perintah dengan v1.5.5 seharusnya

ng g component foo/fooList --module=foo

1
Yay untuk --moduleargumen; yang docs mengatakan "Memungkinkan spesifikasi modul menyatakan." ; Saya akan menambahkan --modulemenentukan yang ada modul harus dimodifikasi untuk mengimpor modul Anda tentang untuk membuat
The Red Pea

2
@TheRedPea Saya yakin Anda bermaksud mengatakan "--module menentukan modul mana yang harus dimodifikasi untuk mengimpor komponen Anda ..."
cobolstinks

Ya kamu benar! Modul yang ada dimodifikasi dengan mengacu pada komponen
The Red Pea

13

Anda dapat mencoba perintah di bawah ini, yang menjelaskan,

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

Maka perintah Anda akan seperti:

ng g c user/userComponent -m user.module

9

Untuk Angular v4 dan Above, cukup gunakan:

ng g c componentName -m ModuleName

1
Melempar kesalahan ketika Specified module does not existmodul ada
Pardeep Jain

1
Anda tidak menentukan nama modul, Anda menentukan nama file modul.
Roger

1
Bekerja seperti pesona! mis. jika file modul user-settings.module.tsAnda dan Anda ingin menambahkan komponen public-infomaka perintahnya adalah:ng g c PublicInfo -m user-settings
Spiral Out

1
Ini adalah jawaban yang paling sederhana dan paling bersih!
Barna Tekse

8

inilah yang bekerja untuk saya:

1 -->  ng g module new-module

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

Jika Anda ingin membuat komponen tanpa direktori, gunakan --flat flag.


tidak perlu menulis .ts
Lapenkov Vladimir

--module = path-to-module bekerja dari saya terima kasih @Mohamed Makkaoui
Ian Poston Framer

8
  1. Pertama, Anda membuat modul dengan mengeksekusi.
ng g m modules/media

ini akan menghasilkan modul bernama folder mediadi dalam modules.

  1. Kedua, Anda menghasilkan komponen yang ditambahkan ke modul ini
ng g c modules/media/picPick --module=modules/media/media.module.ts

bagian pertama dari perintah ng g c modules/media/picPickakan menghasilkan folder komponen yang disebut picPickdi dalam modules/mediafolder penyihir berisi mediamodul baru kami .

bagian kedua akan membuat picPickkomponen baru kita dideklarasikan dalam mediamodul dengan mengimpornya dalam file modul dan menambahkannya ke declarationsarray modul ini.

pohon yang bekerja

masukkan deskripsi gambar di sini


2
Bisakah Anda menjelaskan lebih lanjut tentang bagaimana ini menjawab pertanyaan?
Sterling Archer

Terima kasih atas catatan Anda, saya mengedit jawaban saya karena saya adalah pembaca masa depan @CertainPerformance
Elhakim

3

Pergi ke level modul / kita juga bisa berada di level root dan ketik perintah di bawah ini

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

Contoh:

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

3

Modul pembangkit pertama:

ng g m moduleName --routing

Ini akan membuat folder moduleName lalu Arahkan ke folder module

cd moduleName

Dan setelah itu menghasilkan komponen:

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

Gunakan --flat untuk tidak membuat folder anak di dalam folder modul


1

Saya mengalami masalah serupa dengan beberapa modul dalam aplikasi. Sebuah komponen dapat dibuat untuk modul apa pun sehingga sebelum membuat komponen kita harus menentukan nama modul tertentu.

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

1

Gunakan perintah sederhana ini:

ng g c users/userlist

users: Nama modul Anda.

userlist: Nama komponen Anda.


1

Menurut dokumen Angular cara untuk membuat komponen untuk modul tertentu adalah,

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

"nama direktori" = tempat CLI membuat modul fitur

Contoh: -

ng generate component customer-dashboard/CustomerDashboard

Ini menghasilkan folder untuk komponen baru dalam folder dashboard pelanggan dan memperbarui modul fitur dengan komponen CustomerDashboardComponent


1

Jalankan pertama ng g module newModule . Lalu laring g component newModule/newModule --flat


1

Saya membuat modul anak berbasis komponen dengan Folder Root tertentu

Perintah cli di bawah ini saya tentukan, silakan periksa

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

Perbaikan adalah Root Folder dari modul anak kami

-m adalah --module

c untuk perhitungan

g untuk menghasilkan


1

Saya mengalami masalah ini hari ini sementara perancah aplikasi Angular 9. Saya mendapat "modul tidak ada kesalahan" setiap kali saya menambahkan .module.tsatau .moduleke nama modul. Cli hanya membutuhkan nama modul tanpa ekstensi. Dengan asumsi saya memiliki nama modul:, brands.module.tsperintah yang saya gunakan adalah

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

hapus --dry-runsetelah Anda mengonfirmasi struktur file sudah benar.


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

contoh:

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

1

Pola umum adalah membuat fitur dengan rute, modul yang dimuat malas, dan komponen.

Rute: myapp.com/feature

app-routing.module.ts

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

Struktur file:

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

Ini semua bisa dilakukan di cli dengan:

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

Atau lebih pendek

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

Atau jika Anda meninggalkan nama cli akan meminta Anda untuk itu. Sangat berguna ketika Anda perlu membuat beberapa fitur

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

0

Tambahkan komponen ke aplikasi Angular 4 menggunakan Angular CLI

Untuk menambahkan komponen Angular 4 baru ke aplikasi, gunakan perintah ng g component componentName. Setelah mengeksekusi perintah ini, Angular CLI menambahkan folder di component-namebawah src\app. Juga, referensi yang sama ditambahkan ke src\app\app.module.tsfile secara otomatis.

Komponen harus memiliki @Componentfungsi dekorator yang diikuti oleh komponen classyang perlu exportdiedit. Fungsi @Componentdekorator menerima data meta.

Tambahkan komponen ke folder spesifik aplikasi Angular 4 menggunakan Angular CLI

Untuk menambahkan komponen baru ke folder tertentu, gunakan perintah ng g component folderName/componentName


0

Jika Anda memiliki beberapa aplikasi yang dideklarasikan dalam .angular-cli.json (mis. Dalam kasus bekerja pada modul fitur)

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

Kamu bisa :

ng g c my-comp -a app-name

-a singkatan --app (nama)


0

Saya menggunakan perintah khusus ini untuk menghasilkan komponen di dalam modul.

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

Perintah ini akan menghasilkan komponen lokal ke modul. atau Anda dapat mengubah direktori terlebih dahulu dengan mengetik.

cd <module-directory-name>

dan kemudian membuat komponen.

ng g c <component-name>

Catatan: kode terlampir dalam <> mewakili nama spesifik pengguna.


0

1.- Buat modul fitur Anda seperti biasa.

ng generate module dirlevel1/module-name

2.- Anda dapat menentukan ROOT PATH dari proyek Anda di --module (hanya dalam --module, (/) menunjuk ke ROOT PROYEK dan BUKAN SISTEM ROOT !!! )

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

Contoh nyata:

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 

Keluaran:

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!

Diuji dengan Angular CLI: 9.1.4


0

Buat modul, layanan, dan komponen dalam modul tertentu

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)
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.