Ngx-Bootstrap Popover and Ngx-popover name reference conflict

Question

I'm working in a project that is been working with ngx-popover but it is limited for a specific case.

I want to keep working with both libs but im getting some conflicts because the implementation is so similar.

Module

import { PopoverModule } from "ngx-popover";
import { PopoverModule as PopoverBModule } from "ngx-bootstrap";
    imports: 
    [
       ...,
       PopoverModule,            
       PopoverBModule.forRoot(),          
    ],

HTML ngx-bootstrap:

<ng-template #popTemplate let-message="message">{{ message }}</ng-template>
<button type="button" class="btn btn-primary"
        [popover]="popTemplate" [popoverContext]="context" [outsideClick]="true">
  Open popover with custom context
</button>

HTML ngx-popover:

 <i[popover]="popId"></i>
    <popover-content
       #popId
       placement="above|auto"
       [animation]="true"
       [closeOnClickOutside]="true">
        ....
     </popover-content>

I dont have any compilation error the problem is when I try to perform the ngx-bootstrap popover it is pointing directly to ngx-popover.

ERROR TypeError: Cannot read property 'subscribe' of undefined at Popover.push../node_modules/ngx-popover/Popover.js.Popover.show (Popover.js:114) at Popover.push../node_modules/ngx-popover/Popover.js.Popover.toggle (Popover.js:67) at Popover.push../node_modules/ngx-popover/Popover.js.Popover.showOrHideOnClick (Popover.js:37) at Object.eval [as handleEvent] (VimeoVideoListComponent.html:24) at handleEvent (core.js:19628) at callWithDebugContext (core.js:20722) at Object.debugHandleEvent [as handleEvent] (core.js:20425) at dispatchEvent (core.js:17077) at core.js:17524 at HTMLButtonElement. (platform-browser.js:993)

The question is: There is a way to force the directive [popover] point to ngx-bootstrap but just in this spesific case?

by doing somethinlike [PopoverBModule.popover] it doesnt work LOL

Answer 1

The solution was create a module to import ngxbootstrap and my component, and just import the module instead import the VimeoVideoListComponent in the parent module.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PopoverModule } from "ngx-bootstrap";
import { VimeoVideoListComponent } from './vimeo-video-list.component';
@NgModule({
  declarations: [
    VimeoVideoListComponent
  ],
  exports:[VimeoVideoListComponent],  
  imports: [
    CommonModule,
    PopoverModule.forRoot()    
  ]
})
export class VimeoVideoListModule { }

Thanks @Gilsdav