title: Ionic Refresher. Uncaught Error: Can't resolve all parameters for ElementRef: (?)
body: <p>I'm using <strong>Ionic</strong> and <strong>Angular 4</strong> in my project and trying to integrate Ionic <a href="http://ionicframework.com/docs/api/components/refresher/Refresher/" rel="nofollow noreferrer">Refresher</a>. Need to say, that I'm totally new to Ionic and not very good in Angular.</p>
  
  <p>I have imported all dependencies (as I think), but still getting the error:</p>
  
  <blockquote>
    <p>Uncaught Error: Can't resolve all parameters for ElementRef: (?).</p>
  </blockquote>
  
  <p>Here are my files.</p>
  
  <p><strong>balances.component.html:</strong></p>
  
  <pre><code>&lt;ion-content&gt;
    &lt;ion-refresher (ionRefresh)="doRefresh($event)"&gt;
      &lt;ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="Pull to refresh"
        refreshingSpinner="circles"
        refreshingText="Refreshing..."&gt;
      &lt;/ion-refresher-content&gt;
    &lt;/ion-refresher&gt;
  &lt;/ion-content&gt;
  &lt;!-- other code --&gt;
  </code></pre>
  
  <p><strong>balances.component.ts:</strong></p>
  
  <pre><code>import { Component, OnInit, ElementRef } from '@angular/core';
  import { Refresher, Content } from 'ionic-angular';
  
  @Component({
    selector: 'pc-balances',
    templateUrl: './balances.component.html',
    styles: [``]
  })
  export class BalancesComponent implements OnInit {   
    constructor(
      public refresher: Refresher,
      public elementRef: ElementRef,
      public content: Content
    ) {}
  
    ngOnInit() {}
  
    /* Code for Refresher's example */
    doRefresh(refresher) {
      console.log('Begin async operation', refresher);
  
      setTimeout(() =&gt; {
        console.log('Async operation has ended');
        refresher.complete();
      }, 2000);
    }
  }
  </code></pre>
  
  <p><strong>balances.module.ts:</strong></p>
  
  <pre><code>import { NgModule }           from '@angular/core';
  import { ElementRef }         from '@angular/core';
  import { IonicModule }        from 'ionic-angular';
  import { Refresher, Content } from 'ionic-angular';
  import { CommonModule }       from '@angular/common';
  import { SharedModule }       from '../shared/shared.module';
  import { HistoryModule }      from '../history/history.module';
  import { BalancesComponent }  from './balances.component';
  
  @NgModule({
    imports: [
      IonicModule,
      CommonModule,
      SharedModule,
      HistoryModule
    ],
    declarations: [
      BalancesComponent
    ],
    providers: [Refresher, Content, ElementRef]
  })
  export class BalancesModule { }
  </code></pre>
  
  <p>As you can see, I have imported necessary dependencies to module and included them to <code>providers</code>. I have no idea why I still getting the error, may be I missed something, any help is welcome!</p>