각도2 재료 'md-icon'은 알려진 요소가 아님

각도2 재료 'md-icon'은 알려진 요소가 아님

나는 @angular2-material 2.0.0-alpha.8-2 버전을 사용하는 각도2 어플리케이션을 가지고 있다.모든 것이 잘 된다.이제 재료 버전을 최신 버전인 2.0.0-알파.9-3으로 업그레이드하기로 결정했다.GETT_STARTED에 언급된 단계를 따랐다.이전에 나는 아래와 같이 개별 모듈을 수입했었다.

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdCheckboxModule,

    ....
    ....  

그러나 2.0.0-알파.9-3 버전의 변경 로그에는 다음과 같이 적혀 있다.

"사각형 재료가 @angular2-재료에서 바뀌었어/...@angular/material 아래의 단일 패키지로 패키지. 이러한 변화와 함께 모든 구성 요소를 포함하는 새로운 NgModule, MaterialModule이 있다."

그래서 나는 명시적으로 수입한 재료 모듈을 제거하고 다음과 같이 바꾸었다.

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MaterialModule.forRoot(),
    ....
    ....

이 변경 후 다음 오류가 표시됨

'md-icon'은 알려진 요소가 아님:

1. 'md-icon'이 각도 구성 요소인 경우 이 모듈의 일부인지 확인하십시오.
2. 'md-icon'이 웹 구성 요소인 경우 이 구성 요소의 '@NgModule.Schemas'에 "CUSTOM_Elements_SCHEMA"를 추가하여 이 메시지를 표시하지 마십시오.

개별 모듈을 명시적으로 가져와야 하는가 아니면 변경 로그에 언급된 대로 MaterialModule은 모든 구성 요소를 포함하며 개별 모듈을 명시적으로 가져와서는 안 되는가?개별 모듈을 가져오지 않으면 오류가 발생할 수 있는 원인은?

무엇이 말이야.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>

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 { }

다음과 같이 하위 모듈을 로드하는 경우:

{path: 'childModule', loadChildren: 'app/child/child.module#childModule'}

그런 다음 하위 모듈에서 MaterialModule을 다시 가져와야 한다(예:

@NgModule({
    imports: [
        sharedModules,
        childRouting,
        MaterialModule.forRoot()
    ],
    declarations: [
    ],
    providers: []
})
export class childModule {
}

추가하다

<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>

매트-아이콘을 사용하는 두 가지 단계:

1. 이 파일을 index.properties 파일에 삽입하십시오.

   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
      rel="stylesheet">
   

2. 이 줄을 app.properts.ts 파일에 삽입하십시오.게으른 로딩을 수행하는 경우 해당 모듈 또는 sharedModule에 포함하십시오.

   import { MatIconModule } from '@angular/material/icon';
   

해결책은 md-icon, md-input 등 모듈 및 스타일시트 추가.

또한 app.module.ts에서 아래와 같이 CUSTOME_Elements_SCHEMA를 추가해야 한다.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

그 다음에 덧붙이다

providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]

이를 index.html에 추가:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

app.properts.ts 파일에 다음을 추가하십시오.

import {
  MatIconModule
} from '@angular/material';

imports: [MatIconModule]

참조URL: https://stackoverflow.com/questions/40291225/angular2-material-md-icon-is-not-a-known-element