Topic: No directive found with exportAs mdbModal

Frederic priority asked 2 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 priority commented 2 years ago

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


Grzegorz Bujański staff commented 2 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 priority commented 2 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 2 years ago

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


Frederic priority commented 2 years ago

The version of MDB is 13.0.0


Frederic priority answered 2 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 2 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(),
  ]
});

Grzegorz Bujański staff answered 2 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 priority commented 2 years ago

I do not have this code.



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: Priority
  • 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