Wie benenne ich eine Komponente in Angular CLI um?

177

Gibt es eine Verknüpfung zum Umbenennen einer Komponente mit der Angular-CLI, außer das manuelle Bearbeiten aller Komponentendateien wie Ordnername, CSS, TS, Specs und App.module.ts?

angular angular-cli rename angular-components Thomas Easo
quelle
1
Benennen Sie einfach den Selektor um, wenn Sie das HTML-Tag ändern möchten. Wenn Sie die Klasse ändern möchten, müssen Sie dies manuell tun.
Alaksandar Jesus Gene
Bis sie hinzufügen, haben ng destroySie kein Glück ...
William Hampshire
4
Sie können die Funktion in diesem Thread überwachen: github.com/angular/angular-cli/issues/900
Andrii Romanchak
Suchen und Ersetzen, ein paar Dateien / Verzeichnisse umbenennen .... Arbeit erledigt
ldgorman

Antworten:

179

Nein!

Es gibt keinen Befehl, der den Namen aller Dateien ändert, die mit dem Befehl component create generiert wurden. So erstellt ts, html, css/scss, .spec.ts müssen Dateien manuell umbenannt / bearbeitet werden.

Ich bin ein häufiger Benutzer von angular cliund ich denke, dies wäre ein netter Befehl, da wir manchmal nur eckige Komponenten erstellen und diese umbenennen müssen. Da dieser Umbenennungsbefehl nicht vorhanden ist, ist das Löschen der erstellten Winkelkomponente, Direktive usw. und das erneute Ausführen des Befehls zum Erstellen der Komponente wirklich schmerzhaft.

Hier ist der Diskussionslink zum Hinzufügen dieser Funktion zum Umbenennen der Winkelkomponente

Aniruddha Das
quelle
6
Dies wäre auch praktisch, um alte Projekte wiederzuverwenden.
Leo
1
Neu WebStorm 2018.1.2bei Wörtern ermöglicht das Umbenennen der Komponente, hat sie jedoch nie verwendet. Ich werde es später eines Tages versuchen
Aniruddha Das
2
Wenn in VSCode beispielsweise etwas nicht stimmt (importierte Datei, die nicht vorhanden ist, nicht vorhandene Komponente usw.), werden im Datei-Explorer-Bereich links Fehleranzeigen angezeigt. In meinem Fall musste ich eine Komponente umbenennen. Ich habe nur den Ordner und die inneren Dateinamen umbenannt und dann alle Fehleranzeigen befolgt und den Namen dieser Komponente entsprechend geändert. Ich denke, diese Funktion gibt es heutzutage auch in anderen modernen IDEs ... Aber einen Angular-Cli-Befehl zu haben, der dies automatisch ausführt (ähnlich wie "ng gc ..."), wäre allerdings großartig! Viel Spaß beim Codieren! :)
TheCuBeMan
1
Seit 2016 wird über diese Funktion diskutiert: github.com/angular/angular-cli/issues/900 Alle Anfragen für eine solche Funktion sind mit diesem Thread verknüpft und geschlossen. @AniruddhaDas würde es Ihnen etwas ausmachen, dies zur Antwort hinzuzufügen?
Stefan
1
@Stefan jetzt hinzugefügt. Sehen Sie, ob es gut aussieht. Sie können es auch bearbeiten.
Aniruddha Das
48

Derzeit unterstützt Angular CLI die Funktion zum Umbenennen oder Umgestalten von Code nicht.

Sie können diese Funktionalität mit Hilfe einer IDE erreichen.

Intellij, Eclipse, VSCode usw. unterstützen standardmäßig das Refactoring.

Heutzutage zeigt VSCode einen Aufwärtstrend, persönlich bin ich ein Fan davon

Refactoring mit VSCode

Bestimmende Referenz : - Mit VS Code können Sie alle Referenzen einer Variablen finden, indem Sie eine Variable auswählen und die Tastenkombination SHIFT+ drücken F12. Dies funktioniert unglaublich gut mit Type Script.

Umbenennen aller Referenzinstanzen : - Nachdem Sie alle Referenzen gefunden haben, die Sie drücken können, F2wird ein Popup geöffnet. Sie können den Wert ändern und auf die Eingabetaste klicken. Dadurch werden alle Referenzinstanzen aktualisiert.

Umbenennen von Dateien und Importen Sie können eine Datei und ihre Importreferenzen mit einem Plugin umbenennen. Weitere Details finden Sie hier

Geben Sie hier die Bildbeschreibung ein

Mit den obigen Schritten nach dem Umbenennen der Variablen und Dateien können Sie das Umbenennen der Winkelkomponente erreichen.

samuelj90
quelle
3
Sie sprechen über Referenzen, Dateien und Importe, aber was ist mit dem Umbenennen von Komponenten?
Ortomala Lokni
1
@OrtomalaLokni angle-cli unterstützt das Umbenennen nicht. Die Aufgabe des Umbenennens kann mit diesen drei Schritten erreicht werden.
samuelj90
1

siehe Winkelumbenennung

Installieren

npm install -g angular-rename

verwenden 

$ ./angular-rename OldComponentName NewComponentName
emrhzc
quelle
1
Github-Repository existiert nicht mehr
Emmanuel
die schlimmste Komponente evet ... keine richtigen Dokumente, voller Fehler ... nette Idee ... aber nutzlos
DS_web_developer
1

Während das OP nach einem CLI-Befehl fragt, konzentrieren sich einige der Antworten auf die IDEs. In dieser Antwort bestätige ich nur, dass das aktuelle WebStorm / IntelliJ das Umbenennen der Komponente erlaubt. Sie müssen lediglich versuchen, die Klasse in der .tsDatei umzubenennen . Sie erhalten:

Geben Sie hier die Bildbeschreibung ein

und die Umbenennung wird an allen relevanten Stellen durchgeführt.

P Marecki
quelle
Dies wurde erstmals im aktuellen Thread von @Aniruddha Das
P Marecki
0

Wie aus der ersten Antwort hervorgeht, gibt es derzeit keine Möglichkeit, Komponenten umzubenennen, sodass wir alle nur über Workarounds sprechen! Das ist was ich mache:

  1. Erstellen Sie die neue Komponente, die Ihnen gefällt.

    ng Komponente newName generieren

  2. Verwenden Sie den Visual Studio-Code-Editor oder einen anderen Editor, um Code / Teile bequem nebeneinander zu verschieben!

  3. Verwenden Sie unter Linux grep & sed (Suchen & Ersetzen), um Referenzen zu finden / zu ersetzen.

    grep -ir "alter Name"

    CD Ihren Ordner

    sed -i 's / oldName / newName / g' *

Salah-1
quelle
0

Ich persönlich habe keinen Befehl dafür gefunden. So stellen Sie eine neue Komponente (umbenannt Name) und kopieren Sie die vorherige Komponente einfügen html, cssund ts. In tsoffensichtlich wäre der Klassennamen ersetzt werden. Es ist die sicherste Methode, dauert aber etwas.

Priyanka Arora
quelle
0

In WebStorm können Sie mit der rechten Maustaste auf → Refactor → Umbenennen auf den Namen der Komponente in der TypeScript-Datei klicken. Der Name wird überall geändert.

Ollie
quelle