Vla*_*uta 30 angular-material angular
我正在使用Angular CLI和角度材料v.5.2.5并尝试使用
垫图标按钮
但是控制台产生了这样的错误:
未捕获错误:模板解析错误:'mat-icon'不是已知元素...
如果我使用
垫募集按钮
一切正常,无法弄清楚如何解决这个问题
的index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Todo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MatButtonModule } from '@angular/material/button';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MatButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Plo*_*ppy 66
您的导入中缺少MatIconModule.
imports: [
BrowserModule,
FormsModule,
HttpModule,
MatButtonModule,
MatIconModule, // <-- here
],
小智 16
我正在使用Angular 6.我创建了一个名为material.module.ts的不同文件,其中我保留了所有mat模块依赖项.你可以在app.module.ts文件中调用这个material.module.ts文件它会工作.当我在我的代码中添加'MatIconModule'它对我有用.
这是我的代码.
material.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatButtonModule,MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule, MatIconModule} from '@angular/material';
@NgModule({
imports: [MatButtonModule, MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule,MatIconModule],
exports: [MatButtonModule, MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule, MatIconModule]
})
export class MaterialModule{}
和app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MaterialModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
fre*_*dev 16
import { MatIconModule } from '@angular/material/icon'
进而
imports: [
// other imports...
MatIconModule, // <-- here
],
小智 7
对我来说，垫图标模块已正确导入，但由于某些奇怪的原因，来自错误的组件不在应用程序模块声明中。
@NgModule({
declarations: [
...
TheFileWithMatIconTagComponent,
...
]
小智 5
import {MatIconModule} from '@angular/material';// this must add to app module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatSliderModule,
MatButtonModule,
MatCheckboxModule,
MatIconModule // this must add to app module.ts
],
app.module.ts您的文件或相应的.module.ts文件也可能无法编译。如果出现错误，它只会抛出此错误消息，而不是告诉模块本身有错误。检查相关文件以了解导入或代码的任何问题。
| 归档时间： |
|
| 查看次数： |
36860 次 |
| 最近记录： |