Каков наилучший способ удаления компонента с помощью CLI


227

Я попытался использовать «ng destroy component foo», и он сказал мне: «Команда destroy не поддерживается Angular-CLI»

Как правильно удалять компоненты с помощью Angular CLI?


2
Он пока не поддерживается CLI, однако, если перед тем, как создать компонент, вы удостоверились, что более старые изменения были зафиксированы в git, вы можете просто удалить новые файлы и выполнить git checkout для измененных (или просто git checkout src).
Санджай Верма

Это умный взломать. Это работает наверняка. Команде команды придется решать эту проблему рано или поздно. Я думаю, что они в настоящее время заняты другими вопросами. Но я думаю, что пока мы должны жить с вашим решением. Опубликуйте это как ответ. @SanjayVerma
Аман

Ответы:


167

destroyили что-то подобное может прийти к CLI, но это не основной задачей в настоящее время. Так что вам нужно будет сделать это вручную.

Удалите каталог компонента (если вы его не использовали --flat), а затем удалите его из того, NgModuleв котором он объявлен.

Если вы не уверены в том, что делать, я предлагаю вам «чистое» приложение, означающее отсутствие текущих gitизменений. Затем сгенерируйте компонент и посмотрите, что изменилось в репо, чтобы вы могли оттуда вернуться, что вам нужно будет сделать, чтобы удалить компонент.

Обновить

Если вы просто экспериментируете с тем, что вы хотите сгенерировать, вы можете использовать --dry-runфлаг, чтобы не создавать никаких файлов на диске, просто посмотрите обновленный список файлов.


132
  1. Удалите папку, содержащую этот компонент.
  2. В app.module.ts удалите оператор импорта для этого компонента и удалите его имя из раздела объявлений @NgModule
  3. Удалите строку с оператором экспорта для этого компонента из index.ts.

12
где находится index.ts? Спасибо
Шейн Дж

40
в последних версиях CLI они не генерируют его.
Яков Файн

7
Я думаю, что еще один шаг пропущен ... снова запустить ng serve, не так ли?
gsalgadotoledo

index.ts? Не в 5
Эндрю Копер

2
в Angular6 необходимо удалить оператор импорта из app-routing.module.ts
Tyro

26

Так как он еще не поддерживается с помощью углового интерфейса командной строки

Итак, вот возможный способ, прежде чем, пожалуйста, посмотрите, что происходит, когда вы создаете компонент / сервис с помощью CLI (ex. ng g c demoComponent).

  1. Создает отдельную папку с именем demoComponent( ng g c demoComponent).
  2. Он генерирует HTML,CSS,tsи specфайл, посвященный demoComponent.
  3. Кроме того, он добавляет зависимость внутри файла app.module.ts для добавления этого компонента в ваш проект.

так что делай это в обратном порядке

  1. Удалить зависимость от app.module.ts
  2. Удалить эту папку компонента.

при удалении зависимости нужно сделать две вещи.

  1. Удалите ссылку на строку импорта из файла app.module.ts.
  2. Удалите объявление компонента из массива объявлений @NgModule в app.module.ts.

11

Используя код Visual Studio, удалите папку компонента и просмотрите в Project Explorer (слева) файлы, которые окрашены в красный цвет, что означает, что файлы затронуты и вызвали ошибки. Откройте каждый файл и удалите код, который использует компонент.


11

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

  1. Удалить ссылки на импорт для каждого компонента из app.module
  2. Удалить папки компонентов.
  3. Вам также необходимо удалить объявление компонента из массива объявлений @NgModule в файле app.module.ts

5

Я написал скрипт bash, который должен автоматизировать процесс, написанный Яковом Файном ниже. Это можно назвать как ./removeComponent myComponentName. Это было проверено только с Angular 6

#!/bin/bash
if [ "$#" -ne 1 ]; then
    echo "Input a component to delete"
    exit 1
fi

# finds folder with component name and deletes
find . -type d -name $1 | xargs rm -rf

# removes lines referencing the component from app.module.ts
grep -v $1 app.module.ts > temp
mv temp app.module.ts

componentName=$1
componentName+="Component"

grep -v -i $componentName app.module.ts > temp
mv temp app.module.ts

Пожалуйста, добавьте примечание для меня, чтобы изменить это, если угловой климат изменится в будущем
Эйдан Гримшоу

3

Я не уверен, что это лучший способ, но он сработал для меня.

  • Сначала я удалил папку компонентов.
  • Затем я очистил app.module.ts, app.component.ts & app.component.html от импорта и объявлений, связанных с компонентом, который я хотел удалить.
  • Точно так же я очистил main.ts.

Я просто сохранил и обновил приложение, и оно заработало.


3

Ответ для Angular 2+

Удалить компонент from imports and declaration arrayapp.modules.ts.

Во-вторых, проверьте, что его ссылка добавлена ​​в другой модуль. Если да, удалите его

наконец delete that component Manuallyиз приложения, и все готово.

Или вы можете сделать это в обратном порядке.


2

Из app.module.ts:

  • стереть строку импорта для конкретного компонента;
  • стереть его объявление из @NgModule;

Затем удалите папку компонента , который вы хотите удалить , и его Включаемые файлы ( .component.ts, .component.html, .component.cssи .component.spec.ts).

Готово.

-

Я читаю людей, говорящих о стирании его с main.ts. Вы не должны были импортировать его оттуда, так как он уже импортирует AppModule, а AppModule - это тот, который импортирует все созданные вами компоненты.


2

Мне нужно было удалить директиву Angular 6, спецификационный файл которой был ошибочным. Даже после удаления поврежденных файлов, удаления всех ссылок на него и перестройки приложения TS все равно сообщала об этой же ошибке. Для меня сработало перезапуск Visual Studio - это очистило ошибку и все следы старой нежелательной директивы.


0

Прежде всего, удалите папку компонента, которую вы должны удалить, а затем удалите ее записи, которые вы сделали в файлах "ts".


0

Если вы ищете какую-то команду в CLI, тогда ans пока НЕТ . Но вы можете сделать это вручную, удалив папку компонента и все ссылки.


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.