Javascript Angular cli 生成一个服务并一步包含提供者

Angular cli generate a service and include the provider in one step

提问by Pablo Ezequiel

It is possible generate a service with angular cli and add it as a providerin the app.module.tsin a single step or using an special option in the ng g servicecommand?

是否可以使用 angular cli 生成服务并将其作为提供者添加到app.module.ts中，或者在ng g service命令中使用特殊选项？

When a execute:

执行时：

$ 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

Next to it, (and according to the WARNING message) I usually add it to providersection on app.module.tsusing the text editor:

在它旁边，（根据 WARNING 消息）我通常使用文本编辑器将它添加到app.module.ts上的provider部分：

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

It is possible to do it with a single step, to automatize this?

可以通过一个步骤来实现自动化吗？

回答by delasteve

Actually, it is possible to provide the service (or guard, since that also needs to be provided) when creating the service.

实际上，可以在创建服务时提供服务（或守卫，因为也需要提供）。

The command is the following...

命令如下...

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

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

Edit

编辑

It is possible to provide to a feature module, as well, you must give it the path to the module you would like.

也可以提供给一个功能模块，你必须给它提供你想要的模块的路径。

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

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

回答by Simon_Weaver

Angular 6+ Singleton Services

Angular 6+ 单例服务

The recommended approachfor a singleton service for Angular 6 and beyond is :

Angular 6 及更高版本的单例服务的推荐方法是：

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

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

In fact the CLI --moduleswitch doesn't even exist any morefor registering a service at the applevel because it doesn't need to modify app.module.tsanymore.

事实上，CLI--module开关甚至不再存在用于在app级别注册服务，因为它不再需要修改app.module.ts。

This will create the above code, without needing to specify a module.

这将创建上述代码，而无需指定模块。

ng g s services/user

So if you don'twant your service to be a singleton you must remove the providedIncode yourself - and then add it manually to providersfor a component or lazy loaded module. Doesn't look like there is currently a switch to not generate the providedIn: 'root'part so you need to manually remove it.

因此，如果您不希望您的服务成为单例，则必须providedIn自己删除代码 - 然后手动将其添加到providers组件或延迟加载的模块中。看起来目前没有不生成providedIn: 'root'零件的开关，因此您需要手动删除它。

回答by user2180794

slight change in syntax from the accepted answer for Angular 5 and angular-cli 1.7.0

与 Angular 5 和 angular-cli 1.7.0 的公认答案相比，语法略有变化

ng g service backendApi --module=app.module

回答by Arielle Nguyen

In Angular 5.12 and latest Angular CLI, do

在 Angular 5.12 和最新的 Angular CLI 中，执行

ng generate service my-service -m app.module

回答by xameeramir

Add a service to the Angular 4 app using Angular CLI

使用 Angular CLI 向 Angular 4 应用程序添加服务

An Angular 2 service is simply a javascript function along with it's associated properties and methods, that can be included (via dependency injection) into Angular 2 components.

Angular 2 服务只是一个 javascript 函数及其关联的属性和方法，可以（通过依赖注入）包含到 Angular 2 组件中。

To add a new Angular 4 service to the app, use the command ng g service serviceName. On creation of the service, the Angular CLI shows an error:

要将新的 Angular 4 服务添加到应用程序，请使用命令ng g service serviceName。在创建服务时，Angular CLI 显示错误：

To solve this, we need to provide the service reference to the src\app\app.module.tsinside providersinput of @NgModulemethod.

为了解决这个问题，我们需要为方法的src\app\app.module.ts内部providers输入提供服务引用@NgModule。

Initially, the default code in the service is:

最初，服务中的默认代码是：

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

@Injectable()
export class ServiceNameService {

  constructor() { }

}

A service has to have a few public methods.

一个服务必须有一些公共方法。

回答by SoEzPz

Specify paths

指定路径

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

  --two
    two.module.ts
    --services

Create Servicewith new folder in module ONE

在模块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

回答by Brahmmeswara Rao Palepu

In Command Promt Go to project folder and run: ng g s servicename

在命令提示符中转到项目文件夹并运行：ng gs servicename

回答by Asifali

run the below code in Terminal

在终端中运行以下代码

makesure You are inside your project folder in terminal

确保您在终端中的项目文件夹中

ng g s servicename --module=app.module