Ermitteln eines Fehlers von der Konsole bei Verwendung von mdIcon

Question

Angular gibt einen Fehler aus, wenn ich mdIcon verwende. Unten ist der Code:

import {Component} from '@angular/core'; 
import {MdIcon} from '@angular2-material/icon'; 
@Component({ 
    selector: 'my-app', 
    template: ` 
    <md-toolbar> 
     <md-icon class="demo-toolbar-icon">menu</md-icon> 
     <span>Default Toolbar</span> 

     <span class="demo-fill-remaining"></span> 

     <md-icon>code</md-icon> 
    </md-toolbar>`, 
    directives: [MdIcon,MdToolbar], 

}) 
export class AppComponent {} 

Fehler:

ORIGINAL EXCEPTION: No provider for MdIconRegistry! Error: DI Exception at NoProviderError.BaseException [as constructor] (exceptions.ts:14) at NoProviderError.AbstractProviderError [as constructor] (reflective_exceptions.ts:53) at new NoProviderError (reflective_exceptions.ts:85) at ReflectiveInjector_._throwOrNull (reflective_injector.ts:844) at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:873) at ReflectiveInjector_._getByKey (reflective_injector.ts:835) at ReflectiveInjector_.get (reflective_injector.ts:632) at ElementInjector.get (element_injector.ts:19) at DebugAppView._View_AppComponent0.createInternal (AppComponent.template.js:141) at DebugAppView.AppView.create (view.ts:110)

Kann mir jemand bitte helfen Sie, was ich falsch hier tue?

Answer 1

Update für das Release 2.0.0 Material alpha unter Verwendung von 8-4:

Sie benötigen MdIconRegistry als Anbieter in Ihrer app.modules.ts Datei aufzunehmen. Hier ist ein Funktionsbeispiel:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { MdButtonModule } from '@angular2-material/button'; 
import { MdButtonToggleModule } from '@angular2-material/button-toggle'; 
import { MdCardModule } from '@angular2-material/card'; 
import { MdCheckboxModule } from '@angular2-material/checkbox'; 
import { MdGridListModule } from '@angular2-material/grid-list'; 
import { MdIconModule, MdIconRegistry } from '@angular2-material/icon'; 
import { MdInputModule } from '@angular2-material/input'; 
import { MdListModule } from '@angular2-material/list'; 
import { MdMenuModule } from '@angular2-material/menu'; 
import { MdProgressBarModule } from '@angular2-material/progress-bar'; 
import { MdProgressCircleModule } from '@angular2-material/progress-circle'; 
import { MdRadioModule } from '@angular2-material/radio'; 
import { MdSidenavModule } from '@angular2-material/sidenav'; 
import { MdSliderModule } from '@angular2-material/slider'; 
import { MdSlideToggleModule } from '@angular2-material/slide-toggle'; 
import { MdTabsModule } from '@angular2-material/tabs'; 
import { MdToolbarModule } from '@angular2-material/toolbar'; 
import { MdTooltipModule } from '@angular2-material/tooltip'; 

import { AppComponent } from './app.component'; 


@NgModule({ 
    declarations: [ 
     AppComponent 
    ], 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 

     MdButtonModule, 
     MdButtonToggleModule, 
     MdCardModule, 
     MdCheckboxModule, 
     MdGridListModule, 
     MdIconModule, 
     MdInputModule, 
     MdListModule, 
     MdMenuModule, 
     MdProgressBarModule, 
     MdProgressCircleModule, 
     MdRadioModule, 
     MdSidenavModule, 
     MdSliderModule, 
     MdSlideToggleModule, 
     MdTabsModule, 
     MdToolbarModule, 
     MdTooltipModule 
    ], 
    providers: [ 
     MdIconRegistry 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Vergessen Sie nicht hammerjs + Typisierungen und fügen import 'hammerjs'; auf Ihre main.ts-Datei, wenn Sie möchten, verwenden Sie die md-slide-Toggle, und md-Slider-Module zu installieren.

Answer 2

Sie müssen es in providers oder viewProviders aufzulisten und einige Symbole oder Iconsets

import {Component, ViewEncapsulation} from '@angular/core'; 
import {MdIcon} from '@angular2-material/icon'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <md-toolbar> 
     <md-icon class="demo-toolbar-icon">menu</md-icon> 
     <span>Default Toolbar</span> 

     <span class="demo-fill-remaining"></span> 

     <md-icon>code</md-icon> 
    </md-toolbar>`, 
    directives: [MdIcon,MdToolbar], 
    viewProviders: [MdIconRegistry], 
}) 
export class AppComponent { 
    constructor(mdIconRegistry: MdIconRegistry) { 
     mdIconRegistry 
      .addSvgIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg') 
      .addSvgIconSetInNamespace('core', '/demo-app/icon/assets/core-icon-set.svg') 
      .registerFontClassAlias('fontawesome', 'fa'); 
    } 
} 

Answer 3

Import Http registrieren. Besuche https://groups.google.com/forum/#!topic/angular-material2/ZEHFELl2-Sw

import {HTTP_PROVIDERS} from '@angular/http'; 
import {MdIcon, MdIconRegistry} from '@angular2-material/icon'; 
@Component({ 
    template: 
     <md-toolbar> 
     <md-icon class="demo-toolbar-icon">menu</md-icon> 
     <span>Default Toolbar</span> 
     <span class="demo-fill-remaining"></span> 
     <md-icon>code</md-icon> 
    </md-toolbar>`, 
    directives:[MdIcon], 
    providers: [HTTP_PROVIDERS, MdIconRegistry] 
}) 

Answer 4

Für Standard-Icons Sie müssen nur die Schriftart in Ihrem HTML setzen (die einfachste Lösung nur CDN für die Schriftart zu verwenden): <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Die anderen Möglichkeiten in docs beschrieben werden: http://google.github.io/material-design-icons/#icon-font-for-the-web

Außerdem müssen Sie (wie bei jedem anderen Materialpaket) das Materialmodul in die NgModule-Konfiguration importieren.

Answer 5

sollten Sie in der Lage sein, nur um die MaterialRootModule in Ihrem app.module.ts zu importieren:

import { MaterialModule } from '@angular/material'; 
@NgModule({ 
    imports: [ 
    MaterialModule.forRoot(), 
    ], 
})