材料设计组件“不是已知元素"在 Angular2 中 [英] Material design component "is not a known element" in Angular2
问题描述
我有一个混合的 Angular1 和 Angular2 应用程序.在我路由到的 Angular2 组件之一中,我想使用 Material Design 按钮.
I have a hybrid Angular1 and Angular2 application. In one of the Angular2 components that I route to, I want to use a Material Design Button.
当我像这样在模板中插入一个按钮时
应用程序开始崩溃并显示此控制台消息
When I insert a button into the template like this <md-button>foo</md-button>
the application starts crashing with this console message
Error: Template parse errors:
'md-button' is not a known element:
1. If 'md-button' is an Angular component, then verify that it is part of this module.
2. If 'md-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<h1>Job</h1>[ERROR ->]<md-button>material</md-button>"): JobComponent@0:12
at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8321:21)
所以,听起来可能是消息中的情况 1,但我已经尝试了 this answer 将 MdButton
添加到我的 NgModule
的 imports
属性(其中已包含 MaterialModule.forRoot()
根据 文档) 的建议,但如果确实如此,整个应用程序都变成空白,控制台中没有错误.
So, it might sound like it is case 1 in the message, but I have tried the advice given in this answer to add MdButton
to the imports
property of my NgModule
(which already contained MaterialModule.forRoot()
as adviced by the documentation) , but if I do, the whole application goes blank without errors in the console.
这里是一些相关的代码
import { UIRouterModule } from "ui-router-ng2";
import { Ng1ToNg2Module, uiRouterNgUpgrade } from "ui-router-ng1-to-ng2";
import { MaterialModule, MdButton } from '@angular/material';
const upgradeAdapter: UpgradeAdapter = new UpgradeAdapter(
forwardRef(() => XamFlowNg2Module));
uiRouterNgUpgrade.setUpgradeAdapter(upgradeAdapter);
angular.module("xamFlow")
.factory("consoleService",
upgradeAdapter.downgradeNg2Provider(ConsoleService));
/*
* Expose our ng1 content to ng2
*/
upgradeAdapter.upgradeNg1Provider("restService");
@NgModule({
declarations: [
JobComponent,
],
entryComponents: [
// Components that are routed to must be listed here, otherwise you'll get "No Component Factory"
JobComponent,
],
imports: [
CommonModule,
BrowserModule,
FormsModule,
HttpModule,
Ng1ToNg2Module,
MaterialModule.forRoot()
],
providers: [
ConsoleService,
ImageService
]
})
class MyModule { }
upgradeAdapter.bootstrap(document.body, ["myApp"]);
推荐答案
应该是
<button md-button>foo</button>
或
<button md-raised-button>foo</button>
这篇关于材料设计组件“不是已知元素"在 Angular2 中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!