Angular Material - Unexpected value 'MdDialog'

Question

I'm using Angular Material and adding a md-dialog directive:

<md-dialog aria-label="Login" ng-cloak>....</md-dialog>

but I keep getting this error:

Error: Unexpected value 'MdDialog' imported by the module 'AppModule'. Please add a @NgModule annotation.

I have already imported the MdDialog in the app.module.ts and in signin.component.ts

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routes } from './app.router';
import { SigninComponent } from './signin/signin.component';
import { BrowserAnimationsModule } from '@angular/platform-
         browser/animations';
import { AppComponent } from './app.component';
import { MdDialog,
     MdButtonModule, 
     MdCardModule, 
     MdMenuModule, 
     MdToolbarModule, 
     MdIconModule, 
     MdProgressBarModule, 
     MdInputModule,
     MdRadioModule
} from '@angular/material';

@NgModule({
declarations: [
    AppComponent,
    SigninComponent
],
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes,
    BrowserAnimationsModule,
    MdDialog,
    MdButtonModule,
    MdCardModule,
    MdMenuModule,
    MdToolbarModule, 
    MdIconModule,
    MdProgressBarModule,
    MdInputModule,
    MdRadioModule,
    ReactiveFormsModule
],
providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

signin.conmponent.ts:

import { Component, OnInit } from '@angular/core';
import { MdRadioModule, MdButtonModule, MdDialog } from 
         '@angular/material';

@Component({
   selector: 'app-signin',
   templateUrl: './signin.component.html',
   styleUrls: ['./signin.component.css']
})

export class SigninComponent implements OnInit {
   constructor() { }
   ngOnInit() {
       ....
       ....
   }
}

dependencies and dev-dependencies in package.json:

"dependencies": {
   "@angular/animations": "^4.2.4",
   "@angular/common": "^4.2.4",
   "@angular/compiler": "^4.2.4",
   "@angular/core": "^4.2.4",
   "@angular/forms": "^4.2.4",
   "@angular/http": "^4.2.4",
   "@angular/material": "^2.0.0-beta.7",
   "@angular/platform-browser": "^4.2.4",
   "@angular/platform-browser-dynamic": "^4.2.4",
   "@angular/platform-server": "^4.2.4",
   "@angular/router": "^4.2.4",
   "bootstrap-material-design": "^0.5.10",
   "core-js": "^2.4.1",
   "hammerjs": "^2.0.8",
   "rxjs": "^5.0.1",
   "ts-helpers": "^1.1.1",
   "zone.js": "^0.7.2"
},
"devDependencies": {
   "@angular/compiler-cli": "^4.2.4",
   "@types/hammerjs": "^2.0.34",
   "@types/jasmine": "2.5.38",
   "@types/node": "^6.0.42",
   "angular-cli": "1.0.0-beta.28.3",
   "codelyzer": "~2.0.0-beta.1",
   "jasmine-core": "2.5.2",
   "jasmine-spec-reporter": "2.5.0",
   "karma": "1.2.0",
   "karma-chrome-launcher": "^2.0.0",
   "karma-cli": "^1.0.1",
   "karma-jasmine": "^1.0.2",
   "karma-remap-istanbul": "^0.2.1",
   "protractor": "~4.0.13",
   "ts-node": "1.2.1",
   "tslint": "^4.3.0",
   "typescript": "^2.4.1"
  }
}

I'm a kind of confused as the @NgModule is already being embedded in app.module.ts where MdDialog is imported.

Any idea how to fix this?

Thanks, a small progress.. another error shows up: Error: Template parse errors: 'md-dialog' is not a known element: 1. If 'md-dialog' is an Angular component, then verify that it is part of this module. 2. If 'md-dialog' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<md-dialog aria-label="Login" ng-cloak> — k.vincent
You have to use the md-dialog-content selector for the dialog's content and md-dialog-title on an element such as h1 for the dialog's title — Edric
please add your dependencies/dev-dependencies from package.json and system.js config. — Jayesh Agarwal

k.vincent k.vincent · Accepted Answer · 2017-09-21T13:12:55

Resolved. Based on the error I got: If 'md-dialog' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'

So, here what I had to add in app.module.ts:

   ...
   import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
   ...

and in: @NgModule buildIn function I had alsow to add the following:

@NgModule({
     imports: [....],
     declarations: [...],
     schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
     bootstrap: [
        AppComponent
     ]
})

Angular Material - Unexpected value 'MdDialog'

1 Answers