Как переименовать компонент в Angular CLI?

Есть ли ярлык для переименования компонента с помощью Angular CLI, кроме ручного редактирования всех файлов компонентов, таких как имя папки,.css,.ts, spec.ts и app.module.ts?

Ответ 1

Нет!

Нет команды, которая изменит имя всех файлов, созданных с помощью команды component create. Так созданы ts, html, css/scss, .spec.ts файлы должны быть переименованы/отредактированы вручную.

Я частый пользователь angular cli, и я думаю, что это хорошо иметь команду, так как некоторое время мы просто создаем angular компоненты и должны переименовать ее. Так как этой команды переименования нет, удаление созданного angular компонента, директивы и т.д. И повторный запуск команды для создания компонента - это действительно боль.

Вот ссылка на обсуждение, чтобы добавить эту функцию переименовать angular компонент

Ответ 2

В настоящее время Angular CLI не поддерживает функцию переименования или рефакторинга кода.

Вы можете достичь такой функциональности с помощью некоторой IDE.

Intellij, Eclipse, VSCode и т.д. Имеет поддержку рефакторинга по умолчанию.

В настоящее время VSCode показывает некоторый восходящий тренд, лично я фанат этого

Рефакторинг с VSCode

Определение ссылки: - VS Code поможет вам найти все ссылки на переменную, выбрав переменную и нажав сочетание клавиш SHIFT + F12. Это невероятно хорошо работает с Type Script.

Переименование всех экземпляров ссылок: - После нахождения всех ссылок, которые вы можете нажать F2, откроется всплывающее окно, вы можете изменить значение и нажать Enter, чтобы обновить все экземпляры ссылок.

Переименование файлов и импорт Вы можете переименовать файл и ссылки на импорт с помощью плагина. Более подробную информацию можно найти здесь

С помощью описанных выше шагов после переименования переменных и файлов вы можете добиться переименования углового компонента.

Ответ 3

ОБНОВЛЕНИЯ: для переименования компонентов вы можете использовать: ng-rn

npm i ng-rn

Применение

  cd /path/to/angular-project/
  ng-rn old-button fancy-button

Инструмент ищет компоненты в src/app/. Если ваши компоненты расположены на более сложном пути, таком как src/app/my-vip-components, просто измените каталог:

  cd src/app/my-vip-components
  ng-rn old-button fancy-button

Перед любыми изменениями сделайте свои резервные копии :)

Ответ 4

Как показал первый ответ, в настоящее время нет возможности переименовать компоненты, поэтому мы все просто говорим о работе! Вот что я делаю:

Создайте новый компонент, который вам понравился.

ng создать компонент newName
Используйте редактор кода Visual Studio или любой другой редактор, чтобы затем удобно перемещать код/штуки бок о бок!
В Linux используйте grep & sed (find & replace), чтобы найти/заменить ссылки.

grep -ir "oldname"

cd ваша папка

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

Ответ 5

Я лично не нашел ни одной команды для того же. Просто создайте новый компонент (переименованное имя) и скопируйте и вставьте предыдущий компонент html, css и ts. В ts очевидно, что имя класса будет заменено. Это самый безопасный метод, но занимает немного времени.

Ответ 6

см. angular-rename

установить

npm install -g angular-rename

использовать

$ ./angular-rename OldComponentName NewComponentName