Using Modal inside a service

[AsmaGargouri]

Hello, I am new in Angular 2 and I am trying to open modal from a service. But I am getting this error and I don't find a clear way to do it. In fact, I couldn't say if I am doing something wrong or missing something or It just can't be done.

Here's the error I got : EXCEPTION: No provider for ViewContainerRef!

And Here's the way I am doing :
Service:

import { ViewContainerRef } from '@angular/core';
import { Overlay } from 'angular2-modal';
import { Modal } from 'angular2-modal/plugins/bootstrap';
import { ViewEncapsulation } from '@angular/core';
import { overlayConfigFactory } from 'angular2-modal';
import { BSModalContext } from 'angular2-modal/plugins/bootstrap';
import { MyModalContext, MyModal } from '../shared/my-modal';

@Injectable()

export class myService {
 constructor (overlay: Overlay, vcRef: ViewContainerRef, public modal: Modal) {
    overlay.defaultViewContainer = vcRef;
}

  test() {
    return this.modal.open(MyModal,  overlayConfigFactory({
      dialogClass: 'my-modal',
    }, BSModalContext));
  }

Modal :

import { Component } from '@angular/core';

import { DialogRef, ModalComponent, CloseGuard } from 'angular2-modal';
import { BSModalContext } from 'angular2-modal/plugins/bootstrap';

export class MyModalContext extends BSModalContext {
  /*Context init varuiables for example*/
}

@Component({
  selector: 'my-modal',
  styleUrls: ['...'],
    template: `
    <div>
        Test
        <!-- bla bla bla -->
    </div>

        `
})
export class MyModal implements CloseGuard, ModalComponent<MyModalContext> {
  context: ErrorModalContext;

  constructor(public dialog: DialogRef<MyModalContext>) {
    this.context = dialog.context;
  }

  onCloseDialog() {
    this.dialog.close();
  }

}

Can you help me having a solution to this issue? Thank you.

[Feasoron]

I'm trying to do the same thing, and I'm stuck just a little further down the line. You need to provide the ViewContianerRef down from app.module. I found this example elsewhere:

const MODAL_PROVIDERS = [
    Modal,
    Overlay,
    { provide: OverlayRenderer, useClass: DOMOverlayRenderer },
    ViewContainerRef
];

@NgModule({
    imports: [
       ....
        ModalModule.forRoot(),
        BootstrapModalModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
       MODAL_PROVIDERS
    ],
    bootstrap: [AppComponent]

Unfortunately, this doesn't totall work. Now I am just getting the error:

Uncaught (in promise): TypeError: inj.get is not a function

Which I haven't got past yet.

[Feasoron]

Well, I did get past that (I'll keep commenting in hopes that one of us gets this all ironed out and helps the other). I wasn't including the modal module properly. That moved me to an issue where is complained there was no provider for DialogRef. No problem, back to the app.module to add it. Add the import, add the provider. Now we see:

Error: (SystemJS) Can't resolve all parameters for DialogRef:

Which may be SystemJs or this. Or me. Who knows? Not me.

[Feasoron]

Stripped down the modal class to

export class MyModal  {
    constructor(
                overlay: Overlay,
                vcRef: ViewContainerRef,
                private modal: Modal){
                overlay.defaultViewContainer = vcRef;
    };

    onCloseDialog() {
    }

And now it works. Still needs work to be done/useable, but I hope this is enough to get you going!

[AsmaGargouri]

Thank yo very much !