how to import modal service in ngx-bootstrap systemjs

I'm tyring to import BsModalService into my component. But it's throwing 404 as shown below.

I'm importing BsModalService in my component as

import { BsModalService } from 'ngx-bootstrap/modal';

GET http://localhost:8000/node_modules/ngx-bootstrap/modal.js 404 (Not Found) (index):21 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:8000/node_modules/ngx-bootstrap/modal.js

export class MyComponent implements OnInit {
    ...
    constructor(private bsModalService: BsModalService) {}
}

package.json

"ngx-bootstrap": "^1.8.0",

systemjs.config.js

map: {
     ...
    'ngx-bootstrap': 'node_modules/ngx-bootstrap'
}

packages: {
    ..
    'ngx-bootstrap': { format: 'cjs', main: 'bundles/ngx-bootstrap.umd.js', defaultExtension: 'js' },
}

app.module.ts

import { ModalModule } from 'ngx-bootstrap';

what am I missing here.