¿Cómo cambiar el nombre de un componente en CLI angular?

178

¿Existe algún método abreviado para cambiar el nombre de un componente con la CLI angular que no sea editar manualmente todos los archivos de componentes, como el nombre de la carpeta, .css, .ts, spec.ts y app.module.ts?

— Thomas Easo
fuente

1

Simplemente cambie el nombre del selector, si desea cambiar la etiqueta html. Si desea cambiar la clase, debe hacerlo manualmente.

— Alaksandar Jesus Gene

Hasta que agreguen ng destroyque no tienes suerte ...

— William Hampshire

44

Puede monitorear la función en este hilo: github.com/angular/angular-cli/issues/900

— Andrii Romanchak

buscar y reemplazar, cambiar el nombre de un par de archivos / directorios ... trabajo realizado

— ldgorman

180

¡No!

No hay ningún comando que cambie el nombre de todos los archivos generados usando el comando create del componente. Así creada ts, html, css/scss, .spec.ts los archivos tienen que ser renombrado manualmente / editado.

Soy un usuario frecuente angular cliy creo que este sería un comando útil, ya que en algún momento solo creamos componentes angulares y necesitamos cambiarles el nombre. Como este comando de cambio de nombre no está allí, eliminar el componente angular creado, la directiva, etc. y volver a ejecutar el comando para crear el componente es realmente un dolor.

Aquí está el enlace de discusión para agregar esta característica renombrar componente angular

— Aniruddha Das
fuente

66

Esto también sería útil para reutilizar proyectos antiguos.

— Leo

1

nuevo WebStorm 2018.1.2en palabras permite cambiar el nombre del componente pero nunca lo usó. intentará más tarde algún día

— Aniruddha Das

2

En VSCode, por ejemplo, cuando hay algo mal (archivo importado que no existe, componente no existente, etc.), puede ver indicaciones de error en el panel del explorador de archivos a la izquierda. Entonces, en mi caso, necesitaba cambiar el nombre de un componente, solo cambié el nombre de su carpeta y los nombres de los archivos internos, luego seguí todas las indicaciones de error, modificando el nombre de este componente en consecuencia. Supongo que esta característica también existe en otros IDEs modernos en estos días ... ¡Pero tener un comando angular-cli que haga esto automáticamente (al igual que "ng gc ...") sería genial! ¡Feliz codificación! :)

— TheCuBeMan

1

Hay una discusión sobre esta característica desde 2016 sobre esta característica: github.com/angular/angular-cli/issues/900 Todas las solicitudes de dicha característica están vinculadas a este hilo y cerradas. @AniruddhaDas, ¿te importaría agregar esto a la respuesta?

— Stefan

1

@Stefan agregado ahora. ver si se ve bien, siéntase libre de editar también.

— Aniruddha Das

48

Actualmente, Angular CLI no admite la función de renombrar o refactorizar código.

Puede lograr dicha funcionalidad con la ayuda de algunos IDE.

Intellij, Eclipse, VSCode, etc. tiene soporte predeterminado para la refactorización.

Hoy en día VSCode está mostrando una tendencia alcista, personalmente soy fanático de esto

Refactorización con VSCode

Determinación de referencia : - VS Code lo ayuda a encontrar todas las referencias de una variable seleccionando la variable y presionando el atajo SHIFT+ F12. Esto funciona increíblemente bien con Type Script.

Cambiar el nombre de todas las instancias de referencia : - Después de encontrar todas las referencias que puede presionar, F2se abrirá una ventana emergente y puede cambiar el valor y hacer clic en ingresar para actualizar todas las instancias de referencia.

Cambiar el nombre de archivos e importaciones Puede cambiar el nombre de un archivo y sus referencias de importación con un complemento. Más detalles se pueden encontrar aquí

Con los pasos anteriores después de cambiar el nombre de las variables y los archivos, puede lograr el cambio de nombre del componente angular.

— samuelj90
fuente

3

Habla de referencias, archivos e importaciones, pero ¿qué pasa con el cambio de nombre de los componentes?

— Ortomala Lokni

1

@OrtomalaLokni angular-cli no admite el cambio de nombre. La tarea de cambio de nombre se puede lograr con estos tres pasos.

— samuelj90

1

ver cambio de nombre angular

Instalar en pc

npm install -g angular-rename

utilizar

$ ./angular-rename OldComponentName NewComponentName

— emrhzc
fuente

1

El repositorio de Github ya no existe

— Emmanuel

el peor componente, incluso ... no hay documentos adecuados, llenos de errores ... buena idea ... pero inútil

— DS_web_developer

1

Mientras que el OP solicita un comando CLI, algunas de las respuestas se centran en los IDE. En esta respuesta, solo confirmo que WebStorm / IntelliJ actual permite cambiar el nombre del componente. Todo lo que hay que hacer es intentar cambiar el nombre de la clase en el .tsarchivo. Se le presentará:

y el cambio de nombre se realizará en todos los lugares relevantes.

— P Marecki
fuente

Esto fue informado por primera vez en el hilo actual por @Aniruddha Das

— P Marecki

0

Como indicó la primera respuesta, actualmente no hay forma de cambiar el nombre de los componentes, ¡así que todos estamos hablando de soluciones alternativas! Esto es lo que hago:

Crea el nuevo componente que te haya gustado.

ng generar componente newName
¡Usa el editor de código de Visual Studio o cualquier otro editor para mover convenientemente código / piezas de lado a lado!
En Linux, use grep & sed (buscar y reemplazar) para buscar / reemplazar referencias.

grep -ir "nombre antiguo"

cd tu carpeta

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

— salah-1
fuente

0

Personalmente no he encontrado ningún comando para el mismo. Sólo hacer un nuevo componente (nombre cambiado el nombre) y copiar y pegar la década de los componentes anteriores html, cssy ts. En tsobviamente, el nombre de la clase sería reemplazado. Es el método más seguro, pero lleva un poco de tiempo.

— Priyanka Arora
fuente

0

En WebStorm, puede hacer clic con el botón derecho → Refactorizar → Cambiar nombre en el nombre del componente en el archivo TypeScript y cambiará el nombre en todas partes.

— Ollie
fuente