关键词:
【中文标题】Angular2 材质“md-icon”不是已知元素【英文标题】:Angular2 material 'md-icon' is not a known element 【发布时间】:2017-03-10 12:40:55 【问题描述】:我有使用 @angular2-material 2.0.0-alpha.8-2 版本的 angular2 应用程序。一切正常。 现在我决定将材料版本升级到最新版本,即 2.0.0-alpha.9-3。我按照GETTING_STARTED 中提到的步骤进行操作。 之前我已经导入了如下的单个模块:
@NgModule(
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdCheckboxModule,
....
....
但是 2.0.0-alpha.9-3 版本的更改日志显示:
“Angular Material 已从 @angular2-material/... 包更改为 @angular/material 下的单个包。伴随此更改,还有一个新的 NgModule MaterialModule ,它包含所有组件。”
所以我删除了显式导入的材质模块并将其更改为:
@NgModule(
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
MaterialModule.forRoot(),
....
....
在此更改后,我收到以下错误
'md-icon' 不是已知元素:
-
如果“md-icon”是一个 Angular 组件,则验证它是否是该模块的一部分。
如果“md-icon”是 Web 组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。
我是否需要显式导入单个模块或如更改日志中所述 MaterialModule 包含所有组件并且我不应该显式导入单个模块?如果我不应该导入单个模块,那么可能是什么错误来源?
【问题讨论】:
对我来说,这只发生在 Karma/Jasmine 测试中,带有“模板解析错误:‘md-icon’不是已知元素” 【参考方案1】:export
部分呢?你有提供MaterialModule
吗?
@NgModule(
imports: [
MaterialModule.forRoot()
],
exports: [
MaterialModule
]
)
记得在你的 index.html 中提供图标样式:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
之后,您应该可以在视图中使用图标了:
<md-icon>delete</md-icon>
【讨论】:
是的。我有材料图标样式包括在内。但是我们需要导出材质模块吗?我相信这已经被 MaterialModule 导出了。如果我再次导出它,它不会被导出两次并显示歧义错误,因为它将被导出两次? 如果您的应用中有多个模块。例如,您正在使用“sharedModule”,您需要重新导出要在导入“sharedModule”的模块中使用的模块。当您拥有一个模块应用程序时,我不确定它是如何工作的。我相信您有不止一个模块,这就是您遇到material
问题的原因。
嗯,现在这不适用于 NG 4.3.5 和 NG-material 2.0.0-beta8【参考方案2】:
如果你像这样加载一个子模块:
path: 'childModule', loadChildren: 'app/child/child.module#childModule'
然后在子模块中,您必须再次导入 MaterialModule。 例如
@NgModule(
imports: [
sharedModules,
childRouting,
MaterialModule.forRoot()
],
declarations: [
],
providers: []
)
export class childModule
【讨论】:
【参考方案3】:添加
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
致index.html
和<i class="material-icons">delete</i>
而不是<md-icon>delete</md-icon>
【讨论】:
【参考方案4】:您需要在 app.module.ts 中导入 MatIconModule 并将其添加到同一文件中的导入数组中。
例如这样:
import BrowserModule from "@angular/platform-browser";
import NgModule from "@angular/core";
import BrowserAnimationsModule from "@angular/platform-browser/animations";
import TreeModule from "angular-tree-component";
import HttpClientModule from "@angular/common/http";
import MatButtonModule from "@angular/material/button";
import MatIconModule from "@angular/material/icon"; // <----- Here
import EclassService from "./services/eclass.service";
import AppComponent from "./app.component";
import FormsModule from "@angular/forms";
import AsyncTreeComponent from "./components/async-tree/async-tree.component";
@NgModule(
declarations: [
AppComponent,
AsyncTreeComponent
],
imports: [
BrowserModule, BrowserAnimationsModule, FormsModule, TreeModule, HttpClientModule, MatButtonModule, MatIconModule // <--- HERE
],
providers: [EclassService],
bootstrap: [AppComponent]
)
export class AppModule
【讨论】:
这应该是新材料版本的公认答案 我已经做到了。在 app.module.ts 中导入单独的材质组件并导出。但两者都没有解决。材料模块甚至 ngForm 的错误似乎相同。但是,它也可以正常导入。 如果它仍然不起作用,请检查 NgModule 中不相关的语法错误,例如尝试导入不存在/已删除的模块。【参考方案5】:添加这个 到 index.html:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
并添加到 app.module.ts 文件中:
import
MatIconModule
from '@angular/material';
imports: [MatIconModule]
【讨论】:
【参考方案6】:解决方案是添加 md-icon、md-input 等模块和样式表。
您还需要在 app.module.ts 中添加 CUSTOM_ELEMENTS_SCHEMA,如下所示:
import NgModule, CUSTOM_ELEMENTS_SCHEMA from '@angular/core';
然后添加
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
【讨论】:
【参考方案7】:mat-icon 使用分两步:
将其插入 index.html 文件中。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
将此行插入到 app.module.ts 文件中。如果执行延迟加载,则包含它 在该模块或 sharedModule 中。
import MatIconModule from '@angular/material/icon';
【讨论】:
angular2 '不是已知元素'
】angular2\\\'不是已知元素\\\'【英文标题】:angular2\'isnotaknownelement\'angular2\'不是已知元素\'【发布时间】:2017-05-0715:43:54【问题描述】:嗨~我是Angular2的初学者。当我使用“ANGULAR2UIFRAMEWORK”作为http://www.angulartypescript.com/angular-2-ui-... 查看详情
Angular2 材质对话框有问题 - 您是不是将其添加到 @NgModule.entryComponents?
】Angular2材质对话框有问题-您是不是将其添加到@NgModule.entryComponents?【英文标题】:Angular2materialdialoghasissues-Didyouadditto@NgModule.entryComponents?Angular2材质对话框有问题-您是否将其添加到@NgModule.entryComponents?【发布时间】:2017-05-220... 查看详情
Angular2中的材料设计组件“不是已知元素”
】Angular2中的材料设计组件“不是已知元素”【英文标题】:Materialdesigncomponent"isnotaknownelement"inAngular2【发布时间】:2017-03-0421:00:39【问题描述】:我有一个混合的Angular1和Angular2应用程序。在我路由到的Angular2组件之一中... 查看详情
angular2“不是已知元素”错误:一切都已尝试
】angular2“不是已知元素”错误:一切都已尝试【英文标题】:angular2"notaknownelement"bug:everythingwastried【发布时间】:2018-02-2410:59:42【问题描述】:我尝试在另一个模块中使用某些组件的非常经典的情况:外来组件:importCom... 查看详情
Angular2 RC6:'<component> 不是已知元素'
】Angular2RC6:\\\'<component>不是已知元素\\\'【英文标题】:Angular2RC6:\'<component>isnotaknownelement\'Angular2RC6:\'<component>不是已知元素\'【发布时间】:2017-01-1300:14:37【问题描述】:尝试运行我的Angular2RC6应用程序时,我在... 查看详情
Angular2:无法绑定到“formGroup”,因为它不是“form”的已知属性
】Angular2:无法绑定到“formGroup”,因为它不是“form”的已知属性【英文标题】:Angular2:Can\'tbindto\'formGroup\'sinceitisn\'taknownpropertyof\'form\'【发布时间】:2017-09-0102:38:58【问题描述】:我是Angular2的新手,我尝试制作一种反应形式... 查看详情
Angular2 - 无法绑定到“formGroup”,因为它不是“form”的已知属性
】Angular2-无法绑定到“formGroup”,因为它不是“form”的已知属性【英文标题】:Angular2-Can\'tbindto\'formGroup\'sinceitisn\'taknownpropertyof\'form\'【发布时间】:2017-02-2623:51:04【问题描述】:我知道other有关该主题的问题,但我似乎遗漏了... 查看详情
无法绑定到“formControl”,因为它不是“输入”的已知属性 - Angular2 Material Autocomplete 问题
...法绑定到“formControl”,因为它不是“输入”的已知属性-Angular2MaterialAutocomplete问题【英文标题】:Can\'tbindto\'formControl\'sinceitisn\'taknownpropertyof\'input\'-Angular2MaterialAutocompleteissue【发布时间】:2017-08-3010:16:23【问题描述】:我正在... 查看详情
Angular2 RC5:无法绑定到“属性 X”,因为它不是“子组件”的已知属性
】Angular2RC5:无法绑定到“属性X”,因为它不是“子组件”的已知属性【英文标题】:Angular2RC5:Can\'tbindto\'PropertyX\'sinceitisn\'taknownpropertyof\'ChildComponent\'【发布时间】:2016-12-2122:58:47【问题描述】:我有一个基于Angular2Seed项目的小... 查看详情
Angular2 RC5:无法绑定到“属性 X”,因为它不是“子组件”的已知属性
】Angular2RC5:无法绑定到“属性X”,因为它不是“子组件”的已知属性【英文标题】:Angular2RC5:Can\'tbindto\'PropertyX\'sinceitisn\'taknownpropertyof\'ChildComponent\'【发布时间】:2016-12-2122:58:47【问题描述】:我有一个基于Angular2Seed项目的小... 查看详情
“模板解析错误:'app' 不是已知元素”当使用 Webpack2 构建和部署“OK”angular2 应用程序时
...:\\\'app\\\'不是已知元素”当使用Webpack2构建和部署“OK”angular2应用程序时【英文标题】:“Templateparseerrors:\'app\'isnotaknownelement”whenan\'OK\'angular2appisbuiltwithWebpack2anddeployed“模板解析错误:\'app\'不是已知元素”当使用Webpack2构建... 查看详情
Angular2(最终版本)组件中的*ngFor:无法绑定到'ngForOf',因为它不是'div'的已知属性[重复]
】Angular2(最终版本)组件中的*ngFor:无法绑定到\\\'ngForOf\\\',因为它不是\\\'div\\\'的已知属性[重复]【英文标题】:Angular2(finalversion)*ngForincomponent:Can\'tbindto\'ngForOf\'sinceitisn\'taknownpropertyof\'div\'[duplicate]Angular2(最终版本)组件中... 查看详情
无法绑定到“routerlink”,因为它不是使用 angular2-webpack-starter 的已知本机属性 [重复]
】无法绑定到“routerlink”,因为它不是使用angular2-webpack-starter的已知本机属性[重复]【英文标题】:Can\'tbindto\'routerlink\'sinceitisn\'taknownnativepropertyusingangular2-webpack-starter[duplicate]【发布时间】:2016-04-1102:17:26【问题描述】:我在使... 查看详情
Angular 2 + ng 测试:“X”不是已知组件[重复]
】Angular2+ng测试:“X”不是已知组件[重复]【英文标题】:Angular2+ngtest:\'X\'isnotaknowncomponent[duplicate]【发布时间】:2017-02-1003:24:00【问题描述】:我使用Angular2.0RTM和AngularCLI1.0.0-beta16创建了一个新项目:nginit然后跑:nggeneratecomponent... 查看详情
Angular 2 - 无法绑定到“ngModel”,因为它不是“输入”的已知属性
】Angular2-无法绑定到“ngModel”,因为它不是“输入”的已知属性【英文标题】:Angular2-Can\'tbindto\'ngModel\'sinceitisn\'taknownpropertyof\'input\'【发布时间】:2016-12-1820:57:57【问题描述】:我在plunker中有一个Angular2内联编辑组件。但突然... 查看详情
Angular 2 错误:无法绑定到“innerhtml”,因为它不是已知的本机属性
】Angular2错误:无法绑定到“innerhtml”,因为它不是已知的本机属性【英文标题】:Angular2error:Can\'tbindto\'innerhtml\'sinceitisn\'taknownnativeproperty【发布时间】:2016-10-1621:30:47【问题描述】:使用Angular2在DIV中绑定原始html版本:角2“2.0... 查看详情
Angular 2 RC 5 - 无法绑定到“...”,因为它不是“...”的已知属性
】Angular2RC5-无法绑定到“...”,因为它不是“...”的已知属性【英文标题】:Angular2RC5-Can\'tbindto\'...\'sinceitisn\'taknownpropertyof\'...\'【发布时间】:2016-12-2317:52:09【问题描述】:自从Angular2RC5更新以来,我提出了一些问题。我有3个... 查看详情
例外:无法绑定到“ngFor”,因为它不是已知的本机属性
...32【问题描述】:我做错了什么?importbootstrap,Componentfrom\'angular2/angular2\'@Component(selector:\'conf-talk 查看详情