CODEWITHSUNDEEP
angular
user3692033
user3692033

Reputation: 635

Unexpected value 'MatTableDataSource' imported by the module 'AppModule'. Please add a @NgModule annotation

I am developing an angular application using angular 5. I wanted to use "MatTableDataSource" from angular- material. But i am getting this error

Unexpected value 'MatTableDataSource' imported by the module 'AppModule'. Please add a @NgModule annotation.

I search for a solution for this problem. I found this solution in git

"https://github.com/angular/material/issues/10981"

There a user named @dliebel gave a solution. I applied it but getting this error again and again. app.module.ts is specified below

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { ReactiveFormsModule, FormsModule, FormArray } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { SellDetailFormComponent } from './sellDetail/sellDetailForm.component';
import { RouterModule, Routes } from '@angular/router';
import { HotTableModule } from '@handsontable/angular';
import { CommonModule } from '@angular/common';
import { MatTableModule, MatSortModule,MatTableDataSource } from '@angular/material';
import { SellTableComponent } from './sellDetail/sellTable.component';


const appRoutes: Routes = [
{ path: 'sellTable', component: SellTableComponent }


];

@NgModule({
declarations: [
  AppComponent,SellTableComponent
 ],
imports: [
BrowserModule, HttpModule, FormsModule,
RouterModule.forRoot(appRoutes), ReactiveFormsModule,HotTableModule.forRoot() ,
 HttpClientModule, HotTableModule, 
CommonModule,MatTableModule,MatSortModule,MatTableDataSource
],
bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 3

Views: 15265

Answers (6)

mruanova
mruanova

Reputation: 7095

I removed "MatTableDataSource" form the imports and now it works for me.

Upvotes: 0

Bret Johnson
Bret Johnson

Reputation: 11

The new import for MatTableDataSource since the update is now

import {MatTableDataSource} from '@angular/material/table';

Upvotes: 1

Vamshi
Vamshi

Reputation: 55

After importing it in the module, it worked for me

Upvotes: -1

Jaideep
Jaideep

Reputation: 1028

You should not import it in app module , just import and use it directly in the component.ts file

and if that doesn't solve the issue

It may be version compatibility issue like i had Most likely i needed to update "@angular/material" and "@angular/cdk" to "5.0.0-rc.2" and this solved my problem

just see what version is compatible with your need and use

Upvotes: 4

Suresh Madhaiyan
Suresh Madhaiyan

Reputation: 69

MatDataTableSource is not an angular module. Remove it from the imports. You just add your component itself, following angular material.

import {MatTableDataSource} from '@angular/material';

Upvotes: 2

rajat sharma
rajat sharma

Reputation: 21

Try to import module correctly.

import { MatFormFieldModule, MatInputModule, MatPaginatorModule, MatTableModule, MatSortModule } from '@angular/material';

imports: [
    MatFormFieldModule, 
    MatInputModule, 
    MatPaginatorModule, 
    MatTableModule, 
    MatSortModule 
  ]

worked fine for me.

Upvotes: 2

Related Questions