unable to integrate mat-tab

[Farooq Mustafa]

Not sure where to start the explanation, so will try with the error (same happens with stepper): 

compiler.js:485 Uncaught Error: Template parse errors:

'mat-tab' is not a known element:

1. If 'mat-tab' is an Angular component, then verify that it is part of this module.

2. If 'mat-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<mat-tab-group>

In my package.json I think I have the relevant components:

},

"private": true,

"dependencies": {

"@angular-devkit/schematics": "0.0.42",

"@angular/animations": "5.1.2",

"@angular/cdk": "5.0.2",

"@angular/common": "5.1.2",

"@angular/compiler": "5.1.2",

"@angular/core": "5.1.2",

"@angular/forms": "5.1.2",

"@angular/http": "5.1.2",

"@angular/material": "5.0.2",

"@angular/platform-browser": "5.1.2",

"@angular/platform-browser-dynamic": "5.1.2",

"@angular/router": "5.1.2",

"core-js": "2.5.3",

"hammerjs": "2.0.8",

"ng2-smart-table": "1.2.2",

"rxjs": "5.5.6",

"zone.js": "0.8.19",

"web-animations-js": "2.3.1",

"angular-in-memory-web-api": "0.5.2"

},

"devDependencies": {

"@angular/cli": "1.6.3",

"@angular/compiler-cli": "^5.0.0",

"@angular/language-service": "^5.0.0",

"@types/jasmine": "~2.5.53",

"@types/jasminewd2": "~2.0.2",

"@types/node": "~6.0.60",

"codelyzer": "~3.1.1",

"jasmine-core": "~2.6.2",

"jasmine-spec-reporter": "~4.1.0",

"karma": "~1.7.0",

"karma-chrome-launcher": "~2.1.1",

"karma-cli": "~1.0.1",

"karma-coverage-istanbul-reporter": "^1.2.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.1.2",

"ts-node": "~3.2.0",

"tslint": "~5.3.2",

"typescript": "~2.4.2"

}

}

In my app.module.ts: 

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { RouterModule } from '@angular/router';

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

import { ProductAddComponent } from './product-add/product-add.component';

import { ProductListComponent } from './product-list/product-list.component';

import { OrderAddComponent } from './order-add/order-add.component';

import { CustomerAddComponent } from './customer-add/customer-add.component';

import { OrderListComponent } from './order-list/order-list.component';

import { CustomerListComponent } from './customer-list/customer-list.component';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ApiService } from './api.service';

import {

MatAutocompleteModule,

MatButtonModule,

MatButtonToggleModule,

MatCardModule,

MatCheckboxModule,

MatChipsModule,

MatDatepickerModule,

MatDialogModule,

MatExpansionModule,

MatGridListModule,

MatIconModule,

MatInputModule,

MatListModule,

MatMenuModule,

MatNativeDateModule,

MatPaginatorModule,

MatProgressBarModule,

MatProgressSpinnerModule,

MatRadioModule,

MatRippleModule,

MatSelectModule,

MatSidenavModule,

MatSliderModule,

MatSlideToggleModule,

MatSnackBarModule,

MatSortModule,

MatTableModule,

MatTabsModule,

MatToolbarModule,

MatTooltipModule,

MatStepperModule,

} from '@angular/material';

import { HttpModule } from '@angular/http';

import { CdkTableModule } from '@angular/cdk/table';

@NgModule({

declarations: [

AppComponent,

ProductAddComponent,

ProductListComponent,

OrderAddComponent,

CustomerAddComponent,

OrderListComponent,

CustomerListComponent

],

imports: [

MatStepperModule,

BrowserAnimationsModule,

BrowserModule,

FormsModule,

ReactiveFormsModule,

HttpClientModule,

HttpModule,

RouterModule.forRoot([

{

path: 'products',

component: ProductListComponent

},

{

path: 'orders',

component: OrderListComponent

},

{

path: 'customers',

component: CustomerListComponent

},

{

path: 'products/add',

component: ProductAddComponent

},

{

path: 'products/add/:id',

component: ProductAddComponent

},

{

path: 'orders/add',

component: OrderAddComponent

},

{

path: 'orders/add/:id',

component: OrderAddComponent

},

{

path: 'customers/add',

component: CustomerAddComponent

},

{

path: 'customers/add/:id',

component: CustomerAddComponent

},

]),

],

exports: [

CdkTableModule,

MatAutocompleteModule,

MatButtonModule,

MatButtonToggleModule,

MatCardModule,

MatCheckboxModule,

MatChipsModule,

MatStepperModule,

MatDatepickerModule,

MatDialogModule,

MatExpansionModule,

MatGridListModule,

MatIconModule,

MatInputModule,

MatListModule,

MatMenuModule,

MatNativeDateModule,

MatPaginatorModule,

MatProgressBarModule,

MatProgressSpinnerModule,

MatRadioModule,

MatRippleModule,

MatSelectModule,

MatSidenavModule,

MatSliderModule,

MatSlideToggleModule,

MatSnackBarModule,

MatSortModule,

MatTableModule,

MatTabsModule,

MatToolbarModule,

MatTooltipModule,

],

providers: [ApiService],

bootstrap: [AppComponent]

})

export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

This is the order.add.component.html:

<mat-tab-group>

<mat-tab label="Tab 1">Content 1</mat-tab>

<mat-tab label="Tab 2">Content 2</mat-tab>

</mat-tab-group>

And order-add.component.ts: 

import {Component} from '@angular/core';

@Component({

selector: 'app-order-add',

templateUrl: './order-add.component.html',

styleUrls: ['./order-add.component.css']

})

export class OrderAddComponent {}

Struggling with this for a while. Would appreciate if you had some guidance / pointers. 

[Farooq Mustafa]

Of course, right after posting (struggling with Stepper for days and trying to implement Tabs as starter) , I finally got it work after including  MatTabsModule in the @NgModule imports.