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

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äß?

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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 .

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 -