Error : Please add a @NgModule annotation when using latest cli and material design

Question

I am importing material modules as follow in app module:

import { NgModule } from '@angular/core';
import { SharedModule } from 'app/shared/shared.module';
import { AppRoutingModule } from './app-routing.module';
import {
  MdTooltipModule,
  MdTabsModule,
  MdSlideToggleModule,
  MdIconModule,
  MdDialogModule,
  MdButtonModule,
  MdListModule,
  MdCardModule,
  MdToolbarModule,
  MdProgressSpinnerModule,
  MdProgressBarModule,
} from '@angular/material';


@NgModule({    
  declarations: [
    //..components
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
 MdTooltipModule,
  MdTabsModule,
  MdSlideToggleModule,
  MdIconModule,
  MdDialogModule,
  MdButtonModule,
  MdListModule,
  MdCardModule,
  MdToolbarModule,
  MdProgressSpinnerModule,
  MdProgressBarModule,

    SharedModule,
    AppRoutingModule,
  ],
  providers: [
    //..
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

This gives an error as follow for each Md Module. I also updated my Angular CLI and Material design. I also tried to import only MaterialModule, but it is deprecated.

ERROR in Unexpected value 'MdTooltipModule in E:/Code/employee-web/node_modules/@angular/material/typings/index.d.ts' impor ted by the module 'AppModule in E:/Code/employee-web/src/app/app.module.ts'. Please add a @NgModule annotation.

How can I get rid of this?

@Vikhyath Maiya already imported as import { NgModule } from '@angular/core'; — Er Sushil, Sep 01 '17 at 07:23
then post the exact code..Its not there in the code you posted — Vikhyath Maiya, Sep 01 '17 at 07:24
import Material Module in your app.module.ts and add it to you imports block in app.module.ts — Iris_geek, Sep 01 '17 at 07:34
@Iris_geek gives same error in case of importing MaterialModule — Er Sushil, Sep 01 '17 at 07:35

score 0 · Answer 1 · answered Sep 01 '17 at 07:42

0

you can still use

import {MaterialModule, MdNativeDateModule, MdButtonModule} from '@angular/material';

it may say MaterialModule is depricated but you dont get any errors. it works fine.

you can import all these extras modules in the shared module and add them in both imports and exports. and only import shared module in the app module and other feature modules. it works fine.

answered Sep 01 '17 at 07:42

Sunil Kumar

759
7
17

I have already done this. This gives me another error here https://stackoverflow.com/questions/45993648/unable-to-export-materialmodule-from-shared-module-ts-on-build-time/45993818?noredirect=1#comment78949921_45993818 that's why I am importing directly to app module – Er Sushil Sep 01 '17 at 07:55

score 0 · Answer 2 · answered Sep 01 '17 at 07:53

The error says there is not module called MdTooltipModule in the module you imported. That means in '@angular/material', there is not MdTooltipModule module.

look into that folder inside your imported package atnode_modules folder and findout that package is part of all the exported modules

i think there might be a spelling mistake

one more think I see is you imported both MdTooltipModule and MdToolbarModule. make sure all youare importing exist inside the module

Error : Please add a @NgModule annotation when using latest cli and material design

2 Answers2