blocks|key|107403|text|实际上，可以在创建服务时提供服务(或防护，因为这也需要提供)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|107404|命令如下所示...|107405|ng+g+s+services/backendApi+--module=app.module|offset|length|style|CODE|107406|编辑|BOLD|107407|也可以提供给一个功能模块，你也必须给它提供你想要的模块的路径。|107408|ng+g+s+services/backendApi+--module=services/services.module|107409|entityMap^0|0|0|0|1A|0|0|2|0|0|0|1O|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@$F|V|G|W|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|X|8|@$F|Y|G|Z|H|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|10|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|11|8|@$F|12|G|13|H|I]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|R|$]]

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...

<code>ng g s services/backendApi --module=app.module</code>

Edit

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

<code>ng g s services/backendApi --module=services/services.module</code>

blocks|key|107420|text|使用Angular+CLI向Angular+4应用程序添加服务|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|107421|Angular+2服务只是一个javascript函数及其相关的属性和方法，可以(通过依赖注入)包含到Angular+2组件中。|107422|要向应用程序添加新的Angular+4服务，请使用命令ng+g+service+serviceName。创建服务时，Angular+CLI显示错误：|CODE|107423|​|107424|📷|atomic|107425|107426|为了解决这个问题，我们需要在@NgModule方法的providers输入中提供对src\app\app.module.ts的服务引用。|107427|最初，服务中的默认代码是：|107428|import+{+Injectable+}+from+'@angular/core';

@Injectable()
export+class+ServiceNameService+{

++constructor()+{+}

}|code-block|syntax|javascript|107429|服务必须有几个公共方法。|107430|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/702af60d267b3205f3f0b3e3b276eefc.png|imageAlt^0|0|D|0|0|R|O|0|0|0|1|0|0|0|E|9|Q|9|15|L|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1E|8|@$9|1F|A|1G|B|J]]|D|@]|E|$]]|$1|K|3|L|5|6|7|1H|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|P|3|L|5|6|7|1M|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1N|8|@$9|1O|A|1P|B|J]|$9|1Q|A|1R|B|J]|$9|1S|A|1T|B|J]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1U|8|@]|D|@]|E|$]]|$1|U|3|V|5|W|7|1V|8|@]|D|@]|E|$X|Y]]|$1|Z|3|10|5|6|7|1W|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18|19|-4]]]]

Add a service to the Angular 4 app using Angular CLI

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.

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

<img src="https://i.stack.imgur.com/ZZwBC.png" alt="WARNING Service is generated but not provided, it must be provided to be used">

To solve this, we need to provide the service reference to the <code>src\app\app.module.ts</code> inside <code>providers</code> input of <code>@NgModule</code> method.

Initially, the default code in the service is:

<pre><code>
import { Injectable } from '@angular/core';

@Injectable()
export class ServiceNameService {

 constructor() { }

}
</code></pre>

A service has to have a few public methods.

blocks|key|2856666|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2856667|指定路径|blockquote|2856668|2856669|2856670|--app
++--one
++++one.module.ts
++++--services

++--two
++++two.module.ts
++++--services|code-block|syntax|javascript|2856671|2856672|使用模块ONE中的新文件夹创建服务|offset|length|style|BOLD|2856673|2856674|2856675|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|2856676|entityMap^0|0|0|0|0|0|0|4|3|F|2|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|X|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|Y|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|Z|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|10|7|@]|8|@]|9|$]]|$1|F|3|G|4|H|6|11|7|@]|8|@]|9|$I|J]]|$1|K|3|-4|4|5|6|12|7|@]|8|@]|9|$]]|$1|L|3|M|4|C|6|13|7|@$N|14|O|15|P|Q]|$N|16|O|17|P|Q]]|8|@]|9|$]]|$1|R|3|-4|4|5|6|18|7|@]|8|@]|9|$]]|$1|S|3|-4|4|5|6|19|7|@]|8|@]|9|$]]|$1|T|3|U|4|H|6|1A|7|@]|8|@]|9|$I|J]]|$1|V|3|-4|4|5|6|1B|7|@]|8|@]|9|$]]]|W|$]]

<blockquote>
 Specify paths
</blockquote>

<pre><code>--app
 --one
 one.module.ts
 --services

 --two
 two.module.ts
 --services
</code></pre>

<blockquote>
 Create Service with new folder in module ONE
</blockquote>

<pre><code>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
</code></pre>

blocks|key|2856687|text|与Angular+5和angular-cli+1.7.0的公认答案相比，语法稍有变化|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2856688|ng+g+service+backendApi+--module=app.module|code-block|syntax|javascript|2856689|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>ng g service backendApi --module=app.module
</code></pre>

blocks|key|107461|text|在Angular+5.12和最新的Angular+CLI中，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|107462|ng+generate+service+my-service+-m+app.module|code-block|syntax|javascript|107463|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In Angular 5.12 and latest Angular CLI, do

<pre><code>ng generate service my-service -m app.module
</code></pre>

blocks|key|2645341|text|Angular+6%2B单例服务|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2645342|Angular+6及更高版本的单例服务的recommended+approach为：|offset|length|2645343|import+{+Injectable+}+from+'@angular/core';

@Injectable({
++providedIn:+'root',
})
export+class+UserService+{
}|code-block|syntax|javascript|2645344|实际上，CLI+--module开关用于在app级别注册服务的doesn't+even+exist+any+more，因为它不再需要修改app.module.ts。|style|CODE|2645345|这将创建上述代码，而不需要指定模块。|2645346|ng+g+s+services/user|2645347|因此，如果你不想让你的服务成为单例()，你必须自己删除providedIn代码--然后手动将它添加到组件或延迟加载模块的providers中。看起来当前没有切换到不生成providedIn:+'root'部件，所以您需要手动删除它。|BOLD|2645348|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/guide/singleton-services|1|https://github.com/angular/angular-cli/wiki/generate-service^0|0|K|K|0|0|0|8|8|L|3|1W|D|V|R|1|0|0|0|I|2Q|R|A|1O|9|2C|I|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|F|3|G|5|H|7|1A|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1B|8|@$D|1C|E|1D|M|N]|$D|1E|E|1F|M|N]|$D|1G|E|1H|M|N]]|9|@$D|1I|E|1J|1|1K]]|A|$]]|$1|O|3|P|5|6|7|1L|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|1M|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|1N|8|@$D|1O|E|1P|M|U]|$D|1Q|E|1R|M|N]|$D|1S|E|1T|M|N]|$D|1U|E|1V|M|N]]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]]]

<h3>Angular 6+ Singleton Services</h3>
The <a href="https://angular.io/guide/singleton-services" rel="noreferrer">recommended approach</a> for a singleton service for Angular 6 and beyond is :
<pre><code>import { Injectable } from '@angular/core';

@Injectable({
 providedIn: 'root',
})
export class UserService {
}
</code></pre>
In fact the CLI <code>--module</code> switch <a href="https://github.com/angular/angular-cli/wiki/generate-service" rel="noreferrer">doesn't even exist any more</a> for registering a service at the <code>app</code> level because it doesn't need to modify <code>app.module.ts</code> anymore.
This will create the above code, without needing to specify a module.
<pre><code>ng g s services/user
</code></pre>
So if you don't want your service to be a singleton you must remove the <code>providedIn</code> code yourself - and then add it manually to <code>providers</code> for a component or lazy loaded module. Doesn't look like there is currently a switch to not generate the <code>providedIn: 'root'</code> part so you need to manually remove it.

blocks|key|2856768|text|在命令提示符下，转到项目文件夹并执行以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2856769|ng+g+s+servicename|code-block|syntax|javascript|2856770|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In Command prompt go to project folder and execute following:
<pre><code>ng g s servicename
</code></pre>

blocks|key|2645372|text|在终端中运行以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2645373|确保您在终端中的项目文件夹中|2645374|ng+g+s+servicename+--module=app.module|code-block|syntax|javascript|2645375|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

run the below code in Terminal
makesure You are inside your project folder in terminal
<pre><code>ng g s servicename --module=app.module
</code></pre>

blocks|key|2645389|text|在Angular+v11和更高版本中，我们不再有"s“选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2645390|ng+g+service+services/backendApi|code-block|syntax|javascript|2645391|或者像这样：|2645392|ng+g+service+services/backendApi+--flat+--skipTests=true|2645393|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Looks like in Angular v11 and higher, we don't have option &quot;s&quot; anymore:
<pre><code>ng g service services/backendApi
</code></pre>
or like that:
<pre><code>ng g service services/backendApi --flat --skipTests=true
</code></pre>

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

When a execute:

<pre><code>$ 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
</code></pre>

<a href="https://i.stack.imgur.com/ZZwBC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZZwBC.png" alt="WARNING Service is generated but not provided, it must be provided to be used"></a>

Next to it, (and according to the WARNING message) I usually add it to provider section on app.module.ts using the text editor:

<pre><code>@NgModule({
 declarations: [
 AppComponent,
 ...
 ],
 imports: [
 ....
 ],
 providers: [BackendApiService],
 bootstrap: [AppComponent]
})
</code></pre>

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

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

可以使用angular cli生成服务并将其添加为app.module.ts中的服务提供者，只需一步，或者使用ng g命令中的特殊选项？当执行时：$ ng g service services/backendApiinstalling service  create src/app/services/backend-a...

问Angular cli在一个步骤中生成服务并包括提供者
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular cli在一个步骤中生成服务并包括提供者EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular cli在一个步骤中生成服务并包括提供者
EN