Ngx-bootstrap: EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'parentInjector' of undefined

Created on 24 Jun 2016 · 10Comments · Source: valor-software/ngx-bootstrap

Don't forget to add hack to your application root component (why?)

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

@Component({selector:'app-root'})
class AppRoot {
public constructor(viewContainerRef:ViewContainerRef) {
// You need this small hack in order to catch application root view container ref
this.viewContainerRef = viewContainerRef;
}
}

what is mean ?
app-root and AppRoot

Source

rubinus

Most helpful comment

Basically the modal needs access to the AppRoot so it can do the fancy fading/overlay. To achieve this you need to create an viewContainerRef class member in you AppRoot component:

export class AppComponent implements OnInit {

  viewContainerRef: ViewContainerRef;

  constructor(viewContainerRef:ViewContainerRef) {
    this.viewContainerRef = viewContainerRef;
  }

moloch-- on 7 Jul 2016

👍4

All 10 comments

ng2-bootstrap doc is too low
i can't undersdan

rubinus on 24 Jun 2016

error TS2339: Property 'viewContainerRef' does not exist on type 'AppRoot'.

rubinus on 24 Jun 2016

do you provide complete example

rubinus on 24 Jun 2016

👍1

Basically the modal needs access to the AppRoot so it can do the fancy fading/overlay. To achieve this you need to create an viewContainerRef class member in you AppRoot component:

export class AppComponent implements OnInit {

  viewContainerRef: ViewContainerRef;

  constructor(viewContainerRef:ViewContainerRef) {
    this.viewContainerRef = viewContainerRef;
  }

moloch-- on 7 Jul 2016

👍4

@moloch-- thanks for help, that's correct

valorkin on 14 Jul 2016

worked for me! I was adding the ViewcontainerRef hack to the component instead of the root app.
leaving the comment just in case someone else commit the same mistake than me.