Error using modal in MDB Angular

bjorg@promineo.no asked 11 months 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 commented 11 months ago

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


DanielNetzer answered 10 months ago

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


Dawid Adach commented 10 months ago

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


DanielNetzer commented 10 months ago

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


DanielNetzer commented 10 months 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"
}
}


DanielNetzer commented 10 months 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. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No