Come rinominare un componente in CLI angolare?

178

Esiste un collegamento per rinominare un componente con la CLI angolare oltre a modificare manualmente tutti i file dei componenti come nome della cartella, .css, .ts, spec.ts e app.module.ts?

— Thomas Easo
fonte

1

Rinomina il selettore, se vuoi cambiare nel tag html. Se vuoi cambiare la classe, devi farlo manualmente.

— Alaksandar Jesus Gene,

Fino a quando non si aggiungono ng destroynon sei fortunato ...

— William Hampshire,

4

Puoi monitorare la funzione in questo thread: github.com/angular/angular-cli/issues/900

— Andrii Romanchak

cerca e sostituisci, rinomina un paio di file / directory .... lavoro fatto

— ldgorman

180

No!

Non esiste alcun comando che cambierà il nome di tutti i file generati utilizzando il comando di creazione del componente. Così creato ts, html, css/scss, .spec.ts file devono essere rinominato manualmente / modificati.

Sono un utente frequente di angular clie penso che sarebbe un comando gradevole dato che qualche volta creiamo solo componenti angolari e dobbiamo rinominarli. Poiché questo comando di ridenominazione non è presente, eliminare il componente angolare, la direttiva, ecc. Creati e ripetere l'esecuzione del comando per creare il componente è davvero una seccatura.

Ecco il link di discussione per aggiungere questa funzione rinominare il componente angolare

— Aniruddha Das
fonte

6

Ciò sarebbe utile anche per riutilizzare i vecchi progetti.

— Leone,

1

le WebStorm 2018.1.2parole nuove consentono di rinominare il componente ma non lo hanno mai usato. ci proverò più tardi un giorno

— Aniruddha Das

2

Nel VSCode, ad esempio, quando c'è qualcosa che non va (file importato che non esiste, componente inesistente e così via), puoi vedere le indicazioni di errore nel riquadro di esplorazione dei file a sinistra. Quindi, nel mio caso, avevo bisogno di rinominare un componente, ho semplicemente rinominato la sua cartella e i nomi dei file interni, quindi ho semplicemente seguito tutte le indicazioni di errore, modificando di conseguenza il nome di questo componente. Immagino che questa funzionalità esista anche in altri IDE moderni in questi giorni ... Ma avere un comando angular-cli che lo fa automaticamente (proprio come "ng gc ...") sarebbe fantastico, però! Buona programmazione! :)

— TheCuBeMan

1

C'è una discussione su questa funzione dal 2016 su questa funzione: github.com/angular/angular-cli/issues/900 Tutte le richieste per tale funzione sono collegate a questa discussione e chiuse. @AniruddhaDas ti dispiacerebbe aggiungere questo alla risposta?

— Stefan,

1

@Stefan aggiunto ora. vedere se sembra okey, sentiti libero di modificare anche.

— Aniruddha Das

48

Attualmente la CLI angolare non supporta la funzionalità di ridenominazione o refactoring del codice.

È possibile ottenere tale funzionalità con l'aiuto di alcuni IDE.

Intellij, Eclipse, VSCode ecc. Ha il supporto predefinito per il refactoring.

Oggi VSCode sta mostrando un trend rialzista, personalmente sono un fan di questo

Refactoring con VSCode

Riferimento di determinazione : - Il codice VS ti aiuta a trovare tutti i riferimenti di una variabile selezionando la variabile e premendo il tasto di scelta rapida SHIFT+ F12. Funziona incredibilmente bene con Type Script.

Rinominare tutte le istanze di riferimento : - Dopo aver trovato tutti i riferimenti che è possibile premere, F2si aprirà un popup e sarà possibile modificare il valore e fare clic su Invio per aggiornare tutte le istanze di riferimento.

Ridenominazione di file e importazioni È possibile rinominare un file e i relativi riferimenti di importazione con un plug-in. Maggiori dettagli possono essere trovati qui

Con i passaggi precedenti dopo aver rinominato le variabili e i file è possibile ottenere la ridenominazione del componente angolare.

— samuelj90
fonte

3

Parli di riferimenti, file e importazioni, ma per quanto riguarda la ridenominazione dei componenti?

— Ortomala Lokni,

1

@OrtomalaLokni angular-cli non supporta la ridenominazione. Il compito di rinominare può essere realizzato con questi tre passaggi.

— samuelj90,

1

vedi ridenominazione angolare

installare

npm install -g angular-rename

uso

$ ./angular-rename OldComponentName NewComponentName

— emrhzc
fonte

1

Il repository Github non esiste più

— Emmanuel

il peggior componente evet ... nessun documento corretto, pieno di bug ... bella idea ... ma inutile

— DS_web_developer

1

Mentre l'OP richiede un comando CLI, alcune delle risposte si concentrano sugli IDE. In questa risposta, confermo semplicemente che l'attuale WebStorm / IntelliJ consente di rinominare il componente. Tutto ciò che deve essere fatto è tentare di rinominare la classe nel .tsfile. Ti verrà presentato con:

e la ridenominazione verrà eseguita in tutti i luoghi pertinenti.

— P Marecki
fonte

Questo è stato segnalato per la prima volta nel thread corrente da @Aniruddha Das

— P Marecki il

0

Come indicato dalla prima risposta, al momento non c'è modo di rinominare i componenti, quindi stiamo solo parlando di soluzioni alternative! Questo è ciò che faccio:

Crea il nuovo componente che ti è piaciuto.

generare componente newName
Usa l'editor di codice Visual Studio o qualsiasi altro editor per spostare comodamente codice / pezzi fianco a fianco!
In Linux, usa grep & sed (trova e sostituisci) per trovare / sostituire i riferimenti.

grep -ir "oldname"

cd la tua cartella

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

— salah-1
fonte

0

Personalmente non ho trovato alcun comando per lo stesso. Basta fare un nuovo componente (nome rinominato) e copiare incollare i precedenti del componente html, csse ts. In tsovviamente il nome della classe verrebbe sostituito. È il metodo più sicuro ma richiede un po 'di tempo.

— Priyanka Arora
fonte

0

In WebStorm, è possibile fare clic con il tasto destro → Rifattore → Rinomina sul nome del componente nel file TypeScript e cambierà il nome ovunque.

— Ollie
fonte