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

178

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

angular angular-cli rename angular-components Томас Исо
источник
1
Просто переименуйте селектор, если вы хотите изменить в HTML-тег. Если вы хотите изменить класс, вам нужно сделать это вручную.
Александр Иисус Джин
Пока они не добавят, ng destroyтебе не повезло ...
Уильям Хэмпшир
4
Вы можете отслеживать эту функцию в этой теме: github.com/angular/angular-cli/issues/900
Андрей Романчак,
поиск и замена, переименование пары файлов / каталогов .... работа сделана
ldgorman

Ответы:

180

Нет!

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

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

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

Анируддха дас
источник
6
Это также удобно для повторного использования старых проектов.
Лев
1
новые WebStorm 2018.1.2слова позволяют переименовывать компонент, но никогда не использовали его. попробую позже когда-нибудь
Анируддха Дас
2
Например, в VSCode, когда что-то не так (импортированный файл, который не существует, несуществующий компонент и т. Д.), Вы можете увидеть индикации ошибок в панели проводника файлов слева. Итак, в моем случае мне нужно было переименовать компонент, я просто переименовал его папку и имена внутренних файлов, затем я просто следовал всем указаниям об ошибках, соответственно изменяя имя этого компонента. Я полагаю, что эта функция существует и в других современных IDE в наши дни ... Но было бы здорово иметь команду angular-cli, которая делает это автоматически (во многом как "ng gc ...")! Удачного кодирования! :)
TheCuBeMan
1
Об этой функции с 2016 года ведется обсуждение этой функции: github.com/angular/angular-cli/issues/900 Все запросы на такую ​​функцию связаны с этой веткой и закрыты. @AniruddhaDas, не могли бы вы добавить это к ответу?
Стефан
1
@Stefan добавил сейчас. Посмотрите, выглядит ли все в порядке, не стесняйтесь редактировать.
Анируддха дас
48

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

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

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

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

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

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

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

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

введите описание изображения здесь

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

samuelj90
источник
3
Вы говорите о ссылках, файлах и импорте, а как насчет переименования компонентов?
Ортомала Локни
1
@OrtomalaLokni angular-cli не поддерживает переименование. Задача переименования может быть достигнута с помощью этих трех шагов.
samuelj90
1

см. angular-rename

устанавливать

npm install -g angular-rename

использование 

$ ./angular-rename OldComponentName NewComponentName
emrhzc
источник
1
Github хранилище больше не существует
Эммануэль
худший компонент, когда-либо ... нет надлежащих документов, полных ошибок ... хорошая идея ... но бесполезная
DS_web_developer
1

В то время как OP запрашивает команду CLI, некоторые ответы сосредоточены на IDE. В этом ответе я только подтверждаю, что текущий WebStorm / IntelliJ разрешает переименование компонента. Все, что нужно сделать, это попытаться переименовать класс в .tsфайле. Вам будут представлены:

введите описание изображения здесь

и переименование будет выполнено во всех соответствующих местах.

П Марецки
источник
Об этом впервые сообщил в текущей теме @Aniruddha Das
P Marecki
0

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

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

    ng создать компонент newName

  2. Используйте редактор кода Visual Studio или любой другой редактор, чтобы затем удобно перемещать код / ​​фрагменты рядом!

  3. В Linux используйте grep & sed (find & replace) для поиска / замены ссылок.

    grep -ir "oldname"

    cd твоя папка

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

Салах-1
источник
0

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

Приянка Арора
источник
0

В WebStorm вы можете щелкнуть правой кнопкой мыши → Refactor → Rename по имени компонента в файле TypeScript, и он повсеместно изменит имя.

Олли
источник