कोणीय 2 सामग्री 'एमडी-आइकन' ज्ञात तत्व नहीं है

Question

मेरे पास angular2 एप्लिकेशन है जो @ angular2-material 2.0.0-alpha.8-2 संस्करण का उपयोग कर रहा है। सब कुछ ठीक काम करता है। अब मैंने सामग्री संस्करण को नवीनतम i.e. 2.0.0-alpha.9-3 में अपग्रेड करने का निर्णय लिया है। मैंने GETTING_STARTED में उल्लिखित चरणों का पालन किया। इससे पहले मैं आयात किया था व्यक्ति के रूप में नीचे मॉड्यूल:

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

    MdIconModule, 
    MdButtonModule, 
    MdCardModule, 
    MdCheckboxModule, 

    .... 
    .... 

हालांकि 2.0.0-alpha.9-3 संस्करण का लॉग बदलने का कहना है:

"कोणीय सामग्री @ angular2-सामग्री से बदल गया है/.. @ कोणीय/सामग्री के तहत एक पैकेज में संकुल। इस परिवर्तन के साथ, एक नया NgModule, MaterialModule है, जिसमें सभी घटक शामिल हैं। "

तो मैं स्पष्ट रूप से आयातित हटाया सामग्री मॉड्यूल और इसे करने के लिए बदल दिया है:

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

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

इस परिवर्तन मैं निम्नलिखित हो रही है त्रुटि के बाद

'एमडी आइकन' नहीं एक ज्ञात तत्व है:

1. यदि 'md-icon' एक कोणीय घटक है, तो सत्यापित करें कि यह इस मॉड्यूल का हिस्सा है।
2. यदि 'md-icon' एक वेब घटक है तो इस संदेश को दबाने के लिए इस घटक के '@ NgModule.schemas' में "CUSTOM_ELEMENTS_SCHEMA" जोड़ें।

क्या मुझे अलग-अलग मॉड्यूल को स्पष्ट रूप से आयात करने या परिवर्तन लॉग में उल्लिखित करने की आवश्यकता है सामग्री मॉड्यूल में सभी घटक शामिल हैं और मुझे स्पष्ट रूप से व्यक्तिगत मॉड्यूल आयात नहीं करना चाहिए? अगर मुझे व्यक्तिगत मॉड्यूल आयात नहीं करना चाहिए तो त्रुटि का स्रोत क्या हो सकता है?

Answer 1

export सेक्शन के बारे में क्या? क्या आपने वहां MaterialModule प्रदान किया था? उसके बाद

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

आप अपने विचारों में माउस का उपयोग करने के लिए सक्षम होना चाहिए:

@NgModule({ 
    imports: [ 
    MaterialModule.forRoot() 
    ], 
    exports: [ 
    MaterialModule 
    ] 
}) 

आपका index.html में आइकन शैलियों प्रदान करने के लिए याद रखें

<md-icon>delete</md-icon> 

Answer 2

यदि आप एक बच्चे को लोड इस तरह के मॉड्यूल:

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

बाल मॉड्यूल में, आपको फिर से सामग्री मॉड्यूल आयात करना होगा। उदा।

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

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

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