Як перейменувати компонент у Angular CLI?

178

Чи є ярлик для перейменування компонента за допомогою Angular CLI, крім того, щоб вручну редагувати всі компоненти компонентів, такі як ім'я папки, .css, .ts, spec.ts та app.module.ts?

— Томас Ізео
джерело

1

Просто перейменуйте селектор, якщо ви хочете змінити тег html. Якщо ви хочете змінити клас, вам потрібно зробити це вручну.

— Олександр Ісус Гена

Поки вони не додадуть, ng destroyвам не пощастило ...

— Вільям Хемпшир,

4

Ви можете відстежувати функцію в цій темі: github.com/angular/angular-cli/isissue/900

— Андрій Романчак

пошук і заміна, перейменування пари файлів / каталогів .... виконана робота

— ldgorman

180

Немає!

Немає команди, яка змінить ім'я всіх файлів, створених за допомогою команди створення компонента. Так створюється ts, html, css/scss, .spec.ts файли повинні бути вручну перейменований / під ред.

Я є частим користувачем, angular cliі я думаю, що це було б приємною командою, оскільки ми певний час просто створюємо кутові компоненти та потребуємо їх перейменування. Оскільки цієї команди перейменування немає, видалення створеного кутового компонента, директиви тощо і знову запуск команди для створення компонента справді болить.

Ось посилання для обговорення, щоб додати цю функцію перейменувати кутовий компонент

— Анірудда Дас
джерело

6

Це також було б корисно для повторного використання старих проектів.

— Лев

1

нові WebStorm 2018.1.2слова дозволяють перейменувати компонент, але ніколи його не використовували. спробую пізніше колись

— Анірудда, Дас

2

Наприклад, у VSCode, коли щось не так (імпортований файл, який не існує, неіснуючий компонент тощо), ви можете побачити вказівки помилок на панелі провідника файлів зліва. Отже, у моєму випадку мені потрібно було перейменувати компонент, я просто перейменував його папки та внутрішні імена файлів, потім я просто дотримувався всіх вказівок на помилки, відповідно змінюючи ім’я цього компонента. Напевно, ця функція існує і в інших сучасних ІДЕ в наші дні ... Але мати команду angular-cli, яка робить це автоматично (на зразок "ng gc ..."), було б чудово! Щасливого кодування! :)

— TheCuBeMan

1

Про цю функцію ведеться дискусія з 2016 року про цю функцію: github.com/angular/angular-cli/isissue/900 Усі запити щодо такої функції пов'язані з цією темою та закриті. @AniruddhaDas Ви не проти додати це у відповідь?

— Стефан

1

@Stefan додано зараз. подивіться, чи виглядає добре, також сміливо редагуйте.

— Анірудда Дас

48

В даний час Angular CLI не підтримує функцію перейменування або рефакторингу коду.

Ви можете досягти такої функціональності за допомогою деяких IDE.

Intellij, Eclipse, VSCode тощо. Підтримують рефакторинг за замовчуванням.

Сьогодні VSCode демонструє деяку тенденцію до зростання, особисто я фанат цього

Рефакторинг за допомогою VSCode

Посилання на визначення : - Код VS допоможе вам знайти всі посилання змінної, вибравши змінну та натиснувши ярлик SHIFT+ F12. Це неймовірно добре працює з Type Script.

Перейменування всіх примірників : - Після пошуку всіх посилань ви можете натиснути F2, відкриється спливаюче вікно, і ви можете змінити значення і натиснути клавішу Enter, оновіть усі посилання.

Перейменування файлів та імпорту Ви можете перейменувати файл та його імпортні посилання за допомогою плагіна. Детальніше можна ознайомитись тут

Виконуючи вище дії після перейменування змінних та файлів, ви можете досягти кутового перейменування компонентів.

— samuelj90
джерело

3

Ви говорите про довідники, файли та імпорт, а як щодо перейменування компонентів?

— Ортомала Локні

1

@OrtomalaLokni angular-cli не підтримує перейменування. Завдання перейменування може бути досягнуто за допомогою цих трьох етапів.

— samuelj90

1

див. кутовий-перейменувати

встановити

npm install -g angular-rename

використання

$ ./angular-rename OldComponentName NewComponentName

— emrhzc
джерело

1

Репозиторій Github більше не існує

— Еммануель

найгірший компонент evet ... немає належних документів, повно помилок ... приємна ідея ... але марно

— DS_web_developer

1

У той час як ОП запитує команду CLI, частина відповідей зосереджується на IDE. У цій відповіді я просто підтверджую, що поточний WebStorm / IntelliJ дозволяє перейменувати компонент. Все, що потрібно зробити, - це спроба перейменувати клас у .tsфайлі. Вам представлять:

і перейменування буде виконано у всіх відповідних місцях.

— П Марецький
джерело

Про це вперше повідомили у поточній темі @Aniruddha Das

— P Marecki

0

Як зазначено в першій відповіді, в даний час немає можливості перейменовувати компоненти, тому ми всі просто говоримо про робочі місця! Це те, що я роблю:

Створіть новий компонент, який вам сподобався.

ng генерує компонент newName
Використовуйте редактор коду Visual Studio або будь-який інший редактор, щоб потім зручно переміщати код / фрагменти поруч!
В Linux використовуйте grep & sed (знайти і замінити), щоб знайти / замінити посилання.

grep -ir "стара назва"

cd свою папку

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

— салах-1
джерело

0

Я особисто не знайшов жодної команди для того ж. Просто зробіть новий компонент (перейменовано ім'ям) і скопіювати вставити попередню компоненту html, cssі ts. У tsочевидно ім'я класу буде замінено. Це найбезпечніший метод, але вимагає небагато часу.

— Приянка Арора
джерело

0

У WebStorm ви можете натиснути правою кнопкою миші → Refactor → Перейменувати назву компонента у файлі TypeScript, і це змінить назву скрізь.

— Оллі
джерело