title: How to mock components with providers in Angular 4 ? - Unit test
body: <p>I have a problem mocking a component with providers in Angular 4. Here is the code : </p>
  
  <pre><code>import { ComponentFixture, TestBed } from '@angular/core/testing';
  import { By } from '@angular/core/platform-browser';
  import { DebugElement } from '@angular/core';
  import { FormsModule,
      ReactiveFormsModule,
      FormBuilder
  } from '@angular/forms';
  import { Router, RouterModule } from '@angular/router';
  import {
      Http, ConnectionBackend,
      BaseRequestOptions
  } from '@angular/http';
  import { MockBackend, async } from '@angular/http/testing';
  
  import { LoginComponent } from './../../../src/app/login/login.component';
  import { LoginService } from './../../../src/app/login/login.service';
  import { LoginComponent } from './../../../src/app/login/login.component';
  import { LoggerService } from './../../../src/app/logger-service';
  import { AuthService } from './../../../src/app/pages/auth.service';
  
  describe('LoginComponent', () =&gt; {
      let comp: LoginComponent;
      let fixture: ComponentFixture&lt;LoginComponent&gt;;
      let de: DebugElement;
      let el: HTMLElement;
  
      beforeEach(() =&gt; {
          // implement mock
          class loggerService = {
  
          };
  
          class loginService = {
  
          };
  
          class authService = {
  
          };
  
          class router = {
  
          };
  
          TestBed.configureTestingModule({
              declarations: [ LoginComponent ],
              imports: [
                  ReactiveFormsModule,
                  FormsModule
              ],
              providers: [
                  MockBackend,
                  BaseRequestOptions,
                  AuthService,
                  LoginService,
                  LoggerService,
                  RouterModule,
                  { provide: AuthService, useValue: authService },
                  { provide: LoginService, useClass: LoginService },
                  { provide: LoggerService, useValue: loggerService },
                  {
                      provide: Http, useFactory: (backend: ConnectionBackend,
                          defaultOptions: BaseRequestOptions) =&gt; {
                          return new Http(backend, defaultOptions);
                      }, deps: [MockBackend, BaseRequestOptions]
                  },
                  { provide: Router, useClass: router }
              ]
          }).compileComponents().then(() =&gt; {
              fixture = TestBed.createComponent(LoginComponent);
  
              comp = fixture.componentInstance;
  
              comp.detectChanges();
              comp.ngOnInit();
  
              loginService = fixture.debugElement.injector.get(LoginService);
              loggerService = fixture.debugElement.injector.get(LoggerService);
              authService = fixture.debugElement.injector.get(AuthService);
              router = fixture.debugElement.injector.get(Router);
          });
  
      });
  
      it('should create component', async(() =&gt; {
          expect(comp).toBeDefined();
      }));
  });
  </code></pre>
  
  <p>Here is my error:  </p>
  
  <blockquote>
    <p>spec-bundle.js:9 Unhandled Promise rejection: No provider for AuthService! ; Zone: ProxyZone ; Task: Promise.then ; Value: 
    Error {__zone_symbol__error: Error at Error.ZoneAwareError (<a href="http://localhost:9876/base/config/spec-bundle.js:9:3748709" rel="noreferrer">http://localhost:9876/base/config/spec-bundle.js:9:3748709</a>) a……}</p>
  </blockquote>
  
  <p>Any idea about what I am doing wrong ? </p>
  
  <p>Thanks in advance :) </p>