web-dev-qa-db-ja.com

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

角度2では使用します

ng g c componentname

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

angular-cli
54
surbhiGoel

Angular 4でもこれは同じように機能します。エラーが発生した場合、私はあなたの問題は他のどこかにあると思います。

コマンドプロンプト内

ng生成コンポーネントYOURCOMPONENTNAME

これにはいくつかの短所があります。コマンドgenerateはgとして、componentはcとして使用できます。

あなたの会社名を入力してください

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

もちろん、YOURCOMPONENTNAMEという名前をあなたが使いたい名前に変更してください。

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

更新：これはAngularバージョン7でも動作します。

82
Mike Bovenlander

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)
21
Chaudhary
ng g component componentname

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

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

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

.specファイルを使わずに新しいコンポーネントを作りたい場合は、

ng g c component-name --spec false

ng g c --helpを使ってこれらのオプションを見つけることができます

7
Mile Mijatovic

プロジェクトのcmd行にいることを確認してください。

    ng g component componentName
4
Sandy
ng g c COMPONENTNAME

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

コンポーネントのcを生成するためのg

3
rajeev omar

プロジェクトフォルダ名として 'app'を使用する代わりに、他のものに名前を変更したので、ng generate component component_nameは私の場合はうまくいきませんでした。私は再びそれをアプリに変えました。今、それはうまく働いています

3
surbhiGoel
ng g c componentname

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

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

開発サーバー経由でAngularプロジェクトを生成して提供する -

最初にあなたのプロジェクトディレクトリに行き、以下をタイプしてください - 

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

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

Commonsは - のように見えます - 

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)
2
Anil Singh

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

angular 4.1.1angular-cli 1.0.1

2
phacic

コマンドラインで、angle-cliプロジェクトのsrc/appフォルダーにいるはずです。例えば：

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

そうして初めてそれはあなたのコンポーネントを生成します。

2
Amruta Thakur

ng g c --dry-runそうすれば、実際にやる前に何をしようとしているのかを見ることができますので、フラストレーションを減らすことができます。実際にそれを行わずに、それが何をしようとしているのかを示すだけです。

2
Aggie Jon of 87

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

1
sajith sathyan

指定フォルダ内のプロジェクトの場所に移動する

C:\Angular6\sample>

ここであなたはコマンドを入力することができます

C:\Angular6\sample>ng g c users

ここで、gは生成、cはコンポーネント、ユーザーはコンポーネント名です。

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

users.component.html,
users.component.spec.ts,
users.component.ts,
users.component.css
1
Lova Chittumuri

cMDのプロジェクトディレクトリに移動して、以下のコマンドを実行します。 Visual Studioのコード端末も使用できます。

ng生成コンポーネント "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

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

以下のコマンドでspecファイルを作成しないようにすることができます。

ng g c "component_name" --nospec

1
Nantharupan

ng g c COMPONENTNAMEは動作するはずです、もしあなたのモジュールが例外を見つけられないのなら、これらのことを試してください -

  1. プロジェクトディレクトリを確認してください。
  2. Visual Studioのコードを使用している場合は、それを再ロードするか、プロジェクトをその中で再度開きます。
1
Kamal Singh Meena
ng g component component name

この称賛を入力する前に、あなたはあなたのプロジェクトディレクティブパスにいるでしょう

1
Sandy

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

1
mitrabrihas

ステップ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

1
collins ink

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

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

フォルダを作成せずに

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

この行は、create-employeeコンポーネントを作成する下にemployeeという名前のフォルダーを作成します。

0
Alexander Zaldostanov

ngコンポーネントcomponentNameを生成します。

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

0
José Eras

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

0
GT_hash