Topic: File upload error

CWI_MDB priority asked 3 weeks ago


Expected behavior Component to display the file upload plugin

Actual behavior Error: src/app/components/file-upload/file-upload.component.html:5:1 - error NG8001: 'mdb-file-upload' is not a known element:1. If 'mdb-file-upload' is an Angular component, then verify that it is part of this module.2. If 'mdb-file-upload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

*Resources (screenshots, code snippets etc.)*HTML:

<div class="modal-header">
    <h5 class="modal-title" id="modalTitle">Upload file</h5>
    <button type="button" class="btn-close" aria-label="Close" (click)="modalRef.close()">/button>
</div>
<mdb-file-upload></mdb-file-upload>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="modalRef.close()">Close</button><button type="button" class="btn btn-primary">Save changes</button>
</div>

App.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { MdbFormsModule } from 'mdb-angular-ui-kit/forms';
import { MdbValidationModule } from 'mdb-angular-ui-kit/validation';
import { MdbSidenavModule } from 'mdb-angular-ui-kit/sidenav';
import { MdbTabsModule } from 'mdb-angular-ui-kit/tabs';
import { MdbTableModule } from 'mdb-angular-ui-kit/table';
import { MdbSelectModule } from 'mdb-angular-ui-kit/select';
import { MdbModalModule } from 'mdb-angular-ui-kit/modal';
import { MdbNotificationModule } from 'mdb-angular-ui-kit/notification';
import { MdbAutocompleteModule } from 'mdb-angular-ui-kit/autocomplete';
import { MdbCollapseModule } from 'mdb-angular-ui-kit/collapse';
import { MdbDragAndDropModule } from 'mdb-angular-drag-and-drop';
import { MdbCalendarModule } from 'mdb-angular-calendar';
import { MdbPopoverModule } from 'mdb-angular-ui-kit/popover';
import { MdbLightboxModule } from 'mdb-angular-ui-kit/lightbox';
import { MdbDatepickerModule } from 'mdb-angular-ui-kit/datepicker';
import { MdbFileUploadModule } from 'mdb-angular-file-upload';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    MomentModule,
    MdbFormsModule,
    MdbValidationModule,
    MdbSidenavModule,
    MdbTabsModule,
    MdbTableModule,
    MdbSelectModule,
    MdbModalModule,
    MdbNotificationModule,
    MdbAutocompleteModule,
    MdbCollapseModule,
    MdbDragAndDropModule,
    MdbCalendarModule,
    MdbPopoverModule,
    MdbLightboxModule,
    MdbDatepickerModule,
    MdbFileUploadModule
  ],
  providers: [{provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true}],
  bootstrap: [AppComponent]
})
export class AppModule { }

Arkadiusz Idzikowski staff commented 3 weeks ago

Is the component in which you try to use the file upload component declared in this module?


CWI_MDB priority commented 2 weeks ago

Thanks! For some reason when creating the component, it wasn't added to the app.module.ts file.

However, the plugin, while it isn't throwing an error, isn't rendering correctly:

enter image description here

<div class="modal-header">
  <h5 class="modal-title" id="modalTitle">Upload file</h5>
  <button type="button" class="btn-close" aria-label="Close" (click)="modalRef.close()"></button>
</div>
<mdb-file-upload></mdb-file-upload>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="modalRef.close()">
    Close
  </button>
  <button type="button" class="btn btn-primary">Save changes</button>
</div>

Arkadiusz Idzikowski staff answered 2 weeks ago


It looks like the plugin styles are not imported correctly. Please make sure to add this import to the styles.scss file:

@import 'mdb-angular-file-upload/scss/file-upload.scss';

CWI_MDB priority commented 2 weeks ago

Perfect, thank you!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 3.0.0
  • Device: Mac Studio
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No