'mat-progress-bar' is not a known element:

[gridce...@gridcell.io]

hi all

I'm using 

"@angular/animations": "6.0.0",
    "@angular/cdk": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "6.0.0",
    "@angular/http": "6.0.0",
    "@angular/material": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/router": "6.0.0",

and have imported  

MatProgressBarModule

 in

@NgModule({
  imports: [

from

import {
  MAT_DIALOG_DEFAULT_OPTIONS,
  MatAutocompleteModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatGridListModule,
  MatInputModule,
  MatNativeDateModule,
  MatPaginatorModule,


  MatProgressSpinnerModule
} from '@angular/material';

and using

<div class="container">
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>

but I still get:

compiler.js:215 Uncaught Error: Template parse errors:
'mat-progress-bar' is not a known element:
1. If 'mat-progress-bar' is an Angular component, then verify that it is part of this module.
2. If 'mat-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<div class="container">
  [ERROR ->]<mat-progress-bar mode="indeterminate"></mat-progress-bar>

all other components are working fine, what could be the issue, does it need some other dependancy?

i also have these as first imports:

imports: [
    // angular
    BrowserAnimationsModule,
    BrowserModule,

[gridce...@gridcell.io]

turns out it needed to be declared in the sharedmodules not the main app