ngx-smart-modal - угловой 6

Question

Я последовал этому примеру StackBlitz , чтобы добавить окно ngx-smart-modal.

Все прошло хорошо, за исключением того, что компонент открывается на странице, а не во всплывающем окне Lightbox.

В этом примере используется Angular 4.

Кто-нибудь успешно использовал этот модуль в Angular 6?

Answer 1

Добавьте стиль ngxSmartModal в свой глобальный style.css (или .scss) как:

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

Answer 2

Измените версию зависимости ngx-smart-modal в файле package.json следующим образом.

"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"  }

Затем переустановите модули npm с помощью команды "npm install"

Answer 3

Для ngx-smart-modal v7.1.0 я просто добавил файл .css или .scss (в моем случае - .scss, так как это расширение по умолчанию, которое я настроил в своем проекте Angular) в раздел стилей вашего angular.json.

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

Answer 4

Попробуйте установить нижнюю версию ngx-smart-modal. например, npm install ngx-smart-modal@2.0.4