web-dev-qa-db-ja.com

Angular-CLIを使用して特定のモジュールにコンポーネントを作成する

私はangular-cliを使い始めていて、やりたいことについての答えを見つけるためにすでにたくさん読んでいます...成功しなかったので、ここに来ました。

新しいモジュールにコンポーネントを作成する方法はありますか？

例：ng g module newModule

ng g component newComponent（newModuleにこのコンポーネントを追加する方法？）

angular-cliのデフォルトの動作は、すべての新しいコンポーネントをapp.module内に入れることです。私は自分のコンポーネントがどこにあるのかを選択したいのです。そうすれば、私は別々のモジュールを作成でき、自分のすべてのコンポーネントをapp.moduleの中に入れることができなくなります。 Angular-Cliを使用してそれを実行することも可能ですし、手動で実行する必要がありますか？

angulartypescriptangular-cli
108
Elmer Dantas

モジュールの一部としてコンポーネントを作成するには

  1. モジュールを生成するためのng g module newModule
  2. ディレクトリをnewModuleフォルダに変更するcd newModule
  3. モジュールの子としてコンポーネントを作成するためのng g component newComponent。
145
Alexander Ciesielski
ng g component nameComponent --module=app.module.ts
80
Daniel Fernando Acosta Ceballo

執筆時点でおそらくAlexander Ciesielskiの答えが正しかったかどうかはわかりませんが、これが機能しなくなったことを確認できます。プロジェクトのどのディレクトリをAngular CLIで実行してもかまいません。あなたがタイプするなら

ng g component newComponent

コンポーネントを生成し、それをapp.module.tsファイルにインポートします。

CLIを使用して自動的に他のモジュールにインポートする唯一の方法は、次のように指定することです。

ng g component moduleName/newComponent

moduleNameは、プロジェクトで既に定義したモジュールです。 moduleNameが存在しない場合は、コンポーネントをmoduleName/newComponentディレクトリに配置しますが、それでもapp.moduleにインポートします。

60
Diskdrive

Cliを使用してトップレベルのモジュールフォルダー内にコンポーネントを生成し、そのコンポーネントに自動的にモジュールの宣言コレクションを追加させる方法を示した答えは見つかりませんでした。

モジュールを作成するには、これを実行します。

ng g module foo

Fooモジュールフォルダ内にコンポーネントを作成し、それをfoo.module.tsの宣言コレクションに追加するには、次のコマンドを実行します。

ng g component foo/fooList --module=foo.module.ts

そしてcliはこのようにモジュールとコンポーネントを足場にします。

enter image description here

- 角度のcliの新しいバージョンは異なった振る舞いをします。 1.5.5はモジュールファイル名を必要としないので、v1.5.5のコマンドは

ng g component foo/fooList --module=foo
23
cobolstinks

以下のコマンドを試すことができます。

ng -> Angular 
g  -> Generate
c  -> Component
-m -> Module

それからあなたの命令は以下のようになるでしょう：

ng g c user/userComponent -m user.module
11
user2662006

これは私のために働いたものです：

1 -->  ng g module new-module

2 -->  ng g c new-module/component-test --module=new-module/new-module.module.ts

ディレクトリなしでコンポーネントを生成したい場合は--flatフラグを使用してください。

6
Mohamed Makkaoui

Angular v4以上の場合は、単に次のように使用します。

ng g c componentName -m ModuleName
6
Shemzz

アプリケーション内の複数のモジュールについても同様の問題があります。コンポーネントはどのモジュールに対しても作成できますので、コンポーネントを作成する前に特定のモジュールの名前を指定する必要があります。

'ng generate component newCompName --module= specify name of module'
1
vivek

この簡単なコマンドを使用してください。

ng g c users/userlist

users：あなたのモジュール名。

userlist：あなたのコンポーネント名。

1
Hasan Fathi

特定のルートフォルダを持つコンポーネントベースの子モジュールを作成しました

下記のcliコマンドを指定して、チェックアウトしてください

ng g c Repair/RepairHome -m Repair/repair.module

Repairは、子モジュールのルートフォルダです

-mは--moduleです

compountのc

生成のためのg

1
sathish

Angular docsによると、特定のモジュール用のコンポーネントを作成する方法は、

ng g component <directory name>/<component name>

"directory name" = CLIが機能モジュールを生成した場所

例： - 

ng generate component customer-dashboard/CustomerDashboard

これにより、customer-dashboardフォルダ内に新しいコンポーネントのフォルダが生成され、CustomerDashboardComponentを使用して機能モジュールが更新されます。

1
Sksaif Uddin
  1. まず、実行してモジュールを生成します。
ng g m modules/media

これはmediaフォルダの中にmodulesというモジュールを生成します。

  1. 次に、このモジュールに追加されたコンポーネントを生成します
ng g c modules/media/picPick --module=modules/media/media.module.ts

ng g c modules/media/picPickコマンドの最初の部分では、modules/mediaフォルダの中にpicPickという名前のコンポーネントフォルダが生成され、新しいmediaモジュールが含まれます。

2番目の部分では、モジュールファイルにインポートしてこのモジュールのpicPick配列に追加することにより、mediaモジュールで宣言された新しいdeclarationsコンポーネントを作成します。

working tree

enter image description here

1
Elhakim

複数のアプリが.angular-cli.jsonで宣言されている場合

"apps": [{
    "name": "app-name",
    "root": "lib",
    "appRoot": ""
}, {...} ]

あなたはできる ：

ng g c my-comp -a app-name

-aは--app（name）を表します

0
Sam

Angular CLIを使用してAngular 4アプリにコンポーネントを追加します

アプリに新しいAngular 4コンポーネントを追加するには、コマンドng g component componentNameを使用します。このコマンドの実行後、Angular CLIはフォルダcomponent-nameの下にsrc\appを追加します。また、同じ参照がsrc\app\app.module.tsファイルに自動的に追加されます。

コンポーネントは@Componentデコレータ関数とそれに続くclassを持ち、それはexportedである必要があります。 @Componentデコレータ関数はメタデータを受け入れます。

Angular CLIを使用してAngular 4アプリの特定のフォルダにコンポーネントを追加します

特定のフォルダに新しいコンポーネントを追加するには、コマンドng g component folderName/componentNameを使います。

0
student

最初にng g module newModuleを実行してください。それからng g component newModule/newModule --flatを実行してください

0
Tuan van Duong

私はこの特定のコマンドをモジュールの中のコンポーネントを生成するために使います。

ng g c <module-directory-name>/<component-name>

このコマンドはモジュールにローカルなコンポーネントを生成します。またはを入力して最初にディレクトリを変更できます。

cd <module-directory-name>

それからコンポーネントを作成します。

ng g c <component-name>

注：<>で囲まれたコードはユーザー固有の名前を表します。

0
Shashank Rawat