Topic: File upload error
CWI_MDB priority asked 2 years 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 answered 2 years 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';
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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
Arkadiusz Idzikowski staff commented 2 years ago
Is the component in which you try to use the file upload component declared in this module?
CWI_MDB priority commented 2 years 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: