Cara membuat komponen baru di Angular 4 menggunakan CLI

Dalam sudut 2 saya gunakan

ng g c componentname

Tapi itu tidak didukung di Angular 4, jadi saya membuatnya secara manual, tetapi itu menunjukkan kesalahan bahwa itu bukan modul.

Menghasilkan dan melayani proyek Angular melalui server pengembangan -

Pertama pergi ke Direktori Proyek Anda dan ketik di bawah ini -

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

Di sini " D: \ Angular \ my-app> " adalah Direktori Proyek aplikasi Angular saya dan " Pengguna " adalah nama komponennya.

Commonds terlihat seperti -

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)

Di Angular4 ini akan bekerja sama. Jika Anda mendapatkan kesalahan, saya pikir masalah Anda ada di tempat lain.

Dalam tipe command prompt

ng menghasilkan komponen YOURCOMPONENTNAME

Bahkan ada singkatan untuk ini: perintah generatedapat digunakan sebagai gdan componentsebagai c:

ng gc YOURCOMPONENTNAME

Anda dapat menggunakan ng --help, ng g --helpatau ng g c --helpuntuk dokumen.

Tentu saja ganti nama YOURCOMPONENTNAME menjadi nama yang ingin Anda gunakan.

Docs: angular-cli akan menambahkan referensi ke komponen, arahan, dan pipa secara otomatis di app.module.ts.

Pembaruan: Ini masih berfungsi di Angular versi 8.

1) pertama buka Direktori Proyek Anda

2) lalu Jalankan di bawah Perintah di terminal.

ng generate component componentname

ATAU

ng g component componentname

3) setelah itu Anda akan melihat output seperti ini,

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)

Jika Anda ingin membuat komponen baru tanpa .specfile, Anda dapat menggunakan

ng g c component-name --spec false

Anda dapat menemukan opsi ini menggunakan ng g c --help

ng g component componentname

Ini menghasilkan komponen dan menambahkan komponen ke deklarasi modul.

saat membuat komponen secara manual, Anda harus menambahkan komponen dalam deklarasi modul seperti ini:

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

Pastikan Anda berada di direktori proyek Anda di baris CMD

    ng g component componentName

Untuk membuat komponen di bawah folder tertentu

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

Baris ini akan membuat nama folder 'karyawan', di bawahnya akan dibuat komponen 'buat-karyawan'.

tanpa membuat folder apa pun

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

ng g c componentname

Ini akan membuat 4 file berikut:

1. componentname.css
2. componentname.html
3. componentname.spec.ts
4. componentname.ts

ng menghasilkan component_name komponen tidak berfungsi dalam kasus saya karena alih-alih menggunakan 'app' sebagai nama folder proyek, saya mengganti namanya menjadi yang lain. Saya kembali mengubahnya menjadi aplikasi. Sekarang, ini berfungsi dengan baik

ng g c COMPONENTNAME

Perintah ini digunakan untuk menghasilkan komponen menggunakan terminal ini saya gunakan di angular2.

g untuk menghasilkan c untuk komponen

Dalam kasus saya, saya kebetulan memiliki .angular-cli.jsonfile lain di srcfolder saya . Menghapusnya memecahkan masalah. Semoga membantu

angular 4.1.1 angular-cli 1.0.1

ng g component component name

sebelum Anda mengetikkan perintah ini, periksa Anda akan berada di jalur direktif proyek Anda

ng gc --dry-run sehingga Anda dapat melihat apa yang akan Anda lakukan sebelum benar-benar melakukannya akan menghemat frustrasi. Hanya menunjukkan kepada Anda apa yang akan dilakukan tanpa benar-benar melakukannya.

Anda harus berada di src/appfolder proyek angular-cli Anda di baris perintah. Sebagai contoh:

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

Hanya dengan begitu itu akan menghasilkan komponen Anda.

Apakah Anda memperbarui angular-cli ke versi terbaru? atau apakah Anda mencoba memperbarui node atau npm atau skrip ketikan? masalah ini muncul karena versi seperti angular / typescript / node. Jika Anda memperbarui cli, gunakan tautan ini di sini. https://github.com/angular/angular-cli/wiki/stories-1.0-update

buka folder project angular Anda dan buka perintah yang menunjukkan ketik "ng g component header" di mana header adalah komponen baru yang ingin Anda buat.Sebagai default, komponen header akan dibuat di dalam komponen aplikasi.Anda dapat membuat komponen di dalam a komponen. Misal jika ingin membuat komponen di dalam header yang kita buat di atas maka ketikkan "ng g component header / menu". Ini akan membuat komponen menu di dalam komponen header

ng g c COMPONENTNAME harus berfungsi, jika Anda mendapatkan modul tidak ditemukan pengecualian maka coba hal-hal ini-

1. Periksa direktori proyek Anda.
2. Jika Anda menggunakan kode studio visual, muat ulang atau buka kembali proyek Anda di dalamnya.

Pergi ke lokasi Proyek di Folder Tertentu

C:\Angular6\sample>

Di sini Anda dapat mengetikkan perintahnya

C:\Angular6\sample>ng g c users

Di sini g berarti menghasilkan, c berarti komponen, pengguna adalah nama komponen

itu akan menghasilkan 4 file

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

Langkah 1:

Masuk ke Direktori Proyek!(cd ke dalam aplikasi yang dibuat).

Langkah 2:

Ketik perintah berikut dan jalankan!

ng generate component [componentname]

• Tambahkan nama komponen yang ingin Anda buat di bagian [componentname].

ATAU

ng generate c [componentname]

• Tambahkan nama komponen yang ingin Anda buat di bagian [componentname].

Keduanya akan bekerja

Untuk referensi, periksa bagian Dokumentasi Sudut ini!

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

Untuk referensi juga periksa tautan ke Angular Cli di github!

https://github.com/angular/angular-cli/wiki/generate-component

ng generate component componentName.

Ini secara otomatis akan mengimpor komponen di module.ts

cd ke proyek Anda dan jalankan,

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

ATAU

> ng g c shopping-cart

(Ini akan membuat folder baru di bawah folder "app" dengan nama "keranjang belanja" dan membuat file .html, .ts, .css. Spesifikasi.)

Jika Anda tidak ingin menghasilkan file .spec

> ng g c shopping-cart --skipTests true

Jika Anda ingin membuat komponen di folder tertentu di bawah "app"

> ng g c ecommerce/shopping-cart

(Anda akan mendapatkan struktur folder "app / ecommerce / shopping-cart")

buka direktori proyek Anda di CMD, dan jalankan perintah berikut. Anda juga dapat menggunakan terminal kode studio visual.

ng generate component "component_name"

ATAU

ng g c "component_name"

folder baru dengan "component_name"akan dibuat

component_name / component_name.component.html component_name / component_name.component.spec.ts component_name / component_name.component.ts component_name / component_name.component.css

komponen baru akan secara otomatis menambahkan modul.

Anda dapat menghindari membuat file spesifikasi dengan mengikuti perintah

ng g c "component_name" --nospec

Ada dua cara utama untuk menghasilkan komponen baru di Angular, menggunakan ng g c <component_name>, cara lain adalah menggunakan ng generate component <component_name>. menggunakan salah satu dari perintah ini, komponen baru dapat dibuat.