No provider for Overlay

[bertvh]

Sorry, can't reproduce on plunkr.

I'm trying to upgrade from rc.4 to rc.5 and modal 1.0.8 to 2.0.0-beta.11. I'm slowly getting somewhere but now stuck on "No provider for Overlay!". My code is almost exactly like https://github.com/shlomiassaf/angular2-modal/blob/master/QUICKTHROUGH.md

I suppose that provider should come with ModalModule? Or am I missing something?

Thanks.

[shlomiassaf]

When you set the ModalModule in your imports do you ModalModule.forRoot()?

[bertvh]

I do. Here is an edited version of my module. The only thing I've changed is the import: added 'index', otherwise a download fails.

import { ModalModule } from 'angular2-modal';
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap/index';

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    HttpModule,
    ModalModule.forRoot(),
    BootstrapModalModule,
    ToasterModule],
  declarations: [ BtwAppComponent ],
  bootstrap:    [ BtwAppComponent ]
})
export class BtwAppModule { }

[bertvh]

Did a quick debug.

• The file that gets loaded is angular2-modal.umd.js - seems fine to me
• I can break in ModalModule.forRoot - seems fine as well

[shlomiassaf]

@bertvh That's strange...
The provider exists, source

I assume BtwAppModule is the root module right?

Something must be wrong in the setup, I can't reproduce it

[orange4glace]

stuck on same but slightly different problem.

ORIGINAL EXCEPTION: No provider for Renderer!
(modal: Modal constructor parameter)

using webpack 2.1.0

[orange4glace]

To reproduce :
install angular2-modal beta11 based on
https://github.com/AngularClass/angular2-seed

main.browser.ts

imports: [...
ModalModule.forRoot(),
    Vex[Bootstrap]ModalModule,
...]

app.ts

import { Component, OnInit, Renderer, ViewContainerRef, ViewEncapsulation, ViewChild, TemplateRef } from '@angular/core';
import { AppStore } from './app-store';
import { Overlay } from 'angular2-modal';

import { Modal } from 'angular2-modal/plugins/vex/index';

@Component({})
export class App {
  constructor(public appStore: AppStore,
    private modal: Modal) {
    console.log('Hello Angular 2 Webpack 2');
  }
}

btw, beta10 works well.

[shlomiassaf]

OK, I think it might narrow down to SystemJS projects...

[orange4glace]

thanks for your nice project :)

[shlomiassaf]

In beta11 I'v added the Renderer as a dependency for the Modal class in the plugins.

But it's strange, working in the demo app not working in others? This is a core type in the DI

[CaselIT]

Same error in beta 11, beta 10 works fine. I'm using systemjs

[troyanskiy]

ORIGINAL EXCEPTION: No provider for Renderer!
Error in beta 11, beta 10 works fine. I'm using systemjs

[andyrue]

I'm getting the No provider for Renderer! error as well. Using [email protected] with angular2-modal 2.0.0-beta.11. I don't get that error with 2.0.0-beta.10

[shlomiassaf]

Ok I see
I'll investigate

Sent from my iPhone

On Aug 31, 2016, at 6:52 PM, Andrew [email protected] wrote:

I'm getting the No provider for Renderer! error as well. Using [email protected] with angular2-modal 2.0.0-beta.11. I don't get that error with 2.0.0-beta.10

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[bertvh]

I fixed my original problem (No provider for Overlay) by changing

import {Overlay} from 'angular2-modal/index';

to

import {Overlay} from 'angular2-modal';

Allow me to share my feelings towards the current state of client-side development and angular2 in particular: . Apologies, just needed to ventilate 😉 .

I hope this helps with the other problems here. I'm currently runnen modal beta.10 but I don't think 11 will break this (can try if you want). If I can help by testing something against my setup, just ask.

[CaselIT]

@shlomiassaf Since the original issue has been solved, do you prefer if I (or some other participant) opened a new one for the beta 11 No provider for Renderer! issue?

[orange4glace]

I think Provider issue needs more time to be fixed since it seems to be the problem of angular2 or webpack its own bug. maybe it should be reported to the angular team

[shlomiassaf]

@orange4glace not sure, I think it some change I'v made. It doesn't happen on my setup so I will have to start fresh.

@CaselIT, Yes sure.

[CaselIT]

Opened new issue for the Redenrer #175

[shlomiassaf]

Update: issue is not webpack or angular related.
It's related to NgModule and how it works.

Basically, Renderer is not available at bootstrap, since Modal requires Renderer and the providers are set in that stage once Modal is needed we have an issue.

Meanwhile, to solve this quickly, add BootstrapModalModule.getProviders() (or VEX) to the providers of your app root component.

[shlomiassaf]

OK guys, try beta12 I think it's solved now, please let me know

[paulbakker]

beta12 works again! 💯
Tested with RC6.

[troyanskiy]

Thanks a lot!

[zakdances]

I'm still getting ORIGINAL EXCEPTION: No provider for Modal! with "angular2-modal": "^2.0.0-beta.13".

[WahlbergRu]

In Angular 2.1.0 I have No provider for Overlay

[lykalabrada]

I'm having this No provider for Overlay issue right now with angular2-modal ^2.4.0
tried everything suggested in this thread but still no luck. I just followed the quick through.
where could i've gone wrong?
thanks

edit: it turns out i just had the letter M capitalized in importing angular2-modal

[yershalom]

@lykalabrada What did you change?

[clk0115]

I fix this problem when I added correct imports.

When I was upgrading angular2 and @angular/material, it showed the error.

After I changed
imports: [MaterialModule.forRoot()]
to
imports: [MaterialModule].

Everything is ok now.