title: Angular 2 RC4: Unit test component that has dependency injection a service that has its own
body: <p>As Angular team is constantly upgrading/deprecating stuff in Angular 2 RC versions I encountered this problem.</p>
  
  <p>I have a component that has a Dependency Injection (DI), which is actually a service (UserService in this case). This UserService of course has some DIs of its own. After updating to the latest RC4 of Angular 2 I realised that I cannot create similar tests any more.</p>
  
  <p>So as the docs are not mentioning something relative here's my code (simplified for this question).</p>
  
  <p><strong>My component:</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { MdButton } from '@angular2-material/button';
  import {
    MdIcon,
    MdIconRegistry
  } from '@angular2-material/icon';
  import { UserService } from '../../services/index';
  
  @Component({
    moduleId: module.id,
    selector: 'logout-button',
    templateUrl: 'logout-button.component.html',
    styleUrls: ['logout-button.component.css'],
    providers: [MdIconRegistry, UserService],
    directives: [MdButton, MdIcon]
  })
  export class LogoutButtonComponent {
  
    constructor(public userService: UserService) {}
  
    /**
     * Call UserService and logout() method
     */
    logout() {
      this.userService.logout();
    }
  
  }
  </code></pre>
  
  <p><strong>Component's DI, UserService whic as you can see has some DIs (Router, AuthHttp &amp; Http):</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {
    Http,
    Headers
  } from '@angular/http';
  import {
    AuthHttp,
    JwtHelper
  } from 'angular2-jwt';
  import { Router } from '@angular/router';
  import { UMS } from '../common/index';
  
  @Injectable()
  export class UserService {
  
    constructor(
      private router: Router,
      private authHttp: AuthHttp,
      private http: Http) {
  
        this.router = router;
        this.authHttp = authHttp;
        this.http = http;
      }
  
      /**
       * Logs out user
       */
      public logout() {
        this.authHttp.get(UMS.url + UMS.apis.logout)
        .subscribe(
          data =&gt; this.logoutSuccess(),
          err =&gt; this.logoutSuccess()
        );
      }
  
  }
  </code></pre>
  
  <p><strong>And here's the test for the component:</strong></p>
  
  <pre><code>import { By }           from '@angular/platform-browser';
  import { DebugElement } from '@angular/core';
  
  import {
    beforeEach,
    beforeEachProviders,
    describe,
    expect,
    it,
    inject,
    fakeAsync,
    TestComponentBuilder
  } from '@angular/core/testing';
  
  import { AuthHttp } from 'angular2-jwt';
  import { Router } from '@angular/router';
  import { Http } from '@angular/http';
  import { LogoutButtonComponent } from './logout-button.component';
  import { UserService } from '../../services/index';
  
  describe('Component: LogoutButtonComponent', () =&gt; {
  
  
  
    beforeEachProviders(() =&gt; [
      LogoutButtonComponent,
      UserService
    ]);
  
    it('should inject UserService', inject([LogoutButtonComponent],
      (component: LogoutButtonComponent) =&gt; {
        expect(component).toBeTruthy();
    }));
  
  });
  </code></pre>
  
  <p>Don't worry about the (it) for now.</p>
  
  <p>As you can see I;m adding the related providers on the <code>beforeEachProviders</code>.</p>
  
  <p>In this case I'm getting an error when I run the tests:</p>
  
  <blockquote>
    <p>Error: No provider for Router! (LogoutButtonComponent -> UserService -> Router)</p>
  </blockquote>
  
  <p>Which is expected let's say.</p>
  
  <p>So in order to don't get those errors I'm adding the service's DIs in the providers also:</p>
  
  <pre><code>  beforeEachProviders(() =&gt; [
      LogoutButtonComponent,
      Router,
      AuthHttp,
      Http,
      UserService
    ]);
  </code></pre>
  
  <p>But now I'm, getting this error:</p>
  
  <blockquote>
    <p>Error: Cannot resolve all parameters for 'Router'(?, ?, ?, ?, ?, ?, ?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'Router' is decorated with Injectable.</p>
  </blockquote>
  
  <p>I'm really trying to figure out what's happening so I found some related answers here but ALL are outdated and covers the old <code>router-deprecated</code> or <code>angular2/router</code> but both are deprecated and are not covering this case.</p>
  
  <p>Would love some help on this and maybe some resources as I cannot find anything related to the latest version of Router: <code>"@angular/router": "3.0.0-beta.2"</code>, and <code>RC4</code>.</p>
  
  <p>Thanks</p>
  
  <p>UPDATE!</p>
  
  <p>I manage to bypass the two errors above and now I can access the component. Here's the description code:</p>
  
  <pre><code>describe('Component: LogoutButtonComponent', () =&gt; {
  
    let component: LogoutButtonComponent;
    let router: any = Router;
    let authHttp: any = AuthHttp;
    let http: any = Http;
    let service: any = new UserService(router, authHttp, http);
  
    beforeEachProviders(() =&gt; [
      LogoutButtonComponent
    ]);
  
    beforeEach(() =&gt; {
      component = new LogoutButtonComponent(service);
    });
  
    it('should inject UserService', () =&gt; {
      expect(component.userService).toBeTruthy();
    });
  
    it('should logout user', () =&gt; {
      localStorage.setItem('token', 'FOO');
      component.logout();
      expect(localStorage.getItem('token')).toBeUndefined();
    });
  
  });
  </code></pre>
  
  <p>But it seems that even that the DI service is injected and accessible the DIs of the service are not. So now I get this error:</p>
  
  <blockquote>
    <p>TypeError: this.authHttp.get is not a function</p>
  </blockquote>
  
  <p>Any ideas?</p>