Topic: [ERROR] NG8003: No directive found with exportAs 'mdbCollapse'. [plugin angular-compiler]

raywang74 priority asked 1 week ago


Hello, I copied and pasted the navbar on my Angular page and I got an error, [ERROR] NG8003: No directive found with exportAs 'mdbCollapse'. [plugin angular-compiler]. I've already imported MdbCollapseModule as follow:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// MDB Modulesimport { MdbAccordionModule } from 'mdb-angular-ui-kit/accordion';
import { MdbCarouselModule } from 'mdb-angular-ui-kit/carousel';
import { MdbCheckboxModule } from 'mdb-angular-ui-kit/checkbox';
import { MdbCollapseModule } from 'mdb-angular-ui-kit/collapse';
import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown';
import { MdbFormsModule } from 'mdb-angular-ui-kit/forms';
import { MdbModalModule } from 'mdb-angular-ui-kit/modal';
import { MdbPopoverModule } from 'mdb-angular-ui-kit/popover';
import { MdbRadioModule } from 'mdb-angular-ui-kit/radio';
import { MdbRangeModule } from 'mdb-angular-ui-kit/range';
import { MdbRippleModule } from 'mdb-angular-ui-kit/ripple';
import { MdbScrollspyModule } from 'mdb-angular-ui-kit/scrollspy';
import { MdbTabsModule } from 'mdb-angular-ui-kit/tabs';
import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';
import { MdbValidationModule } from 'mdb-angular-ui-kit/validation';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HeaderComponent } from './views/common/header/header.component';
import { FooterComponent } from './views/common/footer/footer.component';
@NgModule({ 
    declarations: \[ AppComponent \], 
    imports: \[ 
        BrowserModule, 
        BrowserAnimationsModule, 
        MdbAccordionModule, 
        MdbCarouselModule, 
        MdbCheckboxModule, 
        MdbCollapseModule, 
        MdbDropdownModule, 
        MdbFormsModule, 
        MdbModalModule, 
        MdbPopoverModule, 
        MdbRadioModule, 
        MdbRangeModule, 
        MdbRippleModule, 
        MdbScrollspyModule, 
        MdbTabsModule, 
        MdbTooltipModule, 
        MdbValidationModule, 
        HeaderComponent, 
        FooterComponent 
    \], 
    providers: \[\], 
    bootstrap: \[AppComponent\]})export class AppModule { }

{
  'mdb5-angular-ui-kit-pro-advanced': '7.1.0',
   npm: '10.8.2',
node: '18.20.6',
acorn: '8.13.0',
ada: '2.8.0',
ares: '1.29.0',
base64: '0.5.2',
brotli: '1.1.0',
cjs_module_lexer: '1.2.2',
cldr: '44.1',
icu: '74.2',
llhttp: '6.1.1',
modules: '108',
napi: '9',
nghttp2: '1.61.0',
nghttp3: '0.7.0',
ngtcp2: '1.3.0',
openssl: '3.0.15+quic',
simdutf: '5.6.0',
tz: '2024a',
undici: '5.28.5',
unicode: '15.1',
uvwasi: '0.0.19',
v8: '10.2.154.26-node.37',
zlib: '1.3.0.1-motley'
}
Angular CLI: 18.2.2

Am i missing imports or something else? thank you


Arkadiusz Idzikowski staff commented 1 week ago

Is the component in which you try to use the mdbCollapse directive declared in the same module where you import the MdbCollapseModule?


raywang74 priority commented 1 week ago

Yes. I use the mdbCollapse in HeaderComponent. I download the zip file and unzip it. Run the npm install. Try ng serve to test. Then create HeaderComponent. Copy the Navbar code from the document. Re-run ng serve and get the error.


Arkadiusz Idzikowski staff commented 1 week ago

In this case you need to add the HeaderComponent to the module declarations or import the MdbCollapseModule in a different module where you declared this component. I'm not sure what your app architecture looks like, but it seems like the HeaderComponent does not have access to the mdbCollapse



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 7.1.0
  • Device: Mac
  • Browser: Chrome
  • OS: Mac
  • Provided sample code: No
  • Provided link: No