Cómo cambiar el nombre de un componente en Angular CLI?
Hay algún atajo para cambiar el nombre de un componente con la CLI Angular que no sea la edición manual de todos los archivos del componente, como el nombre de la carpeta,.css, .ts, spec.ts y app.módulo.ts?
4 answers
¡No!
No hay ningún comando que cambie el nombre de todos los archivos generados usando el comando component create. Así creado ts, html, css/scss, .spec.ts
los archivos deben ser renombrados/editados manualmente.
Soy un usuario frecuente de angular cli y creo que este es un buen comando ya que en algún momento solo creamos componentes angulares y necesitamos cambiarle el nombre. Como este comando renombrar no está allí, eliminar el componente angular creado, directiva, etc y otra vez ejecutar el comando para crear el componente es realmente dolor.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-28 18:30:21
Actualmente Angular CLI no admite la función de renombrar o refactorizar código.
Puede lograr dicha funcionalidad con la ayuda de algún IDE.
Intellij, Eclipse, VSCode, etc.. tiene soporte predeterminado para la refactorización.
Hoy en día VSCode está mostrando alguna tendencia alcista, personalmente soy un fan de esto
Refactorización con VSCode
Determinig reference : -
VS Code le ayuda a encontrar todas las referencias de una variable seleccionando variable y pulsando atajo SHIFT + F12. Esto funciona increíblemente bien con el Script de tipo.
Cambiar el nombre de todas las instancias de referencia :-
Después de encontrar todas las referencias puede presionar F2 se abrirá una ventana emergente y puede cambiar el valor y hacer clic en enter esto actualizará todas las instancias de referencia.
Renombrar archivos e importaciones Puede cambiar el nombre de un archivo y sus referencias de importación con un plugin. Se pueden encontrar más detalles aquí
Con los pasos anteriores después de cambiar el nombre de las variables y archivos, puede lograr el cambio de nombre del componente angular.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-22 07:27:57
ACTUALIZACIONES: Para cambiar el nombre de usted componentes, puede utilizar: ng-rn
npm i ng-rn
Uso
cd /path/to/angular-project/
ng-rn old-button fancy-button
La herramienta busca los componentes en src/app/. Si sus componentes están ubicados en una ruta más compleja como src/app/my-vip-components, simplemente cambie el directorio:
cd src/app/my-vip-components
ng-rn old-button fancy-button
Antes de cualquier cambio, haga sus copias de seguridad :)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-14 22:46:15
Como indicó la primera respuesta, actualmente no hay forma de cambiar el nombre de los componentes, ¡así que todos estamos hablando de soluciones! Esto es lo que hago:
-
Crea el nuevo componente que te ha gustado.
Ng generar nuevo nombre del componente
Utilice Visual studio code editor o cualquier otro editor para mover convenientemente código/piezas lado a lado!
-
En Linux, use grep & sed (find & replace) para buscar/reemplazar referencias.
Grep-ir "oldname"
Cd su carpeta
Sed-i 's / oldName / newName / g' *
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-13 09:20:49