CLI ile bir bileşeni silmenin en iyi yolu nedir


227

"Ng destroy bileşen foo" kullanmayı denedim ve bana "destroy komutu Angular-CLI tarafından desteklenmiyor"

Açısal CLI ile bileşenleri nasıl düzgün bir şekilde silebiliriz?


2
Henüz CLI ile desteklenmemektedir, ancak bileşeni oluşturmadan önce daha eski değişikliklerin yapıldığından emin olduysanız, yeni dosyaları kaldırabilir ve değiştirilenlere (veya sadece git checkout src) git kontrolü yapabilirsiniz .
Sanjay Verma

Zeki bir hack. Kesinlikle işe yarıyor: Açısal ekibin bu sorunu er ya da geç ele alması gerekecek. Şu anda başka sorunlarla meşgul olduklarını düşünüyorum. Ama şimdilik çözümünüzle yaşamak zorunda olduğumuzu düşünüyorum. Bunu cevap olarak gönder. @SanjayVerma
Aman

Yanıtlar:


167

destroyveya CLI'ye benzer bir şey gelebilir, ancak şu anda birincil odak noktası değildir. Yani bunu manuel olarak yapmanız gerekecek.

Bileşen dizinini silin (kullanmadığınız varsayılarak --flat) ve ardından bildirildiği dizinden kaldırın NgModule.

Ne yapacağınızdan emin değilseniz, güncel bir gitdeğişiklik olmadığı anlamına gelen "temiz" bir uygulamanız olmasını öneririm . Daha sonra bir bileşen oluşturun ve repoda nelerin değiştiğini görün, böylece bir bileşeni silmek için yapmanız gerekeni oradan geri takip edebilirsiniz.

Güncelleme

Yalnızca oluşturmak istediğiniz şeyleri deniyorsanız, --dry-runbayrağı kullanarak diskte dosya oluşturmazsınız, sadece güncellenen dosya listesine bakın.


132
  1. Bu bileşeni içeren klasörü silin.
  2. App.module.ts dosyasında bu bileşen için içe aktarma ifadesini kaldırın ve adını @NgModule'un bildirim bölümünden kaldırın
  3. Bu bileşenin dışa aktarma deyimi içeren satırı index.ts dosyasından kaldırın.

12
index.ts nerede? Teşekkürler
Shane G

40
CLI'nin en son sürümlerinde oluşturmazlar.
Yakov Fain

7
Sanırım bir adım daha eksik ... tekrar hizmet vermek, değil mi?
gsalgadotoledo

index.ts? 5'te değil
Andrew Koper

2
Angular6, app-routing.module.ts gelen ithalat deyimi kaldırmak gerekir
tyro

26

Açısal CLI kullanılarak henüz desteklenmediğinden

işte mümkün olan yol, bundan önce CLI (ör. ng g c demoComponent) kullanarak bir bileşen / hizmet oluşturduğunuzda neler olduğuna dikkat edin .

  1. demoComponent( ng g c demoComponent) Adında ayrı bir klasör oluşturur .
  2. Oluşturur HTML,CSS,tsve specdemoComponent adanmış bir dosya.
  3. Ayrıca, bu bileşeni projenize eklemek için app.module.ts dosyasının içine bağımlılık ekler.

bu yüzden ters sırayla yapın

  1. Bağımlılığı kaldır app.module.ts
  2. Bu bileşen klasörünü silin.

bağımlılığı ortadan kaldırırken iki şey yapmanız gerekir.

  1. İçe aktarma satırı başvurusunu app.module.ts dosyasından kaldırın.
  2. Bileşen bildirimini app.module.ts içindeki @NgModule bildirimi dizisinden kaldırın.

11

Visual Studio Code kullanarak, bileşen klasörünü silin ve Proje Gezgini'nde (sol taraf) Kırmızı renkte olan, etkilenen ve üretilen hatalar anlamına gelen dosyaları görün. Her dosyayı açın ve bileşeni kullanan kodu kaldırın.


11

Şu anda Açısal CLI bileşeni kaldırma seçeneğini desteklemiyor, manuel olarak yapmanız gerekiyor.

  1. Her bileşen için içe aktarma referanslarını app.module'den kaldırın
  2. Bileşen klasörlerini silin.
  3. Ayrıca, app.module.ts dosyasındaki @NgModule bildirim dizisinden bileşen bildirimini kaldırmanız gerekir

5

Aşağıda Yakov Fain tarafından yazılan süreci otomatikleştirmesi gereken bir bash senaryosu yazdım. ./RemoveComponent myComponentName gibi çağrılabilir. Bu yalnızca Açısal 6 ile test edilmiştir.

#!/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

Açısal klibin gelecekte değişmesi durumunda lütfen bunu değiştirmem için bir not ekleyin
Aidan Grimshaw

3

En iyi yol olup olmadığından emin değilim, ama benim için çalıştı.

  • İlk olarak bileşen klasörünü sildim.
  • Ardından, silmek istediğim bileşenle ilgili ithalat ve bildirimlerin app.module.ts, app.component.ts & app.component.html'sini temizledim.
  • Benzer şekilde, main.ts.

Uygulamayı yeni kaydettim ve yeniledim ve işe yaradı.


3

Angular 2+ için cevap

from imports and declaration arrayApp.modules.ts bileşenini kaldırın.

İkinci olarak referansının diğer modüle eklendiğini kontrol edin, evet ise kaldırın ve

nihayet delete that component Manuallyapp ve bitti.

Veya ters sırayla da yapabilirsiniz.


2

App.module.ts sitesinden:

  • söz konusu bileşen için içe aktarma satırını silme;
  • @NgModule'den bildirimini silmek;

Sonra sil ve onun dahil dosyaları istediğiniz bileşenin klasörü silin ( .component.ts, .component.html, .component.cssve .component.spec.ts).

Bitti.

-

Bunu main.ts'den silme hakkında söyleyen insanları okudum. Önceden AppModule'yi içe aktardığı için onu oradan içe aktarmanız gerekmiyordu ve AppModule, oluşturduğunuz tüm bileşenleri içe aktarıyor.


2

Spec dosyası hatalı olan bir Açısal 6 yönergesini silmem gerekiyordu. Rahatsız edici dosyaları sildikten, dosyaya yapılan tüm referansları kaldırdıktan ve uygulamayı yeniden oluşturduktan sonra bile TS yine aynı hatayı bildiriyordu. Benim için işe yarayan Visual Studio'yu yeniden başlatmaktı - bu, hatayı ve eski istenmeyen direktifin tüm izlerini temizledi.


0

Her şeyden önce, silmeniz gereken bileşen klasörünü kaldırın ve sonra "ts" dosyalarında yaptığınız girişleri kaldırın.


0

CLI'da bir komut arıyorsanız, o zaman ans şimdilik NO'dur . Ancak bileşen klasörünü ve tüm başvuruları silerek manuel olarak yapabilirsiniz .


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.