javascript - Angular Material - 意外值 'MdDialog'

Question

我正在使用 Angular Material 并添加 md-dialog 指令:

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

但我不断收到此错误:

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

我已经在 app.module.ts 中导入了 MdDialog并在 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() {
       ....
       ....
   }
}

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

已解决。根据我收到的错误:如果“md-dialog”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到“@NgModule.schemas”

所以，我必须在 app.module.ts 中添加以下内容:

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

在:@NgModule buildIn函数中我还添加了以下内容:

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