How to Inject Nested Services in Component Let's create a service url.service.ts that will will be injected in other services. import { Injectable } from '@angular/core' ; @Injectable () export class UrlService{ // business logic } Now lets create another service http.service.ts that will Inject this service. import { UrlService } from './url.service.ts' ; export class HttpService extends UrlService{ // business logic } Now, we need to inject the HttpService in some component to make http calls. So now we can inject the HttpService in component as shown below. import { Component ,OnInit } from '@angular/core' ; import { UrlService } from './url.service.ts' ; import { HttpService } from './http.service.ts' ; @Component ({ selector : 'some-selector' , templateUrl : 'some.html' , providers: [HttpService, UrlService] }) export class SomeComponent implements OnInit{ // busin