I am getting error while integrating bootstrap 4 popover in my angular 2 application

Question

I am using Angular 2 RC 5 version. In my angular 2 application I am using system.config.js in that I have mapped ng2-boostrap package like below

var map={
'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/ng2-bootstrap',
}

and in app module file i am importing it like below

import {PopoverModule   } from 'ng2-bootstrap/ng2-bootstrap';

@NgModule({
  imports: [PopoverModule.forRoot()]
})

Using all of above, still I am getting an error in browser's console as below

Error: (SystemJS) Cannot read property 'forRoot' of undefined TypeError: Cannot read property 'forRoot' of undefined at eval ( http://localhost:3000/assets/app.module.js:259:149 ) at execute ( http://localhost:3000/assets/app.module.js:270:14 ) Error loading http://localhost:3000/assets/main.js

I am referring this link https://valor-software.com/ng2-bootstrap/index-bs4.html#/popover

Answer 1

Not sure about the library you are referring but here are few observations:

• You are using a very old version of Angular - you should update to the latest 2.x or consider 4.x straight away
• If you are willing to explore different approaches here is an excellent library that has all the Bootstrap components, including popover: https://ng-bootstrap.github.io/#/components/popover

The mentioned library is known to work with Angular 2.x and 4.x and is very simple to use:

<button type="button" class="btn btn-secondary" placement="top"
        ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top">
  Popover on top
</button>

You can see it in action in this minimal plunk (it should help you configure SystemJS and other files in your project): http://plnkr.co/edit/pTZpUjpmAe2Pc1jxO2u0?p=preview