Bagaimana cara menghasilkan komponen dalam folder tertentu dengan angular-cli?


220

Saya menggunakan angualr4 dengan angular-cli dan saya dapat membuat komponen baru dengan perintah berikut.

E:\HiddenWords>ng generate component plainsight

Tapi saya perlu membuat komponen anak di dalam plainsight. Apakah ada cara untuk melakukan dengan angular-cli?


15
ng buat komponen / path / dari / the / app / folder / plainsight
maxime1992

4
seperti @Maxime disebutkan, atau cd ke direktori
Z. Bagley

Jawaban:


124

Direktori ng g component plainsight/some-namemembuat baru ketika kita menggunakannya.

Hasil akhir adalah:

plainsight/some-name/some-name.component.ts

Untuk menghindari itu, gunakan opsi flat ng g component plainsight/some-name --flat dan itu akan menghasilkan file tanpa membuat folder baru

plainsight/some-name.component.ts

11
opsi --flat adalah apa yang saya cari!
kecelakaan

1
@ user3611927 - flat adalah jawabannya karena akan menggunakan folder yang ada dan hanya membuat folder yang tidak ada. Sempurna!! Ini harus menjadi default IMHO sebelumnya
Andrew Day

38

Metode cepat, Sederhana dan Bebas Kesalahan

yaitu Anda ingin membuat komponen dalam app/componentfolder, lalu ikuti langkah-langkah ini

  1. Klik kanan pada folder yang ingin Anda buat komponen
  2. Pilih Open in Command Promptopsi
  3. Di terminal baru (Anda akan melihat jalur yang Anda pilih), lalu ketik ng g c my-new-component

Anda juga dapat memeriksa proses ini melalui gambar ini

masukkan deskripsi gambar di sini


1
Anda jenius atau saya hanya fokin stoopid ... Cara terbaik yang pernah ada!
Ap0st0l

19

ng g c component-name

Untuk menentukan lokasi khusus: ng g c specific-folder/component-name

di sini component-nameakan dibuat di dalam folder spesifik.

Pendekatan Similarl dapat digunakan untuk menghasilkan komponen lain seperti directive, pipe, service, class, guard, interface, enum, module, dll


12

kode yang lebih pendek untuk menghasilkan komponen: ng g c component-name
untuk menentukan lokasinya:ng g c specific-folder/component-name


Info tambahan
kode lebih pendek untuk menghasilkan arahan: ng g d directive-name
untuk menentukan lokasinya:ng g d specific-folder/directive-name



4

Opsi di atas tidak berfungsi untuk saya karena tidak seperti membuat direktori atau file di terminal, ketika CLI menghasilkan komponen, itu menambahkan path src / app secara default ke jalur yang Anda masukkan.

Jika saya menghasilkan komponen dari folder aplikasi utama saya seperti itu (CARA YANG SALAH)

ng g c ./src/app/child/grandchild 

komponen yang dihasilkan adalah ini:

src/app/src/app/child/grandchild.component.ts

jadi saya hanya perlu mengetik

ng g c child/grandchild 

Semoga ini bisa membantu seseorang


3

Saya tidak beruntung dengan jawaban di atas (termasuk --flat), tetapi yang berhasil bagi saya adalah:

cd path/to/specific/directory

Dari sana, saya menjalankan ng g c mynewcomponent


1

Sederhana

ng g component plainsight/some-name

Ini akan membuat folder "plainsight" dan menghasilkan beberapa komponen nama di dalamnya.


1

Coba gunakan

ng g component plainsight/some-name.component.ts

Atau coba secara manual, jika Anda merasa lebih nyaman.


1

Setelah Anda berada di direktori proyek Anda. gunakan cd path/to/directorykemudian gunakan ng g c component_name --spec=falseitu mengotomatiskan segalanya dan bebas dari kesalahan

yang g cberarti menghasilkan komponen



1

CLI sudut menyediakan semua perintah yang Anda butuhkan dalam pengembangan aplikasi Anda. Untuk kebutuhan spesifik Anda, Anda dapat dengan mudah menggunakan ng g( ng generate) untuk menyelesaikan pekerjaan.

ng g c directory/component-nameakan menghasilkan component-namekomponen dalam directoryfolder.

Berikut ini adalah peta dari beberapa perintah sederhana yang dapat Anda gunakan dalam aplikasi Anda.

  1. ng g c comp-nameatau ng generate component comp-nameuntuk membuat komponen dengan nama 'nama-comp'
  2. ng g s serv-nameatau ng generate service serv-nameuntuk membuat layanan dengan nama 'serv-name'
  3. ng g m mod-nameatau ng generate module mod-nameuntuk membuat modul dengan nama 'mod-name'
  4. ng g m mod-name --routingatau ng generate module mod-name --routinguntuk membuat modul dengan nama 'mod-name' dengan perutean sudut

Semoga ini membantu!

Semoga berhasil!


1

Jika Anda menggunakan VSCode, pertimbangkan untuk menggunakan Konsol Angular

Ini menyediakan antarmuka untuk CLI Angular. Anda akan melihat opsi untuk menentukan jalur.

CLI Angular sangat kuat dan dapat diperluas. Bahkan, ada begitu banyak kemampuan sehingga sangat membantu bagi pengembang untuk memiliki semua opsi konfigurasi yang berbeda untuk setiap perintah yang tersedia bagi mereka.

Dengan Angular Console, Anda akan mendapatkan rekomendasi dan dapat menarik bahkan fitur yang paling mudah dilupakan atau jarang digunakan!

Konsol Angular, pertama dan terpenting, merupakan cara yang lebih produktif untuk bekerja dengan apa yang disediakan oleh CLI Angular.


0

Pertama untuk membuat Komponen yang perlu Anda gunakan: -

  • ng nama komponen gc

    Dengan menggunakan perintah di atas, Komponen Baru akan dibuat dalam folder dengan
    (nama komponen) yang Anda tentukan di atas.

Tetapi jika Anda perlu membuat komponen di dalam komponen lain atau di folder tertentu: -

  • ng gc componentname / newComponentName

0

Perlu menggunakan --dryRun saat menggunakan direktori khusus

Anda dapat melewati jalur direktori khusus Anda bersama dengan ngperintah.

ng g c myfolder\mycomponent

Tetapi ada kemungkinan Anda melewatkan ejaan path dan folder baru dibuat atau direktori target berubah. Untuk alasan dryRunini sangat membantu. Ini menampilkan output tentang bagaimana perubahan akan terpengaruh.
masukkan deskripsi gambar di sini

Setelah memverifikasi hasil, Anda dapat menjalankan perintah yang sama tanpa -dmembuat perubahan.

--dryRun = true | false

Ketika benar, telusuri dan laporkan aktivitas tanpa menuliskan hasilnya.

Default: false

Alias: -d

Doc Resmi: - https://angular.io/cli/generate

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.