web-dev-qa-db-ja.com

Angular cliはサービスを生成し、プロバイダーを1つのステップに含めます

angular cliを使用してサービスを生成し、providerとしてに追加することができますapp.module.tsを1ステップで実行するか、ng g serviceコマンドで特別なオプションを使用しますか？

実行時：

$ ng g service services/backendApi
installing service
  create src/app/services/backend-api.service.spec.ts
  create src/app/services/backend-api.service.ts
  WARNING Service is generated but not provided, it must be provided to be used

WARNING Service is generated but not provided, it must be provided to be used

その隣に（そして警告メッセージに従って）私は通常providerセクションのapp.moduleに追加しますテキストエディタを使用した.ts：

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    ....
  ],
  providers: [BackendApiService],
  bootstrap: [AppComponent]
})

これを自動化するために、単一のステップでそれを行うことは可能ですか？

javascripttypescriptangular-cli
50
Pablo Ezequiel

実際には、サービスを作成するときにサービス（またはガードも提供する必要があるため、ガード）を提供することが可能です。

コマンドは次のとおりです...

ng g s services/backendApi --module=app.module

編集

機能モジュールに提供することもできます。同様に、必要なモジュールへのパスを指定する必要があります。

ng g s services/backendApi --module=services/services.module

86
delasteve

Angular 6+シングルトンサービス

推奨されるアプローチ Angular 6以降のシングルトンサービスの場合：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

実際--moduleスイッチを変更する必要がないため、appレベルでサービスを登録するためのCLI app.module.tsスイッチ もう存在しません 。

これにより、モジュールを指定せずに上記のコードが作成されます。

ng g s services/user

そのため、サービスをシングルトンにしたくないしない場合は、自分でprovidedInコードを削除してから、コンポーネントのprovidersに手動で追加するか、遅延ロードされたモジュール。現在、providedIn: 'root'部分を生成しないスイッチがあるようには見えないので、手動で削除する必要があります。

32
Simon_Weaver

Angular 5およびangle-cli 1.7.0の受け入れられた回答からの構文のわずかな変更

ng g service backendApi --module=app.module
2
user2180794

Angular CLIを使用してAngular 4アプリにサービスを追加します

Angular 2サービスは、関連するプロパティとメソッドを伴うjavascript関数であり、Angular 2コンポーネントに（依存性注入を介して）含めることができます。

新しいAngular 4サービスをアプリに追加するには、ng g service serviceNameコマンドを使用します。サービスの作成時に、Angular CLIにエラーが表示されます。

WARNING Service is generated but not provided, it must be provided to be used

これを解決するには、src\app\app.module.tsメソッドのproviders入力内の@NgModuleへのサービス参照を提供する必要があります。

最初は、サービスのデフォルトコードは次のとおりです。


import { Injectable } from '@angular/core';

@Injectable()
export class ServiceNameService {

  constructor() { }

}

サービスには、いくつかのパブリックメソッドが必要です。

1
student

Angular 5.12および最新のAngular CLIで、

ng generate service my-service -m app.module
1
Arielle Nguyen

パスを指定する

--app
  --one
    one.module.ts
    --services

  --two
    two.module.ts
    --services

作成サービスモジュール内の新しいフォルダーでONE

ng g service one/services/myNewServiceFolderName/serviceOne --module one/one

--one
  one.module.ts // service imported and added to providers.
  --services
    --myNewServiceFolderName
      serviceOne.service.ts
      serviceOne.service.spec.ts
1
SoEzPz