Jaki jest najlepszy sposób na usunięcie komponentu z CLI

227

Próbowałem użyć „ng zniszczyć składnik foo” i mówi mi: „Polecenie zniszczenia nie jest obsługiwane przez Angular-CLI”

Jak właściwie usuwamy komponenty za pomocą Angular CLI?

Jus10
źródło
2
Nie jest jeszcze obsługiwany z CLI, jednak jeśli upewniłeś się, że starsze zmiany zostały zatwierdzone przez git przed utworzeniem komponentu, możesz po prostu usunąć nowe pliki i wykonać polecenie git na zmienionych (lub po prostu git checkout src).
Sanjay Verma,
To sprytny hack. Działa to na pewno. Zespół Angulara prędzej czy później będzie musiał rozwiązać ten problem. Myślę, że są obecnie zajęci innymi problemami. Ale myślę, że na razie musimy żyć z twoim rozwiązaniem. Opublikuj to jako odpowiedź. @SanjayVerma
Aman

Odpowiedzi:

167

destroylub coś podobnego może przyjść do CLI, ale obecnie nie jest to główny cel. Musisz to zrobić ręcznie.

Usuń katalog komponentów (zakładając, że nie korzystałeś --flat), a następnie usuń go z tego, NgModulew którym został zadeklarowany.

Jeśli nie masz pewności, co robić, sugeruję, aby mieć „czystą” aplikację, co oznacza brak bieżących gitzmian. Następnie wygeneruj komponent i zobacz, co zostało zmienione w repozytorium, abyś mógł stamtąd cofnąć się, co musisz zrobić, aby usunąć komponent.

Aktualizacja

Jeśli eksperymentujesz tylko z tym, co chcesz wygenerować, możesz użyć --dry-runflagi, aby nie tworzyć żadnych plików na dysku, po prostu zobacz zaktualizowaną listę plików.

Brocco
źródło
132
  1. Usuń folder zawierający ten składnik.
  2. W app.module.ts usuń instrukcję importu dla tego komponentu i usuń jego nazwę z sekcji deklaracji @NgModule
  3. Usuń wiersz z instrukcją eksportu dla tego komponentu z index.ts.
Jakow Fain
źródło
12
gdzie jest index.ts? Dzięki
Shane G
40
w najnowszych wersjach CLI nie generują go.
Jakow Fain
7
Wydaje mi się, że brakuje jeszcze jednego kroku ... ponownie uruchomić serw, prawda?
gsalgadotoledo
index.ts? Nie za 5
Andrew Koper
2
w Angular6, należy usunąć instrukcję importu z app-routing.module.ts
tyro
26

Ponieważ nie jest jeszcze obsługiwany przy użyciu kątowego interfejsu CLI

więc jest to możliwy sposób, przed tym proszę obserwować, co się dzieje, gdy tworzysz komponent / usługę za pomocą CLI (np. ng g c demoComponent).

  1. Tworzy osobny folder o nazwie demoComponent(ng g c demoComponent ).
  2. Generuje HTML,CSS,tsispec plik dedykowany demoComponent.
  3. Ponadto dodaje zależność w pliku app.module.ts, aby dodać ten komponent do projektu.

więc zrób to w odwrotnej kolejności

  1. Usuń zależność od app.module.ts
  2. Usuń ten folder komponentów.

usuwając zależność, musisz zrobić dwie rzeczy.

  1. Usuń odwołanie do linii importu z pliku app.module.ts.
  2. Usuń deklarację komponentu z tablicy deklaracji @NgModule w app.module.ts.
UniCoder
źródło
11

Za pomocą programu Visual Studio Code usuń folder komponentu i zobacz w Eksploratorze projektów (po lewej stronie) pliki, które są w kolorze czerwonym, co oznacza, że ​​pliki zostały naruszone i wystąpiły błędy. Otwórz każdy plik i usuń kod korzystający ze składnika.

babidi
źródło
11

Obecnie Angular CLI nie obsługuje opcji usuwania komponentu, musisz to zrobić ręcznie.

  1. Usuń odwołania do importu dla każdego komponentu z app.module
  2. Usuń foldery komponentów.
  3. Musisz także usunąć deklarację komponentu z tablicy deklaracji @NgModule w pliku app.module.ts
Bernardo Soriano
źródło
5

Napisałem poniżej skrypt bash, który powinien zautomatyzować proces napisany przez Jakowa Faina. Można go nazwać jak ./removeComponent myComponentName Zostało to przetestowane tylko w 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
Aidan Grimshaw
źródło
Proszę dodać notatkę, żebym to zmienił, jeśli kątowe cli zmieni się w przyszłości
Aidan Grimshaw
3

Nie jestem pewien, czy to najlepszy sposób, ale mi się udało.

  • Najpierw usunąłem folder komponentu.
  • Następnie wyczyściłem app.module.ts, app.component.ts & app.component.html importów i deklaracji związanych z komponentem, który chciałem usunąć.
  • Podobnie wyczyściłem main.ts.

Właśnie zapisałem i odświeżyłem aplikację i działała.

TheMeanCoder
źródło
3

Odpowiedz na Angular 2+

Usuń składnik from imports and declaration arrayapp.modules.ts.

Po drugie sprawdź, czy odniesienie zostało dodane w innym module, jeśli tak, usuń go i

Wreszcie delete that component Manually z aplikacji i gotowe.

Lub możesz to zrobić również w odwrotnej kolejności.

Deva
źródło
2

Z app.module.ts:

  • usuń wiersz importu dla określonego komponentu;
  • usuń deklarację z @NgModule;

Następnie usuń folder komponentu, który chcesz usunąć, a jego ujęte plików ( .component.ts, .component.html, .component.cssi .component.spec.ts).

Gotowe.

-

Czytam ludzi mówiących o usunięciu go z main.ts. Nie miałeś zaimportować go stamtąd, ponieważ już importuje AppModule, a AppModule importuje wszystkie utworzone przez ciebie komponenty.

ser Cheddar
źródło
2

Musiałem usunąć dyrektywę Angular 6, której plik specyfikacji był błędny. Nawet po usunięciu szkodliwych plików, usunięciu wszystkich odniesień do niego i przebudowaniu aplikacji, TS nadal zgłaszał ten sam błąd. Dla mnie zadziałało ponowne uruchomienie Visual Studio - to usunęło błąd i wszystkie ślady starej niechcianej dyrektywy.

T. Bulford
źródło
0

Przede wszystkim usuń folder komponentu, który musisz usunąć, a następnie usuń jego wpisy, które wprowadziłeś w plikach „ts”.

shashank
źródło
0

Jeśli szukasz komendy w CLI, to Ans jest NIE teraz. Ale możesz to zrobić ręcznie, usuwając folder komponentu i wszystkie odniesienia.

Hidayt Rahman
źródło