Buat komponen ke modul tertentu dengan Angular-CLI

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?

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.

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

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

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:

--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

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

Untuk Angular v4 dan Above, cukup gunakan:

ng g c componentName -m ModuleName

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.

1. Pertama, Anda membuat modul dengan mengeksekusi.

ng g m modules/media

ini akan menghasilkan modul bernama folder mediadi dalam modules.

2. 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.

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

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

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'

Gunakan perintah sederhana ini:

ng g c users/userlist

users: Nama modul Anda.

userlist: Nama komponen Anda.

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

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

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

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.

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

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

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

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)

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.

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

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)