No directive found with exportAs mdbModal


Topic: No directive found with exportAs mdbModal

Frederic pro premium priority asked 3 years ago

I have an Angular 13 project that builds fine on several Visual Studio machines, but fails on Azure DevOps. The error is the following;

ng build error NG8003: No directive found with exportAs mdbModal

The faulty .html line is:

div mdbModal #changePasswordModal="mdbModal" class="modal fade" style="overflow-y: auto" tabindex="-1" role="dialog" aria-labelledby="créer"

The part that fails is : #changePasswordModal=“mdbModal” The typescript component file imports the modal component like this:

import { ModalDirective } from 'ng-uikit-pro-standard';

It is a mystery to me because the same Angular 12 project builds correctly from another branch.

The npm install phase shows no error.


Frederic pro premium priority commented 3 years ago

EDIT : ng serve does work, ng build does'nt


Grzegorz Bujański staff commented 3 years ago

Are you sure you are using MDB 5 v2.1.0? The code you provide shows that you are using the MDB4 version. Which exact version of MDB are you using in the project?


Frederic pro premium priority commented 3 years ago

You are right, this is MDB 4.It is referenced as:

"ng-uikit-pro-standard": "git+https://oauth2:[TOKEN]@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",

in package.json.


Grzegorz Bujański staff commented 3 years ago

And which version of MDB are you currently using? Are you sure this is the latest version of MDB?


Frederic pro premium priority commented 3 years ago

The version of MDB is 13.0.0


Frederic pro premium priority answered 3 years ago

We solved the problem by using relative path when importing modules (ie):

import { SHARED_COMPONENTS } from './index';

instead of

import { SHARED_COMPONENTS } from 'src/app/components/shared/index'; Add comment 41

So, probably not a MDB issue, but an Angular 13 one.


Grzegorz Bujański staff answered 3 years ago

Check if you have this code added to app.module.ts:

import { NgModule } from '@angular/core';
import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';
@NgModule({
  imports: [
    MDBBootstrapModulesPro.forRoot(),
  ]
});

Removing this code from the project causes the error you are writing about


Frederic pro premium priority commented 3 years ago

I do not have this code.


Grzegorz Bujański staff answered 3 years ago

Then try to add this code, or if you are importing only single modules make sure you imported the modal module:

import { NgModule } from '@angular/core';
import { ModalModule } from 'ng-uikit-pro-standard';
@NgModule({
  imports: [
    ModalModule.forRoot(),
  ]
});

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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 2.1.0
  • Device: Not releant
  • Browser: Not relevant
  • OS: Not relevant
  • Provided sample code: No
  • Provided link: No