proyecto - instalar angular 6

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

Question

¿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?

Answer 1

¡No!

No hay ningún comando que cambie el nombre de todos los archivos generados mediante el comando de creación de componentes. Por lo css/scss , los archivos ts , html , css/scss , .spec.ts deben ser renombrados / editados manualmente.

Soy un usuario frecuente de angular cli y creo que es bueno tener un comando, ya que en algún momento solo creamos componentes angulares y necesitamos cambiarle 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 doloroso.

Aquí está el enlace de discusión para agregar esta característica github.com/angular/angular-cli/issues/900

Answer 2

ACTUALIZACIONES: Para renombrar sus componentes, puede usar: 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 se encuentran 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 :)

Answer 3

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 la 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, puede presionar F2 abrirá una ventana emergente y puede cambiar el valor y hacer clic en ingresar para actualizar todas las instancias de referencia.

Cambio de 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 here

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.

Answer 4

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

1. Crea el nuevo componente que te haya gustado.

   ng generar componente newName

2. ¡Usa el editor de código de Visual Studio o cualquier otro editor para mover convenientemente código / piezas de lado a lado!

3. 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'' *