There is no directive with "exportAs" set to "bs-modal" error

[TheBurgerShot]

Hi all,

I've just installed this plug-in, added the 'hack' in the app.component.ts as described. Imported the ModalModule from 'ng2-bootstrap/ng2-bootstrap' (also tried 'ng2-bootstrap/components/modal').

Now I am trying to setup an modal like described in the installation notes:
http://valor-software.com/ng2-bootstrap/index-bs4.html#/modals#markup
(just copy pasted one)

But then i get this error:

Unhandled Promise rejection: Template parse errors:
There is no directive with "exportAs" set to "bs-modal" ("tn btn-primary" (click)="staticModal.show()">Static modal</button>

<div class="modal fade" bsModal [ERROR ->]#staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelle"): LoginComponent@2:32
Can't bind to 'config' since it isn't a known property of 'div'. (""staticModal.show()">Static modal</button>

<div class="modal fade" bsModal #staticModal="bs-modal" [ERROR ->][config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" "): LoginComponent@2:56 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
There is no directive with "exportAs" set to "bs-modal" ("tn btn-primary" (click)="staticModal.show()">Static modal</button>

<div class="modal fade" bsModal [ERROR ->]#staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelle"): LoginComponent@2:32
Can't bind to 'config' since it isn't a known property of 'div'. (""staticModal.show()">Static modal</button>

<div class="modal fade" bsModal #staticModal="bs-modal" [ERROR ->][config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" "): LoginComponent@2:56
    at TemplateParser.parse (http://localhost:4200/main.bundle.js:19051:19)
    at RuntimeCompiler._compileTemplate (http://localhost:4200/main.bundle.js:41941:51)
    at http://localhost:4200/main.bundle.js:41864:83
    at Set.forEach (native)
    at compile (http://localhost:4200/main.bundle.js:41864:47)
    at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:101243:28)
    at Zone.run (http://localhost:4200/main.bundle.js:101136:43)
    at http://localhost:4200/main.bundle.js:101502:57
    at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:101276:37)
    at Zone.runTask (http://localhost:4200/main.bundle.js:101176:47)

I am using
angular 2.0.1
ng2-bootstrap 1.1.8

Am I doing something wrong, or is this a bug? Help is much appreciated :)

[Martin-Luft]

Sounds like #1027 ?

[TheBurgerShot]

@Martin-Wegner Ah, I've already seen other posts regarding the 'exportAs' error but not that one. I did import de ModalModule into the app.module.ts, but not in the childModule.

Thank you for the reference

[jatin-optimus]

My Modal is working fine but o running test cases it is not able to create the modal

Look at modal:

[ruimserrano]

have the exactly same thins as @jatin-optimus ...

[ruimserrano]

I fixed mine, on tests you have to import the module as well

...
import  * as ng2Bootstrap from 'ng2-bootstrap/ng2-bootstrap';
...
describe('Home Component', () => {
  const html = '<my-home></my-home>';

  beforeEach(() => {
    TestBed.configureTestingModule(
      {
        declarations: [HomeComponent, TestComponent],
        imports: [ ng2Bootstrap.Ng2BootstrapModule ]
    });
    TestBed.overrideComponent(TestComponent, { set: { template: html }});
  });

[sarancruzer]

it's working fine

#1903