Ng-bootstrap: NgbModal Invisible

[Palacios95]

I am experiencing some difficulties with the Ngbmodal. On everything before and until alpha 17 my Ngbmodal is working fine. Now, when I try to open my modal component the HTML markup is in the page source but it is not visible.

Have there been any issues regarding this?
I will try to work on a Plunkr that can replicate this.

ng-bootstrap: 1.0.0-alpha.20
Angular 2: 2.4.6
Bootstrap: 4.0.0-alpha.5

[pkozlowski-opensource]

You need to migrate to bootstrap alpha.6 css as indicated in the changelog. There are no other known issues so if you are facing further problems please attatch a plunker as requested in the issue template.

[epitka]

I've followed all instructions in ng-bootstrap for modal, and modal does not show. When I look at css I am missing fade.show while your demo has it.

.fade.show {
opacity: 1;
}

Here is my package.json

{
  "name": "vinwebapp",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "devDependencies": {
    "@angular/animations": "5.2.4",
    "@angular/common": "5.2.4",
    "@angular/compiler": "5.2.4",
    "@angular/compiler-cli": "5.2.4",
    "@angular/core": "5.2.4",
    "@angular/forms": "5.2.4",
    "@angular/http": "5.2.4",
    "@angular/platform-browser": "5.2.4",
    "@angular/platform-browser-dynamic": "5.2.4",
    "@angular/platform-server": "5.2.4",
    "@angular/router": "5.2.4",
    "@ngtools/webpack": "^1.9.8",
    "@types/chai": "4.1.2",
    "@types/jasmine": "2.8.6",
    "@types/webpack-env": "1.13.5",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.4.1",
    "bootstrap": "^4.0.0",
    "chai": "4.1.2",
    "css": "2.2.1",
    "css-loader": "0.28.9",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.12",
    "expose-loader": "0.7.4",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-loader": "0.5.5",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "2.99.1",
    "json-loader": "0.5.7",
    "karma": "2.0.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.1",
    "karma-webpack": "2.0.9",
    "preboot": "6.0.0-beta.1",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.12",
    "rxjs": "5.5.6",
    "style-loader": "0.20.1",
    "to-string-loader": "1.1.5",
    "typescript": "2.7.1",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-hot-middleware": "2.21.0",
    "webpack-merge": "4.1.1",
    "zone.js": "0.8.20"
  },
    "dependencies": {
        "@ng-bootstrap/ng-bootstrap": "^1.0.0",
        "angular-font-awesome": "^3.1.2",
        "font-awesome": "^4.7.0"
    }
}

[dziugasmeskauskas]

@epitka I think you do not have bootstrap 4 properly included. The missing class is a part of bootstrap 4. Check out the source code