siva siva - 2 months ago 46
TypeScript Question

Angular2 -material2: Getting an error from console when using md-icon

Throwing error "ORIGINAL EXCEPTION: No provider for MdIconRegistry!" when I'm using md-icon. Below is the 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 {}


Error:
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)


Can anyone please help me what i'm doing wrong here?

Answer

Update for the 2.0.0 release using material alpha 8-4:

You need to include MdIconRegistry as a provider in your app.modules.ts file. Here is a functional example:

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

Don't forget to install hammerjs + typings and add import 'hammerjs'; to your main.ts file if you want to use the md-slide-toggle, and md-slider modules.