title: How to import always used services into one service and use it in components?
body: <p>In my Angular project, there exists 4 services which is used by most of the components. What I'm attempting to achieve is instead of importing each one of them individually in the components, import those 4 services into 1 and use that one service in the components.</p>
  
  <p>What I have is the following <strong>but</strong> I'm looking for a better approach.</p>
  
  <pre><code>// bundled.service.ts
  
  
  import { Injectable } from '@angular/core';
  
  // The following are the services used all over the project
  
  import { ConfirmService } from '../utility/confirm.service';
  import { LoadingService } from '../utility/loading.service';
  import { SnackbarService } from '../utility/snackbar.service';
  import { ErrorHandlingService } from '../error/error-handling.service';
  
  @Injectable()
  export class BundledService {
  
      constructor(
          private confirmSer: ConfirmService,
          private loadingSer: LoadingService,
      ) {
      }
  
      openDialog(warningText: string) {
          this.confirmSer.openDialog(warningText);
      }
  
      toogleLoading(loading: boolean) {
          this.loadingSer.toogleLoading(loading);
      }
  
  // ...and so on for the other two
  }
  </code></pre>