TypeScript - ข้อผิดพลาด Null Injector ในการอัปโหลดไฟล์ Angular Material

ฉันใช้ angular-material-fileupload (https://www.npmjs.com/package/angular-material-fileupload) ในโปรเจกต์ Angular 7 แต่ในเวลารันไทม์เบราว์เซอร์แสดงข้อยกเว้นนี้:

core.js:5847 ข้อผิดพลาด Error: ไม่จับได้ (ใน promise): NullInjectorError: StaticInjectorError(AppModule)[FileUploadInputFor -> ElementRef]: StaticInjectorError(Platform: core)[FileUploadInputFor -> ElementRef]: NullInjectorError: ไม่พบ provider สำหรับ ElementRef! NullInjectorError: StaticInjectorError(AppModule)[FileUploadInputFor -> ElementRef]: StaticInjectorError(Platform: core)[FileUploadInputFor -> ElementRef]: NullInjectorError: ไม่พบ provider สำหรับ ElementRef! ที่ NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1225) ที่ resolveToken (core.js:1463) ที่ tryResolveToken (core.js:1407) ที่ StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1311) ที่ resolveToken (core.js:1463) ที่ tryResolveToken (core.js:1407) ที่ StaticInjector.push. ./node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1311) ที่ resolveNgModuleDep (core.js:18446) ที่ NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:19135) ที่ resolveDep (core.js:19506) ที่ resolvePromise (zone.js:831) ที่ resolvePromise (zone.js:788) ที่ zone.js:892 ที่ ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) ที่ Object.onInvokeTask (core.js:24328) ที่ ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) ที่ Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) ที่ drainMicroTaskQueue (zone.js:601) ที่ ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502) ที่ invokeTask (zone.js:1744)

นี่คือโมดูลของฉัน:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ImportBoxComponent} from './import-box.component';
import {SharedLibModule} from '../shared-lib/shared-lib.module';
import {SharedCommonModule} from '../shared-common/shared-common.module';
import {MatFileUploadModule} from 'angular-material-fileupload';

@NgModule({
  declarations: [ImportBoxComponent],
  imports: [
    CommonModule,
    SharedLibModule,
    SharedCommonModule,
    MatFileUploadModule
  ],
  exports: [ImportBoxComponent]
})
export class ImportBoxModule {
}

นี่คือ component.html ของฉัน

<label for="singleFile">Upload file</label>
<input id="singleFile" type="file [fileUploadInputFor]="fileUploadQueue"/>
<br>
<mat-file-upload-queue #fileUploadQueue [fileAlias]="'file'"               
[httpUrl]="'http://localhost:8180/jax-rs-jersey-application-sample'">
<mat-file-upload [file]="file" [id]="i" *ngFor="let file of fileUploadQueue.files; let i = index">
</mat-file-upload>

นี่คือไฟล์ app.module ของฉัน:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {PagesModule} from './pages/pages.module';
import {SharedModule} from './shared/shared.module';
import {SchemaFormModule, WidgetRegistry} from 'ngx-schema-form';
import {GlWidgetRegistry} from './core/widget-registery/widget-registry.service';
import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
import {HTTP_INTERCEPTORS, HttpClient} from '@angular/common/http';
import {createTranslateLoader} from './shared/shared-lib/gl-translate/gl-translate.module';
import {AccountModule} from './account/account.module';
import {NgxWebstorageModule} from 'ngx-webstorage';
import {AngularFontAwesomeModule} from 'angular-font-awesome';
import {ToastrModule, ToastrService} from 'ngx-toastr';
import {NotificationInterceptor} from './core/interceptor/notification.interceptor';
import {Ng7MatBreadcrumbService} from 'ng7-mat-breadcrumb';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFontAwesomeModule,
    AccountModule,
    SharedModule,
    PagesModule,
    ToastrModule.forRoot(),
    SchemaFormModule.forRoot(),
    NgxWebstorageModule.forRoot({prefix: 'gl', separator: '.'}),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    Ng7MatBreadcrumbService,
    {provide: WidgetRegistry, useClass: GlWidgetRegistry},
    {
      provide: HTTP_INTERCEPTORS,
      useClass: NotificationInterceptor,
      multi: true,
      deps: [ToastrService, TranslateService]
    },
  ],
  bootstrap:
    [AppComponent]
})

export class AppModule {
}

ฉันไม่สามารถหาคู่มือที่เป็นประโยชน์เกี่ยวกับแพ็กเกจ angular-material-fileupload ได้

มีบทเรียนที่เหมาะสมสำหรับเรื่องนี้ไหม?

มีการตั้งค่าเพิ่มเติมสำหรับการใช้แพ็กเกจนี้หรือไม่?

มีใครสามารถแนะนำวิธีแก้ปัญหาที่ดีสำหรับเรื่องนี้ได้ไหม?