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

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

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

例えば： ng g module newModule

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

angular-cliのデフォルトの動作では、すべての新しいコンポーネントを内に配置するためapp.moduleです。コンポーネントを配置する場所を選択したいので、個別のモジュールを作成でき、すべてのコンポーネントが中にありませんapp.module。angular-cliを使用してそれを行うことは可能ですか、またはこれを手動で行う必要がありますか？

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

1. ng g module newModule モジュールを生成するには、
2. cd newModuleディレクトリをnewModuleフォルダに変更する
3. ng g component newComponent モジュールの子としてコンポーネントを作成します。

更新：Angular 9

これで、コンポーネントの生成時に現在のフォルダーは関係ありません。

1. ng g module NewMoudle モジュールを生成します。
2. ng g component new-module/new-component NewComponentを作成します。

注：Angular CLIがnew-module / new-componentを検出すると、大文字と小文字を理解して、new-module-> NewModuleおよびnew-component-> NewComponentに一致するように変換します。最初は混乱する可能性があるので、簡単な方法は、＃2の名前をモジュールおよびコンポーネントのフォルダー名と一致させることです。

ng g component nameComponent --module=app.module.ts

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

ng g component newComponent

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

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

ng g component moduleName/newComponent

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

cliを使用して最上位のモジュールフォルダー内にコンポーネントを生成する方法、およびコンポーネントにモジュールの宣言コレクションを自動的に追加させる方法を示す回答が見つかりませんでした。

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

ng g module foo

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

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

そして、cliは次のようにモジュールとコンポーネントの足場を作ります：

-角度のCLIの新しいバージョンを編集すると、動作が異なります。1.5.5はモジュールファイル名を必要としないため、v1.5.5でのコマンドは

ng g component foo/fooList --module=foo

以下を説明するコマンドを試すことができます、

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

次に、コマンドは次のようになります。

ng g c user/userComponent -m user.module

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

ng g c componentName -m ModuleName

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

1 -->  ng g module new-module

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

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

1. まず、実行してモジュールを生成します。

ng g m modules/media

これにより、フォルダmedia内と呼ばれるモジュールが生成されmodulesます。

2. 次に、このモジュールに追加されたコンポーネントを生成します

ng g c modules/media/picPick --module=modules/media/media.module.ts

コマンドの最初の部分で、新しいモジュールを含むwitch 内のng g c modules/media/picPickコンポーネントフォルダーが生成されます。picPickmodules/mediamedia

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

モジュールレベルに移動します。ルートレベルにいて、以下のコマンドを入力することもできます。

ng g component "path to your component"/NEW_COMPONENT_NAME -m "MODULE_NAME"

例：

ng g component common/signup/payment-processing/OnlinePayment -m pre-login.module

最初にモジュールを生成します：

ng g m moduleName --routing

これにより、moduleNameフォルダーが作成され、モジュールフォルダーに移動します

cd moduleName

そしてその後、コンポーネントを生成します：

ng g c componentName --module=moduleName.module.ts --flat

モジュールフォルダー内に子フォルダーを作成しない場合は--flatを使用します

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

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

次の簡単なコマンドを使用します。

ng g c users/userlist

users：モジュール名。

userlist：コンポーネント名。

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

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

「ディレクトリ名」= CLIが機能モジュールを生成した場所

例：-

ng generate component customer-dashboard/CustomerDashboard

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

最初の実行ng g module newModule 。次に実行しますng g component newModule/newModule --flat

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

私が指定した以下のcliコマンドは、チェックアウトしてください

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

修復は子モジュールのルートフォルダです

-mは--module

コンポーネントのc

生成するためのg

今日、Angular 9アプリケーションの足場を組んでいるときにこの問題に遭遇しました。.module.tsまたは.moduleモジュール名にを追加すると、「モジュールが存在しません」エラーが発生しました。cliには、拡張子のないモジュールの名前のみが必要です。私がモジュール名を持っていると仮定すると、私がbrands.module.ts使用したコマンドは

ng g c path/to/my/components/brands-component -m brands --dry-run

--dry-runファイル構造が正しいことを確認したら削除してください。

一般的なパターンは、ルート、遅延ロードされたモジュール、およびコンポーネントを使用してフィーチャーを作成することです。

ルート： myapp.com/feature

app-routing.module.ts

{ path: 'feature', loadChildren: () => import('./my-feature/my-feature.module').then(m => m.MyFeatureModule) },

ファイル構造：

app   
└───my-feature
│   │   my-feature-routing.module.ts
│   │   my-feature.component.html
│   │   my-feature.component.css
│   │   my-feature.component.spec.ts
│   │   my-feature.component.ts
│   │   my-feature.module.ts

これは、CLIで次のように実行できます。

ng generate module my-feature --module app.module --route feature

またはより短い

ng g m my-feature --module app.module --route feature

または、名前を省略した場合、cliはそれを要求します。複数のフィーチャーを作成する必要がある場合に非常に役立ちます

ng g m --module app.module --route feature

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

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

コンポーネントには、@Componentedor classが必要なa が後に続くデコレータ関数が必要exportです。@Componentデコレータ機能は、メタデータを受け入れます。

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

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

.angular-cli.jsonで複数のアプリが宣言されている場合（機能モジュールで作業している場合など）

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

あなたはできる ：

ng g c my-comp -a app-name

-aは--app（名前）を表します

この特定のコマンドを使用して、モジュール内のコンポーネントを生成します。

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

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

cd <module-directory-name>

次にコンポーネントを作成します。

ng g c <component-name>

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

1.-通常どおり機能モジュールを作成します。

ng generate module dirlevel1/module-name

2.-を指定できルートパスでプロジェクトの--module（のみ--moduleで、（/）ルートポイントあなたのプロジェクトROOTをし、 システムのルートではありません！）

ng generate component dirlevel1/component-name --module /src/app/dirlevel1/module-name.module.ts

実際の例：

ng generate module stripe/payment-methods-list

ng generate component stripe/payment-methods-list --module=/src/app/stripe/payment-methods-list/payment-methods-list.module.ts 

出力：

CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.scss (0 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.html (39 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.spec.ts (768 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.ts (322 bytes)
UPDATE src/app/stripe/payment-methods-list/payment-methods-list.module.ts (311 bytes)
[OK] Generated component!

Angular CLIでテスト済み：9.1.4

ng g c componentName --module=path-to-your-module-from-src-folder

例：

ng g c testComponent --module=/src/app/home/test-component/test-component.module

特定のモジュールでモジュール、サービス、コンポーネントを作成する

Basic:

    ng g module chat     
    ng g service chat/chat -m chat
    ng g component chat/chat-dialog -m chat

    In chat.module.ts:
        exports: [ChatDialogComponent],
        providers: [ChatService]

    In app.module.ts:

        imports: [
            BrowserModule,
            ChatModule
        ]

    Now in app.component.html:
        <chat-dialog></chat-dialog>


LAZY LOADING:
    ng g module pages --module app.module --route pages

        CREATE src/app/pages/pages-routing.module.ts (340 bytes)
        CREATE src/app/pages/pages.module.ts (342 bytes)
        CREATE src/app/pages/pages.component.css (0 bytes)
        CREATE src/app/pages/pages.component.html (20 bytes)
        CREATE src/app/pages/pages.component.spec.ts (621 bytes)
        CREATE src/app/pages/pages.component.ts (271 bytes)
        UPDATE src/app/app-routing.module.ts (8611 bytes)       

    ng g module pages/forms --module pages/pages.module --route forms

        CREATE src/app/forms/forms-routing.module.ts (340 bytes)
        CREATE src/app/forms/forms.module.ts (342 bytes)
        CREATE src/app/forms/forms.component.css (0 bytes)
        CREATE src/app/forms/forms.component.html (20 bytes)
        CREATE src/app/forms/forms.component.spec.ts (621 bytes)
        CREATE src/app/forms/forms.component.ts (271 bytes)
        UPDATE src/app/pages/pages-routing.module.ts (437 bytes)