webentwicklung-frage-antwort-db.com.de

Was ist der beste Weg, um eine Komponente mit CLI zu löschen?

Ich habe versucht, "ng destroy components foo" zu verwenden und es sagt mir "Der Zerstörungsbefehl wird nicht von Angular-CLI unterstützt"

Wie werden Komponenten mit Angular CLI ordnungsgemäß gelöscht?

144
Jus10

destroy oder etwas Ähnliches kann zur CLI kommen, es ist jedoch momentan kein Hauptfokus. Sie müssen dies also manuell tun.

Löschen Sie das Komponentenverzeichnis (vorausgesetzt, Sie haben --flat nicht verwendet) und entfernen Sie es dann aus der NgModule, in der es deklariert ist.

Wenn Sie nicht sicher sind, was zu tun ist, empfehle ich Ihnen eine "saubere" App, die keine aktuellen git-Änderungen bedeutet. Dann generieren Sie eine Komponente und sehen Sie, was im Repo geändert wird, sodass Sie von dort aus zurückverfolgen können, was Sie zum Löschen einer Komponente tun müssen.

Aktualisieren

Wenn Sie gerade experimentieren, was Sie generieren möchten, können Sie mit dem Flag --dry-run keine Dateien auf der Festplatte erstellen. Sehen Sie sich einfach die aktualisierte Dateiliste an.

115
Brocco
  1. Löschen Sie den Ordner, der diese Komponente enthält.
  2. Entfernen Sie in der app.module.ts die Importanweisung für diese Komponente und entfernen Sie ihren Namen aus dem Deklarationsabschnitt von @NgModule
  3. Entfernen Sie die Zeile mit der Exportanweisung für diese Komponente aus index.ts.
92
Yakov Fain

Da es noch nicht mit der Winkel-CLI unterstützt wird

hier ist also der mögliche Weg, davor sollten Sie beobachten, was passiert, wenn Sie eine Komponente/einen Dienst mithilfe von CLI (z. B. ng g c demoComponent) erstellen.

  1. Es erstellt einen separaten Ordner mit dem Namen demoComponent (ng g c demoComponent).
  2. Es generiert HTML,CSS,ts und eine spec-Datei, die demoComponent gewidmet ist.
  3. Außerdem fügt sie in der Datei app.module.ts eine Abhängigkeit hinzu, um diese Komponente Ihrem Projekt hinzuzufügen.

so in umgekehrter Reihenfolge

  1. Abhängigkeit von app.module.ts entfernen
  2. Löschen Sie den Komponentenordner.
21
UniCoder

Derzeit unterstützt Angular CLI keine Option zum Entfernen der Komponente. Sie müssen dies manuell tun.

  1. Entfernen Sie Importverweise für jede Komponente aus app.module
  2. Komponentenordner löschen.
9

Löschen Sie mit Hilfe von Visual Studio Code den Komponentenordner und sehen Sie im Projekt-Explorer (links) die Dateien, deren Farbe rot ist. Dies bedeutet, dass die Dateien betroffen sind und Fehler erzeugt wurden. Öffnen Sie alle Dateien, und entfernen Sie den Code, der die Komponente verwendet. 

5
babidi

Ich habe ein Bash-Skript geschrieben, das den von Yakov Fain unten beschriebenen Prozess automatisieren soll. Es kann wie ./removeComponent myComponentName aufgerufen werden Dies wurde nur mit Angular 6 getestet

#!/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
4
Aidan Grimshaw

Ich bin nicht sicher, ob es der beste Weg ist, aber es hat für mich funktioniert.

  • Zuerst habe ich den Komponentenordner gelöscht. 
  • Dann habe ich app.module.ts, app.component.ts & app.component.html von den Importen und Deklarationen der Komponente gelöscht, die ich löschen wollte.
  • Ebenso habe ich main.ts gelöscht. 

Ich habe die App gerade gespeichert und aktualisiert und sie hat funktioniert. 

2
TheMeanCoder

Von app.module.ts:

  • importlinie für die spezifische Komponente löschen;
  • lösche seine Deklaration von @NgModule;

Löschen Sie anschließend den Ordner der Komponente, die Sie löschen möchten, und die enthaltenen Dateien (.component.ts, .component.html, .component.css und .component.spec.ts).

Erledigt.

-

Ich las Leute, die sagten, sie würden es von main.ts löschen. Sie sollten es eigentlich gar nicht von dort importieren, da AppModule bereits importiert wird und AppModule alle importierten Komponenten importiert.

1
cheddar

vergessen Sie auch nicht: - den Komponentenpfad aus dem Routing-Modul zu löschen - im gesamten Projekt nach dem Klassennamen der Komponente zu suchen

0
xx yy

Entfernen Sie zunächst den Komponentenordner, den Sie Löschen müssen, und entfernen Sie dann die Einträge, die Sie in "ts" -Dateien vorgenommen haben.

0
the shashank

Ich musste eine Angular 6-Direktive löschen, deren Spezifikationsdatei fehlerhaft war. Auch nach dem Löschen der fehlerhaften Dateien, dem Entfernen aller Verweise darauf und dem Neuerstellen der App meldete TS den gleichen Fehler. Für mich hat der Neustart von Visual Studio funktioniert - dies hat den Fehler und alle Spuren der alten unerwünschten Direktive beseitigt.

0
T. Bulford

Antwort für Winkel 2+

Entfernen Sie die Komponente from imports and declaration array von app.modules.ts.

Die zweite Prüfung wird in einem anderen Modul hinzugefügt. Wenn ja, entfernen Sie sie und

endlich delete that component Manually von app und du bist fertig. 

Oder Sie können es auch in umgekehrter Reihenfolge tun.

0
Deva

Wenn Sie nach einem Befehl in der Befehlszeilenschnittstelle suchen, ist Then ansNOfür den Moment . Sie können jedoch manuell ausführen, indem Sie den Komponentenordner und alle Verweise löschen.

0
Hidayt Rahman