템플릿 구문 분석 오류: 'mat-icon'은(는) 알려진 요소가 아닙니다.
Angular CLI와 Angular material v.5.2.5를 사용하고 있으며
매트 아이콘 버튼
그러나 콘솔에서 발생하는 이러한 오류:
감지되지 않은 오류:템플릿 구문 분석 오류: 'mat-icon'은(는) 알려진 요소가 아닙니다...
이용하면
매트 단추
모든 것이 잘 작동합니다. 어떻게 그것을 해결해야 할지 모르겠습니다.
색인.
<!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>
메인.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.s.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 { }
가져오기에서 MatIcon 모듈이 누락되었습니다.
imports: [
BrowserModule,
FormsModule,
HttpModule,
MatButtonModule,
MatIconModule, // <-- here
],
Angular 9 이상에서는 다음과 같이 해야 합니다.
import { MatIconModule } from '@angular/material/icon'
그리고 나서.
imports: [
// other imports...
MatIconModule, // <-- here
],
Angular 6.를 사용하고 있으며 mat Module 종속성을 모두 유지하는 material.module.ts라는 다른 파일을 만들었습니다.당신은 이 material.module.ts 파일을 app.module.ts 파일에서 호출할 수 있습니다. 작동할 것입니다.내 코드에 'MatIcon Module'을 추가하면 작동합니다.
여기 제 코드가 있습니다.
재료.물.물.물.물.물.
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.vmdk.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 { }
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파일이 컴파일되지 않습니다.오류가 있는 경우 모듈 자체에 오류가 있음을 알리는 대신 이 오류 메시지를 표시합니다.가져오기 또는 코드와 관련된 문제가 있는지 관련 파일을 확인합니다.
저의 경우, 매트 아이콘 모듈을 올바르게 가져왔으나 이상한 이유로 인해 오류가 발생한 구성 요소가 앱 모듈 선언에 포함되지 않았습니다.
@NgModule({
declarations: [
...
TheFileWithMatIconTagComponent,
...
]
모듈을 올바르게 설정하고 가져온 후에도 작동하지 않으면 서버를 끄십시오(Ctrl+C서버를 다시 시작합니다.
실행:
ng add @angular/material
괜찮을 거예요.
언급URL : https://stackoverflow.com/questions/50190337/template-parse-errors-mat-icon-is-not-a-known-element
'programing' 카테고리의 다른 글
| VBA - XMLHTTP 및 WinHttp 요청 속도 (0) | 2023.08.27 |
|---|---|
| @Temporal(TemporalType).날짜)(Oracle 12 포함) (0) | 2023.08.27 |
| php에서 에이잭스를 통해 요청할 때 세션 ID가 변경되는 이유는 무엇입니까? (0) | 2023.08.27 |
| HTML 테이블과 함께 정렬 가능한 jQuery UI 사용 (0) | 2023.08.27 |
| 테이블 내부에만 테두리를 적용하려면 어떻게 해야 합니까? (0) | 2023.08.27 |