Ngx-bootstrap: ModalDirective not exported

[fridolin-koch]

ModalDirective is no longer exported from ng2-bootstrap/ng2-bootstrap (I guess it was this commit: https://github.com/valor-software/ng2-bootstrap/commit/6993e979fa2f2fbb145d2b03792c12e0122621da)

This leads leads to errors when using @ViewChild.

dist/tmp/app/shared/dialog/confirm/confirm-dialog.component.ts(7,10): error TS2305: Module '"/path/node_modules/ng2-bootstrap/ng2-bootstrap"' has no exported member 'ModalDirective'.

import {
  Component,
  ViewChild,
  Output,
  EventEmitter
} from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap/components/index';

@Component({
  moduleId: module.id,
  templateUrl: 'confirm-dialog.component.html',
  selector: 'confirm-dialog'
})
export class ConfirmDialogComponent {

  @ViewChild('childModal') childModal: ModalDirective;
  // ...
}

Ugly workaround is to use it directly:

import { ModalDirective } from 'ng2-bootstrap/components/modal/modal.component';

[Martin-Wegner]

ModalDirective is declared and exported in the ModalModule. You should import the ModalModule in your ngModule file and not the component directly!

The ng2-bootstrap.ts exports the ModalModule so it should be OK to import ng2-bootstrap/ng2-bootstrap in your ngModule file.

If you really have to import the ModalDirective then I would import ng2-bootstrap/components/modal/modal.component.

[fridolin-koch]

Well this is not sufficient, to be able to utilize the power of typescript at least declaration files are necessary for using the API. Basically the same way Angular does it

The documentations also states it like this: http://valor-software.com/ng2-bootstrap/#/modals

Otherwise you would have to use somthing like:

@ViewChild('childModal') childModal: any;

But this makes using Typescript pointless...

[valorkin]

my bad, 1.1.7 published with fix

[valorkin]

@IonChiriac clean install and clean build please
and check that you have added modal module to your app module

[IonChiriac]

@valorkin thank you!

[goleary]

Hmm I am getting issue when I try to use either of these imports:

import { ModalDirective } from 'ng2-bootstrap/components/modal/modal';
import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap';

and must instead use:

import { ModalDirective } from 'ng2-bootstrap/components/modal/modal.component';

or rollup breaks telling me that: ng2-bootstrap\ng2-bootstrap.js does not export ModalDirective

I'm using version 1.1.16 with angular 2.0.2 and AOT compilation + Rollup

[quiringk]

@goleary @valorkin

I just ran into this. In order to use @ViewChild in my components with ng2-bootstrap, previously I would write

import { ModalDirective } from 'ng2-bootstrap';
with
@ViewChild('phoneModal') public phoneModalElementRef: ModalDirective;

I just updated to Angular 2.4.2 from 2.2.3 and started receiving this error during AOT compilation:

'ModalDirective' is not exported by node_modules\ng2-bootstrap\index.js

I had to modify my import like so in order to continue using the @ViewChild without the error:

import { ModalDirective } from 'ng2-bootstrap/modal/modal.component';

[quiringk]

Actually, the fix I just mentioned works for AOT. For JIT I have to back to

import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap'

Am going to create a new issue

[valorkin]

It's crazy, bootstrap version?

[quiringk]

Latest version 1.1.16-11