Author avatar

Zachary Bennett

How to Generate a Service Using the Angular CLI

Zachary Bennett

  • Jun 30, 2020
  • 4 Min read
  • 686 Views
  • Jun 30, 2020
  • 4 Min read
  • 686 Views
Languages Frameworks and Tools
Front End Web Developer
Client-side Frameworks
Angular

Introduction

One of the most useful aspects of the Angular framework is the Angular CLI. The Angular CLI is a powerful tool that can help automate a variety of tasks. These tasks range from updating your project's Angular version to creating a new Angular component or service. In a real Angular app, the Angular CLI will save you a lot of time by creating app boilerplate for you.

In this guide, you will learn how you can use the power of the Angular CLI to generate a new Angular service inside of your project.

Getting Started Using the Angular CLI and Angular Schematics

The Angular CLI can be downloaded onto your machine by running the following command using NPM:

1
    npm install -g @angular/cli
bash

The Angular CLI is an abstraction layer that is powered under the hood by a library called Schematics. Through the power of Angular Schematics' scaffolding capabilites, the Angular CLI exposes a number of commands. You can generate a new Angular application by running the following:

1
    ng new my-new-app
bash

This command will create a new Angular application within your current directory named my-new-app. Now that you have generated a new application, let's look at how use the Angular CLI to generate a new service for your application.

Available Options and Breakdown

According to the Angular CLI service Schematics' schema.json, the following options are available to use:

  • name: A required, positional option that specifies the name of the service
  • path: An optional path at which to generate the new service
  • project: An optional project name that maps to a project located inside of the angular.json file
  • flat: An optional flag that ensures that the generated service is created at the root level of the Angular project
  • skipTest: Ensures that the schematic does not generate a .spec file
  • lintFix: An optional flag that, when set to true, applies tslint linting fixes to the generated service

Most of these options are fairly self-explanatory. The most commonly used options are name (which is required) and path.

Generating A New Service

The name option is a required, positional argument that is used primarily like this:

1
    ng generate service my-test
bash

The command above will generate a new service named MyTestService within your current directory.

The path option allows you to specify an absolute path at which to generate the new service. This can be an existing path or a new path.

1
    ng generate service another --path=app/core
bash

The above command will generate a new service named AnotherService located at app/core/another.service.ts—regardless of your current working directory.

Another useful option, lintFix, can come in handy when your team's Angular project has highly customized tslint rules. Because the lintFix option works with tslint, you must have tslint installed as a development dependency in your node_modules folder. Using this option is as simple as:

1
    ng generate service birds --path=app/core --lintFix
bash

Conclusion

You have now learned how to easily generate a new service within your Angular application or library. You have also learned all of the options that are available to the service schematic. With the help of these available schematic options, you now know that you can easily generate a new service without the default .spec file or at any path of your choosing.

1