How to Register Services with the Providers Array in Angular?

Last Updated : 15 Oct, 2024

To register services with the provider's array in Angular, you first generate a service using the Angular CLI. Then, you can register the service in the providers array within the module (app.module.ts) or component where the service is needed. Once registered, the service can be injected into any component, making its functionality available throughout the application or within its scope.

Steps o Register Services with the Providers Array in Angular

Step 1: Install Angular CLI

First, ensure you have Node.js installed. You can download it from here. Then install the Angular CLI globally:

npm install -g @angular/cli

Step 2: Create a New Angular Project

Create a new project using Angular CLI. Navigate to the folder where you want to create the project and run it:

ng new my-angular-app

Follow the prompts to set up the project. Choose styles, routing options, etc., as per your needs.

Step 3: Navigate to the Project Directory

After the project is created, move to the project directory:

cd my-angular-app

Step 4: Run the Application

Start the Angular development server to check if the setup is working correctly

ng serve

Open your browser and go to http://localhost:4200/ to see the default Angular welcome page.

Step 5: Generate a Service

Now, generate a service that you'll register with the providers array. Run:

ng generate service my-service

This will create the my-service.service.ts file in the src/app directory.

Project Structure:

Updated Dependencies:

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "lodash": "^4.17.21",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },

Step 6: Register the Service in the Providers Array

Open src/app/app.module.ts and register the service in the providers array:

JavaScript

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyService } from './my-service.service';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [MyService], // Register the service here
    bootstrap: [AppComponent]
})
export class AppModule { }

Step 7: Use the Service in a Component

Now, use the service in your AppComponent. Open src/app/app.component.ts and inject the service:

JavaScript

// src/app/app.component.ts
import { BrowserModule } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
})
export class AppComponent {
  message: string;

  constructor(private myService: MyService) {
    this.message = myService.getMessage();
  }
}

JavaScript

// src/app/my-service.service.ts
import { Injectable } from '@angular/core';

@Injectable({
 // This means the service is registered globally.
    providedIn: 'root',
})
export class MyService {
    constructor() { }

    getMessage(): string {
        return 'Hello from MyService!';
    }
}

In the app.component.html file, display the message from the service:

HTML

<h1>{{ message }}</h1>

Step 8: Run the Application Again

Now that you’ve registered the service and used it in the component, you can run the application again to see the output:

ng serve

Output: Open your browser and go to http://localhost:4200/ to see the message provided by the service