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

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

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

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

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

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

Обновить

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

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

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

Итак, вот возможный способ, прежде чем, пожалуйста, посмотрите, что происходит, когда вы создаете компонент / сервис с помощью 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.

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

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

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

Я написал скрипт 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

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

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

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

Ответ для Angular 2+

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

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

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

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

Из app.module.ts:

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

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

Готово.

-

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

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

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

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

Это не поддерживается Angular CLI, и они не собираются включать его в ближайшее время.

Вот ссылка на актуально созданную проблему - https://github.com/angular/angular-cli/issues/1776

И скриншот решения от чиновников -