Angular2中的材料设计组件“不是已知元素”

Posted 2023-02-22

【中文标题】Angular2中的材料设计组件“不是已知元素”

【英文标题】：Material design component "is not a known element" in Angular2

【发布时间】：2017-03-04 21:00:39

【问题描述】：

我有一个混合的 Angular1 和 Angular2 应用程序。在我路由到的 Angular2 组件之一中，我想使用 Material Design Button。

当我像 <md-button>foo</md-button> 这样在模板中插入一个按钮时，应用程序开始崩溃并显示此控制台消息

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)

所以，这听起来像是消息中的第一种情况，但我已经尝试了this answer 中给出的建议，将MdButton 添加到我的NgModule 的imports 属性中（其中已经包含@987654329 @ 正如the documentation) 所建议的那样，但如果我这样做了，整个应用程序就会变成空白，并且控制台中不会出现错误。

这里是一些相关代码

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"]);

【问题讨论】：

您是否将`MaterialModule.forRoot(),` 添加到您的根@NgModule() (github.com/angular/material2/blob/…) 的imports: [...]？

能否出示相关代码？

@GünterZöchbauer 我做到了。

@micronyks 添加了一些代码

提示，BrowserModule 导出 CommonModule，无需同时导入。在AppModule 上使用BrowserModule，在其他模块上使用CommonModule。

【参考方案1】：

应该是

<button md-button>foo</button>   

或

<button md-raised-button>foo</button>

【讨论】：

你是说我不能在html中使用md-组件？我相信你应该能够做到这一点。示例：github.com/kara/leashed-in/blob/master/src/app/…

我认为这是在材质中声明按钮的旧方法。

哇，就是这么简单。谢谢！

在演示页面https://material.angularjs.org/latest/demo/button它被命名为md-button

@Guus 请检查 - github.com/angular/material2/blob/master/src/lib/button/…

【参考方案2】：

有时当您向 angular2 添加新组件时，它不会直接注册标签，在这种情况下您必须做两件事：

转到 app.component.ts 文件

1) 在“import component”中手动插入要添加的按钮 2) 在@Component 中注册你的组件并给出路径

【讨论】：

新组件被添加到“app.module.js”中，使用angular cli自动：“ng generate component aNewComponent”

另外，这不是自定义组件问题，（您描述的是自定义组件生成）但它帮助我搜索了我的案例，我应该问我自己的问题:)