Components: Unexpected value 'MdPaginatorModule [..] Please add a @NgModule annotation

[summerchill]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

It should build

What is the current behavior?

I get an error:

Error: Unexpected value 'MdPaginatorModule in /node_modules/@angular/material/typings/index.d.ts' imported by the module 'AppModule in /src/app/app.module.ts'. Please add a @NgModule annotation.

What are the steps to reproduce?

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

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/cdk": "^2.0.0-beta.10",
"@angular/common": "4.1.0",
"@angular/material": "^2.0.0-beta.10",

[willieoliveira]

I experienced same issue with 'CdkTableModule' after last npm install. I downgraded to 2.0.0-beta.8 instead of beta.10 in package.json and build worked again.

[michael-vasyliv]

have the same issue for build with AOT, however in the package.json:
"@angular/cdk": "github:angular/cdk-builds",
"@angular/material": "github:angular/material2-builds",

for me works version of material 2.0.0-beta.8

[josephperrott]

Are you still seeing this issue with 2.0.0-beta.11? I was able to build as expected and did not see this error in beta.11

[injulkarnilesh]

I was getting "MdToolbarModule is not an NgModule" for 2.0.0-beta.10; upgrading to 2.0.0-beta.11 solved the issue. 👍
Angular version 4.1.2.

[jmorganmartin]

Getting

ERROR in Error: Unexpected value 'MdSlideToggleModule in .../node_modules/@angular/material/material.d.ts' imported by the module 'AppModule in .../src/app/app.module.ts'. Please add a @NgModule annotation.

When doing AOT build with @angular/material 2.0.0-beta.12, Angular 4.4.3

[ptMuta]

@jmorganmartin Md-prefix has been removed in beta.12 as noted in beta.11 release notes. You need to replace all Md-prefixes with the new Mat-prefix.

[nooballday]

Uncaught Error: Unexpected value 'MatTableDataSource' imported by the module 'AppModule'. Please add a @NgModule annotation.
at syntaxError (compiler.js:466)
at eval (compiler.js:15089)
at Array.forEach ()
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15072)
at JitCompiler._loadModules (compiler.js:33542)
at JitCompiler._compileModuleAndComponents (compiler.js:33503)
at JitCompiler.compileModuleAsync (compiler.js:33419)
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230)
at PlatformRef.bootstrapModule (core.js:5446)
at eval (main.ts:11)

Still getting it in

"@angular/cdk": "^5.0.0-rc.0",
"@angular/common": "^5.0.0",
"@angular/material": "^5.0.0-rc.0",

[maxgarsaiz]

@nooballday you have to import MatTableModule from @angular/material to @NgModule.

[bkcsfi]

@maxgarsaiz , I am having the same issue as @nooballday yet I am importing MatTableModule

Do you have any more suggestions? Thanks

compiler.js:466 Uncaught Error: Unexpected value 'MatTableDataSource' imported by the module 'AppModule'. Please add a @NgModule annotation.

my app.module.ts has

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { MatTableDataSource, MatTable, MatTableModule } from '@angular/material';
    import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
    import { AppComponent } from './app.component';

and

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatTableModule,
    MatTableDataSource,
    MatTable,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

package.json dependencies::

"dependencies": {
    "@angular/animations": "^5.0.5",
    "@angular/cdk": "^5.0.0-rc.2",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc.2",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },

[maxgarsaiz]

Hello @bkcsfi, remove MatTableDataSource and MatTable from the import of @NgModule. Because in the MatTableModule they are already declared. Just import them into your component to use them.

[bkcsfi]

thanks very much for the quick response. Your suggestion resolved my issue.

also for others working with angular-material, this demo app is worth examining

[adrianromanko]

I'm also getting this error with the JIT compiler. So far i've had those most issues after upgrading to 5.x.

compiler.js.pre-build-optimizer.js:485 Uncaught Error: Unexpected value 'BrowserAnimationsModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
at syntaxError (compiler.js.pre-build-optimizer.js:485)
at compiler.js.pre-build-optimizer.js:15204
at Array.forEach ()
at CompileMetadataResolver.getNgModuleMetadata (compiler.js.pre-build-optimizer.js:15187)
at JitCompiler._loadModules (compiler.js.pre-build-optimizer.js:34226)
at JitCompiler._compileModuleAndComponents (compiler.js.pre-build-optimizer.js:34187)
at JitCompiler.compileModuleAsync (compiler.js.pre-build-optimizer.js:34081)
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js.pre-build-optimizer.js:230)
at PlatformRef.bootstrapModule (core.js.pre-build-optimizer.js:5568)

[jelbourn]

We haven't been able to reproduce this issue. Feel free to open a new issue if you are able to provide a reproduction via StackBlitz.

[MAbdullah078]

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

solution

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}