Angular Material - 意外值 'MdDialog'
Angular Material - Unexpected value 'MdDialog'
我正在使用 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
和 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
。
知道如何解决这个问题吗?
已解决。根据我得到的错误: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
]
})
我正在使用 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
和 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
。
知道如何解决这个问题吗?
已解决。根据我得到的错误: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
]
})