Ngx-bootstrap: Modal doesn't work (v1.1.1 with RC6)

[BojanKogoj]

I checked all issues, tried so many things, but I can't get modal to work. I'm using 1.1.1 with RC6.

If I just follow the tutorial, I get this:

Error: Template parse errors:
There is no directive with "exportAs" set to "bs-modal" (" type="button" class="btn btn-primary" (click)="smModal.show()">Small modal

]#smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"): SomeComponent@2:13

Of course, I add ModalDirective in NgModule

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

and ModalDirective inside declarations.

That gets rid of that error, but I get the next one:

EXCEPTION: Error in ./SomeComponent class SomeComponent - inline template:2:0 caused by: No provider for ComponentsHelper!

Combination of the following helps:
import { ComponentsHelper } from 'ng2-bootstrap/components/utils/components-helper.service';
Adding ComponentsHelper to providers.

Alright, at this point website launches and works, but when I try to open modal I get this:

EXCEPTION: No component factory found for ModalBackdropComponent

Is it just me or is documentation lacking some required imports? Either way, I can't seem to be able to get over this issue. Any ideas?

[valorkin]

Yeap, I need to create modules for each component, the way it was working before rc.5 seems to be broken

[BojanKogoj]

Any workaround before it's fixed? I'd make PR if I knew how to fix it

[binarious]

Well it's working for me. Why are you importing ModalDirective directly and not ModalModule?

[curlyfro]

i'm getting a similar error:

There is no directive with "exportAs" set to "bs-modal" (" type="button" class="btn btn-primary"

this is my shared module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import
{
    DatepickerModule,
    PaginationModule,
    ModalModule,
    ComponentsHelper
} from 'ng2-bootstrap/ng2-bootstrap';
import { CKEditorModule } from 'ng2-ckeditor';
import { FILE_UPLOAD_DIRECTIVES } from 'ng2-file-upload/ng2-file-upload';

import { SanitizeHtml } from './pipes/sanitize-html.pipe';
import { SearchListInput } from './components/search-list-input';



@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        CKEditorModule,
        PaginationModule,
        DatepickerModule,
        ModalModule
    ],
    declarations: [FILE_UPLOAD_DIRECTIVES, SanitizeHtml, SearchListInput],
    exports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,

        CKEditorModule,
        DatepickerModule,
        PaginationModule,
        ModalModule,
        FILE_UPLOAD_DIRECTIVES,

        SanitizeHtml,
        SearchListInput
    ],
    providers: [ComponentsHelper]
})
export class SharedModule { }

this is my error.page:

import { Component, ViewChild  } from "@angular/core";

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


@Component({
    template: `
<h1>error page</h1>

<div bsModal #errorModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="errorModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Large modal</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>
`
})
export class ErrorPage
{
    @ViewChild('errorModal') errorModal: ModalDirective;

    constructor()
    {
    }
}

do you see anything wrong here?

[BojanKogoj]

@binarious now that I used ModalModule it works, but didn't on RC5 (saw a tutorial that used directives). Anyway, as far as I'm concerned this issue is gone and it works

[maxisam]

It doesn't work on RC6. The same error message. This issue should remain open.

[Martin-Wegner]

@maxisam please post your error message and show us your ngmodule code.

[maxisam]

@Martin-Wegner Sorry, false alarm. I forgot to put this one in imports.