title: error TS2304: Cannot find name 'MatPaginator'
body: <p>I'm trying to follow the tutorial <a href="https://blog.angular-university.io/angular-material-data-table/" rel="nofollow noreferrer">here</a> to set up a paginator for my material table in Angular.</p>
  <p>I've getting the error, error TS2304: Cannot find name 'MatPaginator' despite importing MatPaginatorModule:</p>
  <pre><code>import { MatPaginatorModule } from '@angular/material/paginator';
  </code></pre>
  <p>In both my all-matches.component and in app.module.</p>
  <p>App.module:</p>
  <pre><code>import { MaterializeModule } from 'angular2-materialize'
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { masterFirebaseConfig } from './api-keys';
  import { AngularFireModule } from 'angularfire2';
  import { AngularFireDatabaseModule } from 'angularfire2/database';
  import { AppComponent } from './app.component';
  import { YoutubeComponent } from './youtube/youtube.component';
  import { routing } from './app.routing';
  import { NewMatchComponent } from './new-match/new-match.component';
  import { CreateAccountComponent } from './create-account/create-account.component';
  import { TestDbComponent } from './test-db/test-db.component';
  import { LandingComponent } from './landing/landing.component';
  import { MatchDisplayComponent } from './match-display/match-display.component';
  import { AuthorizationService } from './authorization.service';
  import { AngularFireAuthModule } from 'angularfire2/auth';
  import { DatabaseService } from './database.service';
  import { TextTransformationService } from './text-transformation.service';
  import { ValidationService } from './validation.service';
  import { LoginComponent } from './login/login.component';
  import { ProtectionGuard } from './protection.guard';
  import { AllMatchesComponent } from './all-matches/all-matches.component';
  import { AnnotationDisplayComponent } from './annotation-display/annotation-display.component';
  import { D3Service } from './d3.service';
  import { NotfoundComponent } from './notfound/notfound.component';
  import { UserStatusReportComponent } from './user-status-report/user-status-report.component';
  import { PaymentOrAnnotationDetailsComponent } from './payment-or-annotation-details/payment-or-annotation-details.component';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { MatSlideToggleModule } from '@angular/material/slide-toggle';
  import { MatSelectModule } from '@angular/material/select';
  import { MatOptionModule } from '@angular/material/core';
  import { MatInputModule } from '@angular/material/input';
  import { MatFormFieldModule } from '@angular/material';
  import { MatTableModule } from '@angular/material/table';
  import { MatSortModule } from '@angular/material';
  import { MatDatepickerModule, MatNativeDateModule, MatPaginatorModule } from '@angular/material';
  import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
  
  export const firebaseConfig = {
    apiKey: masterFirebaseConfig.apiKey,
    authDomain: masterFirebaseConfig.authDomain,
    databaseURL: masterFirebaseConfig.databaseURL,
    storageBucket: masterFirebaseConfig.storageBucket
  };
  
  @NgModule({
    declarations: [
      AppComponent,
      YoutubeComponent,
      NewMatchComponent,
      CreateAccountComponent,
      TestDbComponent,
      LandingComponent,
      MatchDisplayComponent,
      LoginComponent,
      AllMatchesComponent,
      AnnotationDisplayComponent,
      NotfoundComponent,
      UserStatusReportComponent,
      PaymentOrAnnotationDetailsComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      routing,
      MaterializeModule,
      ReactiveFormsModule,
      AngularFireModule.initializeApp(firebaseConfig),
      AngularFireDatabaseModule,
      AngularFireAuthModule,
      BrowserAnimationsModule,
      MatSlideToggleModule,
      MatSelectModule,
      MatOptionModule,
      MatInputModule,
      MatNativeDateModule,
      MatDatepickerModule,
      MatTableModule,
      MatSelectModule,
      MatSortModule,
      MatProgressSpinnerModule,
      MatPaginatorModule
    ],
    providers: [AuthorizationService, DatabaseService, ProtectionGuard, D3Service, ValidationService, TextTransformationService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>all-matches.component.ts:</p>
  <pre><code>import { Component, OnInit, OnDestroy, AfterViewInit, ViewChild } from '@angular/core';
  import { MatPaginatorModule } from '@angular/material/paginator';
  import { D3Service } from '../d3.service';
  import { DatabaseService } from '../database.service';
  import { TextTransformationService } from '../text-transformation.service';
  import * as firebase from 'firebase/app';
  import { MatTableDataSource, MatSort } from '@angular/material';
  import { DataSource } from '@angular/cdk/table';
  import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
  import { MatchDataSource } from '../matchDataSource.model';
  import { AuthorizationService } from '../authorization.service';
  import { Subject } from 'rxjs/Subject';
  import { tap } from 'rxjs/operators';
  
  @Component({
    selector: 'app-all-matches',
    templateUrl: './all-matches.component.html',
    styleUrls: ['./all-matches.component.scss']
  })
  export class AllMatchesComponent implements OnInit, OnDestroy, AfterViewInit {
    private dataSource: MatchDataSource;
    private columnsToDisplay = ['rank','weightClass', 'ageClass','athlete1Name', 'athlete2Name', 'gender','tournamentName','location', 'date', 'matchRating', 'videoUrl']; //TODO make this dynamic somehow
    private loading = true;
    user: any = null;
    private ngUnsubscribe: Subject&lt;void&gt; = new Subject&lt;void&gt;();
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
  
    constructor(private authService: AuthorizationService, private d3Service: D3Service, private dbService: DatabaseService, private textTransformationService: TextTransformationService) { }
  
    ngOnInit() {
      this.authService.getCurrentUser().takeUntil(this.ngUnsubscribe).subscribe(user=&gt;{
        this.user = user;
      },err=&gt;{
        console.log(err);
      });
      this.dataSource = new MatchDataSource(this.dbService);
      this.dataSource.loadMatches('test', '', '', 0, 3);
      }
  
      ngAfterViewInit(){
        this.paginator.page
          .pipe(
            tap(()=&gt; this.loadMatchesPage())
          )
          .subscribe();
      }
  
      loadMatchesPage(){
        this.dataSource.loadMatches('TODO', '', 'asc', this.paginator.pageIndex, this.paginator.pageSize);
      }
  
      ngOnDestroy(){
        console.log(&quot;onDestroy is called&quot;);
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
      }
  }
  </code></pre>
  <p>It doesn't seem that this is a common problem.</p>
  <p>I'm using
  &quot;@angular/cdk&quot;: &quot;^5.2.5&quot;,
  &quot;@angular/common&quot;: &quot;5.2.7&quot;,
  &quot;@angular/material&quot;: &quot;^5.2.5&quot;,</p>
  <p>Would the versioning explain the problem? Open to any suggestions. Many thanks in advance. Willing to supply an example if folks thing it's warranted.</p>