角度材质 - 意外值“MdDialog”

Question

我正在使用 Angular Material 并添加一个 md-dialog 指令：

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

但我不断收到此错误：

错误：模块“AppModule”导入了意外的值“MdDialog”。请添加@NgModule 注解。

我已经在app.module.ts和signin.component.ts中导入了MdDialog

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() {
       ....
       ....
   }
}

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"
  }
}

我有点困惑，因为 @NgModule 已经嵌入到 app.module.ts 中，其中导入了 MdDialog。

知道如何解决这个问题吗？

Answer 1

已解决。根据我得到的错误：If 'md-dialog' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'

所以，这里我必须在app.module.ts 中添加：

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

并输入：@NgModule buildIn 函数我还必须添加以下内容：

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