CLIを使用してAngular4で新しいコンポーネントを作成する方法

角度2では私は使用します

ng g c componentname

しかし、Angular 4ではサポートされていないため、手動で作成しましたが、モジュールではないというエラーが表示されます。

開発サーバーを介したAngularプロジェクトの生成と提供-

まず、プロジェクトディレクトリに移動し、以下のように入力します-

ng new my-app
cd my-app
ng g component User
ng serve

ここで、「D：\ Angular \ my-app>」は私のAngularアプリケーションプロジェクトディレクトリであり、「User」はコンポーネントの名前です。

コモンズは次のようになります-

D:\Angular\my-app>ng g component User
  create src/app/user/user.component.html (23 bytes)
  create src/app/user/user.component.spec.ts (614 bytes)
  create src/app/user/user.component.ts (261 bytes)
  create src/app/user/user.component.css (0 bytes)
  update src/app/app.module.ts (586 bytes)

Angular4では、これは同じように機能します。エラーが発生した場合、問題は別の場所にあると思います。

コマンドプロンプトで次のように入力します

ng生成コンポーネントYOURCOMPONENTNAME

このためにも略記法があります。コマンドは、generateとして使用することができますgし、componentようc：

ng gc YOURCOMPONENTNAME

ng --help、ng g --helpまたはng g c --helpドキュメントを使用できます。

もちろん、YOURCOMPONENTNAMEの名前を使用したい名前に変更します。

ドキュメント： angular-cliは、app.module.tsにコンポーネント、ディレクティブ、パイプへの参照を自動的に追加します。

更新：これはAngularバージョン8でも機能します。

1）最初にプロジェクトディレクトリに移動します

2）次に、ターミナルでコマンドの下を実行します。

ng generate component componentname

または

ng g component componentname

3）その後、次のような出力が表示されます。

create src/app/test/componentname.component.css (0 bytes)
create src/app/test/componentname.component.html (23 bytes)
create src/app/test/componentname.component.spec.ts (614 bytes)
create src/app/test/componentname.component.ts (261 bytes)
update src/app/app.module.ts (1087 bytes)

.specファイルなしで新しいコンポーネントを作成したい場合は、

ng g c component-name --spec false

これらのオプションは、 ng g c --help

ng g component componentname

コンポーネントを生成し、そのコンポーネントをモジュール宣言に追加します。

コンポーネントを手動で作成する場合は、次のようにモジュールの宣言にコンポーネントを追加する必要があります。

@NgModule({
  imports: [
    yourCommaSeparatedModules
    ],
  declarations: [
    yourCommaSeparatedComponents
  ]
})
export class yourModule { }

CMD行のプロジェクトディレクトリにいることを確認してください

    ng g component componentName

特定のフォルダの下にコンポーネントを作成するため

ng g c employee/create-employee --skipTests=false --flat=true

この行は、フォルダ名「employee」を作成し、その下に「create-employee」コンポーネントを作成します。

フォルダを作成せずに

ng g c create-employee --skipTests=false --flat=true

ng g c componentname

次の4つのファイルが作成されます。

1. componentname.css
2. componentname.html
3. componentname.spec.ts
4. componentname.ts

私の場合、プロジェクトフォルダ名として「app」を使用する代わりに別の名前に変更したため、ng generate componentcomponent_nameが機能しませんでした。もう一度アプリに変更しました。今、それはうまく働いています

ng g c COMPONENTNAME

このコマンドは、angular2で使用する端末を使用してコンポーネントを生成するために使用します。

gはコンポーネントのcを生成します

私の場合.angular-cli.json、srcフォルダに別のファイルがあります。それを削除すると問題が解決しました。それが役に立てば幸い

angular 4.1.1 angular-cli 1.0.1

ng g component component name

この表彰チェックを入力する前に、プロジェクトのディレクティブパスが表示されます

ng gc --dry-runを実行すると、実際に実行する前に実行しようとしていることを確認できるため、フラストレーションを軽減できます。実際に実行せずに、何を実行するかを示します。

src/appコマンドラインでangular-cliプロジェクトのフォルダーにいる必要があります。例えば：

D:\angular2-cli\first-app\src\app> ng generate component test

そうして初めて、コンポーネントが生成されます。

angle-cliを最新バージョンに更新しましたか？または、node、npm、typescriptを更新しようとしましたか？この問題は、angular / typescript / nodeなどのバージョンが原因で発生します。CLIを更新する場合は、こちらのリンクを使用してください。 https://github.com/angular/angular-cli/wiki/stories-1.0-update

Angularプロジェクトフォルダーに移動し、コマンドプロンプトを開きます。「ngg component header」と入力します。ここで、headerは、作成する新しいコンポーネントです。デフォルトでは、ヘッダーコンポーネントはアプリコンポーネント内に作成されます。コンポーネント。たとえば、上記で作成したヘッダー内にコンポーネントを作成する場合は、「ng g componentheader / menu」と入力します。これにより、ヘッダーコンポーネント内にメニューコンポーネントが作成されます

ng g c COMPONENTNAME モジュールが見つからないという例外が発生した場合は、機能するはずです。次のことを試してください-

1. プロジェクトディレクトリを確認してください。
2. Visual Studio Codeを使用している場合は、それをリロードするか、プロジェクトを再度開きます。

指定されたフォルダのプロジェクトの場所に移動します

C:\Angular6\sample>

ここでコマンドを入力できます

C:\Angular6\sample>ng g c users

ここで、gは生成を意味し、cはコンポーネントを意味し、usersはコンポーネント名です。

それは4つのファイルを生成します

users.component.html,
users.component.spec.ts,
users.component.ts,
users.component.css

ステップ1：

プロジェクトディレクトリにアクセスしてください。（作成したアプリにCD）。

ステップ2：

次のコマンドを入力して実行してください！

ng generate component [componentname]

• [componentname]セクションに生成するコンポーネントの名前を追加します。

または

ng generate c [componentname]

• [componentname]セクションに生成するコンポーネントの名前を追加します。

両方とも機能します

参考のために、Angularドキュメントのこのセクションをチェックアウトしてください！

https://angular.io/tutorial/toh-pt1

参考のために、githubのAngularCliへのリンクもチェックしてください！

https://github.com/angular/angular-cli/wiki/generate-component

ng generate component componentName.

module.tsにコンポーネントを自動的にインポートします

プロジェクトにCDを挿入して実行し、

> ng generate component "componentname"
ex: ng generate component shopping-cart

または

> ng g c shopping-cart

（これにより、「app」フォルダーの下に「shopping-cart」という名前の新しいフォルダーが作成され、.html、.ts、.css。specsファイルが作成されます。）

.specファイルを生成したくない場合

> ng g c shopping-cart --skipTests true

「アプリ」の下の特定のフォルダにコンポーネントを作成する場合

> ng g c ecommerce/shopping-cart

（フォルダ構造「app / ecommerce / Shopping-cart」を取得します）

CMDでプロジェクトディレクトリに移動し、次のコマンドを実行します。Visual StudioCodeターミナルも使用できます。

ng generate component "component_name"

または

ng g c "component_name"

新しいフォルダ"component_name"が作成されます

component_name / component_name.component.html component_name / component_name.component.spec.ts component_name / component_name.component.ts component_name / component_name.component.css

新しいコンポーネントは自動的に追加されたモジュールになります。

次のコマンドでスペックファイルの作成を回避できます

ng g c "component_name" --nospec

Angularで新しいコンポーネントを生成するには、主に2つの方法があります。ng g c <component_name>別の方法は、を使用する方法ですng generate component <component_name>。これらのコマンドのいずれかを使用して、新しいコンポーネントを生成できます。