Angular2 No provider for Renderer! (NgModel -> Token NgValueAccessor -> DefaultValueAccessor -> Renderer)

Issue

I custom modal of customModal.ts in shlomiassaf/angular2-modal.
Specific, i add a input contain ngModel, it imported FORM_DIRECTIVES and directives.

The issue when run ‘No provider for Renderer! (NgModel -> Token NgValueAccessor -> DefaultValueAccessor -> Renderer)’

Please help me resovle this issue.
Thanks.

Solution

I see two possibilities:

• The corresponding provider isn’t specified at the component or application level. I don’t think that the problem because I already inject a Renderer without having specified it in its providers attribute or within the second parameter of the bootstrap function.

  Something like that:

    import {Component,Renderer,ElementRef} from 'angular2/core';

    @Component({
      selector: 'child',
      template: '<div></div>',
    })
    export class ChildComponent {
      constructor(private _renderer: Renderer,
               private el: ElementRef) {
        (...)
      }
    }

• I think it would be rather because the class where the renderer is injected isn’t decorated so dependency injection can’t apply. As emphasized in this comment, you need to have this to be able to inject. Injectable isn’t for be injected into something but for injecting into itself.

Edit

After having a look at your code, it seems that you need to add the renderer to the list of providers you provide to the loadNextToLocation method. You could update the code of the DialogService#open method like this:

var otherResolved = Injector.resolve([
  provide(DialogRef, { useValue: dialogRef})
  provide(Renderer, { useValue: this.renderer})
]);

Hope it helps you,
Thierry

Answered By – Thierry Templier

Answer Checked By – Cary Denson (AngularFixing Admin)