Error using modal in MDB Angular

Topic: Error using modal in MDB Angular

bjorg@promineo.no pro asked 6 years ago

I'm trying to use the fluid modal in my project but get following error: There is no directive with "exportAs" set to "mdb-modal" The source is taken directly from your example:

<button type="button" class="btn btn-primary waves-light" data-toggle="modal" data-target="#basicExample" (click)="fluid.show()" mdbRippleRadius>
    Right
</button>

<div mdbModal #fluid="mdb-modal" class="modal fade right" id="fullHeightModalRight" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <divclass="modal-dialog modal-full-height modal-right"role="document"> <divclass="modal-content"> <divclass="modal-header"> <h4class="modal-title w-100"id="myModalLabel">Modal title</h4> <buttontype="button"class="close"data-dismiss="modal"aria-label="Close" (click)="fluid.hide()"> <spanaria-hidden="true">×</span> </button> </div> <divclass="modal-body"> </div> </div> </div> </div>

Dawid Adach pro commented 6 years ago

Dear Bjorg, I cannot reproduce the issue, could you please share your project with us ?

Add comment

DanielNetzer free answered 6 years ago

0 0 Best answer

I'm getting the same error, the code I used is copy pasted from the doc's. the basic example.

Dawid Adach pro commented 6 years ago

Could you please mail us your project including package.json so we could verify what are the version of environment you use?

DanielNetzer free commented 6 years ago

I cant send the entire project, but I can add here my package.json.

DanielNetzer free commented 6 years ago

{ "name": "cupo.io", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^5.0.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/router": "^5.0.0", "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.8", "@ngrx/effects": "4.1.1", "@ngrx/entity": "4.1.1", "@ngrx/router-store": "4.1.1", "@ngrx/store": "4.1.1", "@ngrx/store-devtools": "4.1.1", "angular2-uuid": "1.1.1", "chart.js": "^2.5.0", "core-js": "^2.4.1", "crypto-js": "^3.1.9-1", "easy-pie-chart": "^2.1.7", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "ng-mdb-pro": "git+https://oauth2:7Eov9smPQo5CZG3txKvo@git.mdbootstrap.com/mdb/angular/ng-pro.git", "ng2-device-detector": "^1.0.0", "ngrx-store-freeze": "^0.2.0", "ngrx-store-localstorage": "^0.3.0", "rxjs": "^5.5.2", "screenfull": "^3.3.0", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.6.0", "@angular/compiler-cli": "^5.0.0", "@angular/language-service": "^5.0.0", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "~2.4.2" } }

{
  "name": "cupo.io",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.8",
    "@ngrx/effects": "4.1.1",
    "@ngrx/entity": "4.1.1",
    "@ngrx/router-store": "4.1.1",
    "@ngrx/store": "4.1.1",
    "@ngrx/store-devtools": "4.1.1",
    "angular2-uuid": "1.1.1",
    "chart.js": "^2.5.0",
    "core-js": "^2.4.1",
    "crypto-js": "^3.1.9-1",
    "easy-pie-chart": "^2.1.7",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "ng-mdb-pro": "git+https://oauth2:7Eov9smPQo5CZG3txKvo@git.mdbootstrap.com/mdb/angular/ng-pro.git",
    "ng2-device-detector": "^1.0.0",
    "ngrx-store-freeze": "^0.2.0",
    "ngrx-store-localstorage": "^0.3.0",
    "rxjs": "^5.5.2",
    "screenfull": "^3.3.0",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.6.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

Please insert min. 15 characters.

DanielNetzer free commented 6 years ago

I managed to fix it though, I had to import the Module into other sub modules in order for it to work. e.g. import { MDBBootstrapModules } from 'ng-mdb-pro'; // Components import { FormButtonComponent } from './components/dynamic-button/dynamic-button.component'; import { FormInputComponent } from './components/dynamic-input/dynamic-input.component'; import { FormSelectComponent } from './components/dynamic-select/dynamic-select.component'; import { FormCheckboxComponent } from './components/dynamic-checkbox/dynamic-checkbox.component'; import { FormRadioComponent } from './components/dynamic-radio/dynamic-radio.component'; import { DynamicFieldDirective } from './components/dynamic-field/dynamic-field.component'; @NgModule({ imports: [ CommonModule, ReactiveFormsModule, FormsModule, MDBBootstrapModules ],

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

bjorg@promineo.no

Pro User 0Support score
1Questions 0Answers 0Snippets