Apa cara terbaik untuk menghapus komponen dengan CLI

Saya mencoba menggunakan "ng destroy component foo" dan memberitahu saya "Perintah menghancurkan tidak didukung oleh Angular-CLI"

Bagaimana cara kami menghapus komponen dengan Angular CLI dengan benar?

destroyatau sesuatu yang serupa mungkin datang ke CLI, tetapi itu bukan fokus utama saat ini. Jadi, Anda perlu melakukan ini secara manual.

Hapus direktori komponen (dengan asumsi Anda tidak menggunakan --flat) dan kemudian menghapusnya dari NgModuleyang dinyatakannya.

Jika Anda tidak yakin apa yang harus dilakukan, saya sarankan Anda memiliki aplikasi "bersih" yang berarti tidak ada gitperubahan saat ini . Kemudian buat komponen dan lihat apa yang diubah dalam repo sehingga Anda dapat mundur dari sana apa yang perlu Anda lakukan untuk menghapus komponen.

Memperbarui

Jika Anda hanya bereksperimen tentang apa yang ingin Anda hasilkan, Anda dapat menggunakan --dry-runtanda untuk tidak menghasilkan file apa pun pada disk, cukup lihat daftar file yang diperbarui.

1. Hapus folder yang mengandung komponen ini.
2. Di app.module.ts hapus pernyataan impor untuk komponen ini dan hapus namanya dari bagian deklarasi @NgModule
3. Hapus baris dengan pernyataan ekspor untuk komponen ini dari index.ts.

Karena belum didukung menggunakan CLI sudut

jadi inilah cara yang mungkin, sebelum itu perhatikan apa yang terjadi ketika Anda membuat komponen / layanan menggunakan CLI (mis. ng g c demoComponent).

1. Itu membuat folder terpisah bernama demoComponent( ng g c demoComponent).
2. Ini menghasilkan HTML,CSS,tsdan specfile yang didedikasikan untuk demoComponent.
3. Juga, itu menambah ketergantungan di dalam file app.module.ts untuk menambahkan komponen itu ke proyek Anda.

jadi lakukan dengan urutan terbalik

1. Hapus Ketergantungan dari app.module.ts
2. Hapus folder komponen itu.

ketika menghapus ketergantungan Anda harus melakukan dua hal.

1. Hapus referensi jalur impor dari file app.module.ts.
2. Hapus deklarasi komponen dari array deklarasi @NgModule di app.module.ts.

Menggunakan Visual Studio Code, hapus folder komponen dan lihat di Project Explorer (sisi kiri) file yang berwarna Merah yang berarti file terpengaruh dan menghasilkan kesalahan. Buka setiap file dan hapus kode yang menggunakan komponen.

Saat ini Angular CLI tidak mendukung opsi untuk menghapus komponen, Anda harus melakukannya secara manual.

1. Hapus referensi impor untuk setiap komponen dari app.module
2. Hapus folder komponen.
3. Anda juga perlu menghapus deklarasi komponen dari array deklarasi @NgModule di file app.module.ts

Saya menulis skrip bash yang seharusnya mengotomatiskan proses yang ditulis oleh Yakov Fain di bawah ini. Ini bisa disebut seperti ./removeComponent myComponentName Ini hanya diuji dengan Angular 6

#!/bin/bash
if [ "$#" -ne 1 ]; then
    echo "Input a component to delete"
    exit 1
fi

# finds folder with component name and deletes
find . -type d -name $1 | xargs rm -rf

# removes lines referencing the component from app.module.ts
grep -v $1 app.module.ts > temp
mv temp app.module.ts

componentName=$1
componentName+="Component"

grep -v -i $componentName app.module.ts > temp
mv temp app.module.ts

Saya tidak yakin apakah itu cara terbaik, tetapi itu berhasil untuk saya.

• Pertama, saya menghapus folder komponen.
• Kemudian, saya menghapus app.module.ts, app.component.ts & app.component.html dari impor dan deklarasi yang terkait dengan komponen yang ingin saya hapus.
• Demikian pula, saya membersihkan main.ts.

Saya baru saja menyimpan dan menyegarkan aplikasi dan itu berhasil.

Jawaban untuk Angular 2+

Hapus komponen from imports and declaration arrayapp.modules.ts.

Periksa referensi kedua ditambahkan dalam modul lain, jika ya maka hapus dan

akhirnya delete that component Manuallydari aplikasi dan Anda selesai.

Atau Anda dapat melakukannya dengan urutan terbalik juga.

Dari app.module.ts:

• menghapus jalur impor untuk komponen tertentu;
• hapus deklarasi dari @NgModule;

Kemudian menghapus folder dari komponen yang ingin Anda hapus dan file yang disertakan ( .component.ts, .component.html, .component.cssdan .component.spec.ts).

Selesai

-

Saya membaca orang mengatakan tentang menghapusnya dari main.ts. Anda seharusnya tidak mengimpornya dari sana karena sudah mengimpor AppModule, dan AppModule adalah yang mengimpor semua komponen yang Anda buat.

Saya perlu menghapus arahan 6 Angular yang file speknya salah. Bahkan setelah menghapus file yang menyinggung, menghapus semua referensi dan membangun kembali aplikasi, TS masih melaporkan kesalahan yang sama. Apa yang berhasil bagi saya adalah me-restart Visual Studio - ini menghapus kesalahan dan semua jejak dari arahan lama yang tidak diinginkan.

Pertama-tama, hapus folder komponen, yang harus Anda hapus dan kemudian hapus entri yang telah Anda buat dalam file "ts".

Jika Anda mencari beberapa perintah di CLI, Maka ans adalah TIDAK untuk saat ini. Tetapi Anda dapat melakukannya secara manual dengan menghapus folder komponen dan semua referensi.

Ini tidak didukung oleh CLI Angular dan mereka tidak berminat untuk memasukkannya dalam waktu dekat.

Berikut ini tautan ke masalah yang sebenarnya dibuat - https://github.com/angular/angular-cli/issues/1776

Dan tangkapan layar solusi dari para pejabat -