Modal Error: \exportAs\ set to \mdbModal\

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>

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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

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

Please insert min. 15 characters.

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

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. 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

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

henrydraymundo

Pro User 14Support score
2Questions 0Answers 0Snippets