web-dev-qa-db-ja.com

CLIでコンポーネントを削除するための最良の方法は何ですか

「ng destroy component foo」を使用してみたところ、「destroyコマンドはAngular-CLIではサポートされていません」というメッセージが表示されます。

Angular CLIを使用してコンポーネントを正しく削除する方法

angularangular-cli
166
Jus10

destroyまたは同様のものがCLIに来るかもしれませんが、現時点ではそれは主な焦点ではありません。したがって、これを手動で実行する必要があります。

コンポーネントディレクトリを削除し（--flatを使用しなかったと仮定して）、それが宣言されているNgModuleから削除します。

あなたが何をすべきかわからない場合は、私はあなたが現在のgitの変更がないことを意味する "クリーン"なアプリを持っていることをお勧めします。それからコンポーネントを生成し、リポジトリ内で何が変更されたのかを確認します。そうすれば、そこからコンポーネントを削除するために必要なことをバックトラックすることができます。

更新

何を生成したいのかを試しているだけの場合は、--dry-runフラグを使用してディスク上にファイルを生成しないようにすることができます。更新されたファイルリストを参照してください。

121
Brocco
  1. このコンポーネントを含むフォルダを削除します。
  2. App.module.tsで、このコンポーネントのインポート文を削除し、その名前を@NgModuleの宣言セクションから削除します。
  3. このコンポーネントのexportステートメントを含む行をindex.tsから削除します。
100
Yakov Fain

角度CLIを使用したサポートはまだされていないので

そのため、ここで可能な方法があります。その前に、CLIを使用してコンポーネント/サービスを作成するとどうなるかを確認してください（例：ng g c demoComponent）。

  1. demoComponent（ng g c demoComponent）という名前の別のフォルダを作成します。
  2. DemoComponent専用のHTML,CSS,tsおよびspecファイルが生成されます。
  3. また、app.module.tsファイル内に依存関係を追加して、そのコンポーネントをプロジェクトに追加します。

逆の順序でやりなさい

  1. app.module.tsからDependencyを削除
  2. そのコンポーネントフォルダを削除します。
23
UniCoder

現在Angular CLIはコンポーネントを削除するオプションをサポートしていません、あなたはそれを手動で行う必要があります。

  1. App.moduleからすべてのコンポーネントのインポート参照を削除します
  2. コンポーネントフォルダを削除します。
9
Bernardo Soriano

Visual Studioのコードを使用して、コンポーネントフォルダを削除し、プロジェクトエクスプローラ（左側）に赤で表示されているファイルを確認します。これは、ファイルが影響を受けてエラーが発生したことを意味します。各ファイルを開き、コンポーネントを使用しているコードを削除します。

6
babidi

以下にYakov Fainによって書かれたプロセスを自動化するはずの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
4
Aidan Grimshaw

それが最善の方法かどうかはわかりませんが、うまくいきました。

  • まず、コンポーネントフォルダを削除しました。
  • 次に、削除したいコンポーネントに関連するインポートと宣言のapp.module.ts、app.component.ts、およびapp.component.htmlをクリアしました。
  • 同様に、私はmain.tsをクリアしました。

アプリを保存して更新したところ、うまくいきました。

2
TheMeanCoder

Angular 2+への回答

App.modules.tsのコンポーネントfrom imports and declaration arrayを削除します。

次に、その参照が他のモジュールに追加されていることを確認し、そうであればそれを削除し、

最後にappからdelete that component Manuallyを入力すれば完了です。

または逆の順序でもできます。

2
Deva

App.module.tsから：

  • 特定のコンポーネントのインポート行を消去します。
  • 宣言を@NgModuleから消去します。

次に、削除するコンポーネントのフォルダとそれに含まれるファイル（.component.ts、.component.html、.component.css、および.component.spec.ts）を削除します。

完了しました。

-

私はmain.tsからそれを消去することについて言っている人々を読みました。最初はAppModuleをインポートしているので、そこからインポートすることは想定されていません。AppModuleは、作成したすべてのコンポーネントをインポートするものです。

1
cheddar

- ルーティングモジュールからコンポーネントのパスを削除する - プロジェクト全体でコンポーネントのクラス名を検索する

0
xx yy

まず最初に、削除しなければならないコンポーネントフォルダを削除してから、 "ts"ファイルに作成したエントリを削除します。

0
the shashank

Specファイルに誤りがあるAngular 6ディレクティブを削除する必要がありました。問題のあるファイルを削除し、それへの参照をすべて削除してアプリを再構築した後でも、TSは依然として同じエラーを報告していました。私のために働いたのはVisual Studioを再起動することでした - これはエラーと古い不要な指令のすべての痕跡をクリアしました。

0
T. Bulford

CLIでコマンドを探しているのであれば、その後は _ no _ になります。しかし、_手動でコンポーネントフォルダを削除するとすべての参照を行うことができます。

0
Hidayt Rahman