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

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?

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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

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.

Nie jest to obsługiwane przez Angular CLI i nie są w nastroju do włączenia go w najbliższym czasie.

Oto link do faktycznie utworzonego problemu - https://github.com/angular/angular-cli/issues/1776

I zrzut ekranu rozwiązania od urzędników -