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

227

Ich habe versucht, "ng destroy component foo" zu verwenden und es sagt mir "Der Befehl destroy wird von Angular-CLI nicht unterstützt".

Wie löschen wir Komponenten mit Angular CLI ordnungsgemäß?

Jus10
quelle
2
Es wird mit CLI noch nicht unterstützt. Wenn Sie jedoch vor dem Erstellen der Komponente sichergestellt haben, dass ältere Änderungen git-festgeschrieben werden, können Sie einfach die neuen Dateien entfernen und die geänderten (oder nur git checkout src) git-Check-outs durchführen .
Sanjay Verma
Es ist ein kluger Hack. Es funktioniert auf jeden Fall. Das Angular-Team muss dieses Problem früher oder später beheben. Ich denke, sie sind derzeit mit anderen Themen beschäftigt. Aber ich denke, wir müssen vorerst mit Ihrer Lösung leben. Poste dies als Antwort. @ SanjayVerma
Aman

Antworten:

167

destroyoder etwas Ähnliches kann zur CLI kommen, aber es ist derzeit kein primärer Fokus. Sie müssen dies also manuell tun.

Löschen Sie das Komponentenverzeichnis (vorausgesetzt, Sie haben es nicht verwendet --flat) und entfernen Sie es aus dem Verzeichnis, NgModulein dem es deklariert ist.

Wenn Sie sich nicht sicher sind, was Sie tun sollen, empfehlen wir Ihnen eine "saubere" App, die keine aktuellen gitÄnderungen enthält. Generieren Sie dann eine Komponente und sehen Sie, was im Repo geändert wurde, damit Sie von dort aus zurückverfolgen können, was Sie zum Löschen einer Komponente tun müssen.

Aktualisieren

Wenn Sie nur experimentieren, was Sie generieren möchten, können Sie das --dry-runFlag verwenden, um keine Dateien auf der Festplatte zu erstellen. Sehen Sie sich einfach die aktualisierte Dateiliste an.

Brocco
quelle
132
  1. Löschen Sie den Ordner mit dieser Komponente.
  2. Entfernen Sie in app.module.ts die Importanweisung für diese Komponente und ihren Namen aus dem Deklarationsabschnitt von @NgModule
  3. Entfernen Sie die Zeile mit der Exportanweisung für diese Komponente aus index.ts.
Yakov Fain
quelle
12
wo ist index.ts? Danke
Shane G
40
In den neuesten Versionen von CLI wird es nicht generiert.
Yakov Fain
7
Ich denke, ein weiterer Schritt fehlt ... Run ng Serve erneut, nicht wahr?
gsalgadotoledo
index.ts? Nicht in 5
Andrew Koper
2
in Angular6, um Notwendigkeit , die Import - Anweisung von App-routing.module.ts zu entfernen
tyro
26

Da es mit Angular CLI noch nicht unterstützt wird

Hier ist also die Möglichkeit, vorher zu beobachten, was passiert, wenn Sie eine Komponente / einen Dienst mit CLI erstellen (z. B. ng g c demoComponent).

  1. Es wird ein separater Ordner mit dem Namen demoComponent( ng g c demoComponent) erstellt.
  2. Es generiert HTML,CSS,tsund eine specDatei für demoComponent.
  3. Außerdem wird eine Abhängigkeit in der Datei app.module.ts hinzugefügt, um diese Komponente Ihrem Projekt hinzuzufügen.

Also mach es in umgekehrter Reihenfolge

  1. Entfernen Sie die Abhängigkeit von app.module.ts
  2. Löschen Sie diesen Komponentenordner.

Wenn Sie die Abhängigkeit entfernen, müssen Sie zwei Dinge tun.

  1. Entfernen Sie die Importzeilenreferenz aus der Datei app.module.ts.
  2. Entfernen Sie die Komponentendeklaration aus dem @ NgModule-Deklarationsarray in app.module.ts.
UniCoder
quelle
11

Löschen Sie mit Visual Studio Code den Komponentenordner und sehen Sie im Projektexplorer (linke Seite) die rot gefärbten Dateien, was bedeutet, dass die Dateien betroffen sind und Fehler verursachen. Öffnen Sie jede Datei und entfernen Sie den Code, der die Komponente verwendet.

babidi
quelle
11

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

  1. Entfernen Sie Importreferenzen für jede Komponente aus app.module
  2. Komponentenordner löschen.
  3. Sie müssen auch die Komponentendeklaration aus dem @ NgModule-Deklarationsarray in der Datei app.module.ts entfernen
Bernardo Soriano
quelle
5

Ich habe ein Bash-Skript geschrieben, das den von Yakov Fain unten geschriebenen Prozess automatisieren soll. Es kann wie folgt aufgerufen werden: ./removeComponent myComponentName 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
Aidan Grimshaw
quelle
Bitte fügen Sie eine Notiz hinzu, damit ich dies ändern kann, wenn sich der Winkel in Zukunft ändert
Aidan Grimshaw
3

Ich bin mir nicht sicher, ob es der beste Weg ist, aber es hat bei mir funktioniert.

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

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

TheMeanCoder
quelle
3

Antwort für Angular 2+

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

Zweitens überprüfen Sie, ob die Referenz in einem anderen Modul hinzugefügt wurde. Wenn ja, entfernen Sie sie und

endlich delete that component Manuallyaus der app und du bist fertig.

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

Deva
quelle
2

Von app.module.ts:

  • Importzeile für die bestimmte Komponente löschen;
  • Löschen Sie die Deklaration von @NgModule.

Dann löschen Sie den Ordner der Komponente , die Sie löschen möchten, und seine darin enthaltenen Dateien ( .component.ts, .component.html, .component.cssund .component.spec.ts).

Getan.

- -

Ich habe Leute gelesen, die über das Löschen von main.ts gesagt haben. Sie sollten es zunächst nicht von dort importieren, da es bereits AppModule importiert und AppModule alle von Ihnen erstellten Komponenten importiert.

Cheddar
quelle
2

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 erneuten Erstellen der App meldete TS immer noch denselben Fehler. Was für mich funktioniert hat, war ein Neustart von Visual Studio - dies löschte den Fehler und alle Spuren der alten unerwünschten Direktive.

T. Bulford
quelle
0

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.

der Shashank
quelle
0

Wenn Sie in der CLI nach einem Befehl suchen, ist ans vorerst NEIN . Sie können dies jedoch manuell tun, indem Sie den Komponentenordner und alle Referenzen löschen .

Hidayt Rahman
quelle
0

Dies wird von Angular CLI nicht unterstützt und sie sind nicht in der Stimmung, es bald aufzunehmen.

Hier ist der Link zum tatsächlich erstellten Problem - https://github.com/angular/angular-cli/issues/1776

Und ein Screenshot der Lösung von den Beamten - Geben Sie hier die Bildbeschreibung ein

Vibhor Dube
quelle