Topic: Modal Error: \"exportAs\" set to \"mdbModal\"

henrydraymundo pro asked 6 years ago


Error: compiler.js:215 Uncaught Error: Template parse errors: There is no directive with "exportAs" set to "mdbModal" (" <div mdbModal [ERROR ->]#basicModal="mdbModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" "): ng:///SharedModule/ModalProgramaComponent.html@4:14 at syntaxError (compiler.js:215) at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696) at compiler.js:22639 at Set.forEach (<anonymous>) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639) at compiler.js:22549 at Object.then (compiler.js:206) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548) Code:
<div mdbModal #basicModal="mdbModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title" id="exampleModalLongTitle">

                    <strong *ngIf="accion === 'add'">Agregar</strong>

                    <strong *ngIf="accion !== 'add'">Actualizar</strong> registro

                </h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="basicModal.hide()">

                    <span aria-hidden="true">×</span>

                </button>

            </div>

            <div class="modal-body">
<!-- Body -->
</div>

<divclass="modal-footer">

<button*ngIf="!loading"type="button"class="btn btn-success"(click)="guardar()">Guardar</button>

<button*ngIf="loading"disabledclass="btn btn-success"><iclass="fa fa-spinner fa-spin"></i> Guardando... </button>

<buttontype="button"class="btn btn-danger"(click)="basicModal.hide()">Cancelar</button>

</div>

</div>

</div>

</div>

Arkadiusz Idzikowski staff answered 6 years ago


Dear henrydraymundo, MDB module should be in import array if you want to use it in app.module or in import and export arrays if you want to add it to your shared module instead (you are also missing forRoot() in MDBBootstrapModulesPro). It is also not recommended to use both MDBBootstrapModulesPro(which contains all mdb modules) and individual modules at the same time. Regards, Arek

Arkadiusz Idzikowski staff answered 6 years ago


Dear henrydraymundo, Do you use the latest version of MDB Angular? Please show me your app module file (or any other modules if you import MDB elsewhere). Regards, Arek

henrydraymundo pro commented 6 years ago

Hello Arkadiusz. If I am using the latest version (6.2.2) My module where the modal is found is the following: import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { MDBSpinningPreloader, MDBBootstrapModulesPro, ToastModule } from 'ng-uikit-pro-standard'; import { AppRouting } from './app.routing'; import { AuthModule } from './auth/auth.module'; import { JwtModule } from '@auth0/angular-jwt'; import { HttpClientModule } from '@angular/common/http'; import { AdminModule } from './admin/admin.module'; export function tokenGetter() { return localStorage.getItem('tokens'); } @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, HttpModule, ToastModule.forRoot(), MDBBootstrapModulesPro.forRoot(), AppRouting, AuthModule, HttpClientModule, JwtModule.forRoot({ config: { tokenGetter: tokenGetter, headerName: 'token', authScheme: '', whitelistedDomains: ['localhost:4200', 'localhost:4200/register'], blacklistedRoutes: ['localhost:4200/admin/'] } }), AdminModule ], providers: [MDBSpinningPreloader], bootstrap: [AppComponent], schemas: [ NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA ] }) export class AppModule { }

henrydraymundo pro commented 6 years ago

Hello Arkadiusz. Sorry, I'm wrong with the module, the correct one is this: import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MDBBootstrapModulesPro, SidenavModule, NavbarModule, ModalModule, WavesModule, AccordionModule } from 'ng-uikit-pro-standard'; import { InputsModule } from 'ng-uikit-pro-standard'; import { ModalProgramaComponent } from './modal_programa/modal_programa.component'; import { ModalEliminarRegistroComponent } from './modal_eliminar_registro/modal_eliminar_registro.componente'; import { ModalActividadComponent } from './modal_actividad/modal_actividad.component'; @NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule ], declarations: [ ModalProgramaComponent, ModalEliminarRegistroComponent, ModalActividadComponent ], exports: [ ModalProgramaComponent, ModalEliminarRegistroComponent, ModalActividadComponent ], providers: [ MDBBootstrapModulesPro, SidenavModule, NavbarModule, WavesModule, AccordionModule, ModalModule, InputsModule ], schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ] }) export class SharedModule { }


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: destock
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No