ngx-smart-modal - Angular 6

问题

I followed this StackBlitz example to add te ngx-smart-modal window.

Everything went well, except the component opens on the page instead of in a Lightbox modal pop-up.

This example is using Angular 4.

Has anybody used this module in Angular 6 successfully?

回答1:

For ngx-smart-modal v7.1.0, I simply added the .css or .scss (.scss in my case since that is the default file extension I have setup in my Angular project) file to the styles section of your angular.json.

"styles": [
  ...
  "node_modules/ngx-smart-modal/ngx-smart-modal.scss",
  ...
]

回答2:

Add ngxSmartModal's style in your global style.css (or .scss) as :

@import "~ngx-smart-modal/ngx-smart-modal";

回答3:

Try to install the lower version of 'ngx-smart-modal'. e.g npm install ngx-smart-modal@2.0.4

回答4:

Change the ngx-smart-modal dependency version in package.json file like this.

"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"ngx-smart-modal": "2.0.4",
"rxjs": "~6.2.0",
"web-animations-js": "2.3.1",
"zone.js": "~0.8.26"  }

Then reinstall the npm modules by using command "npm install"

来源：https://stackoverflow.com/questions/52086099/ngx-smart-modal-angular-6