I'm trying to create an upload feature module but I'm getting an error with MatDialog
I've already imported it in the module.ts and added it to the imports array.
upload.module.ts
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { UploadComponent } from './upload.component'
import {
MatButtonModule,
MatDialogModule,
MatListModule,
MatProgressBarModule,
} from '@angular/material'
import { DialogComponent } from './dialog/dialog.component'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { FlexLayoutModule } from '@angular/flex-layout'
import { UploadService } from './upload.service'
import { HttpClientModule } from '@angular/common/http'
import { from } from 'rxjs';
@NgModule({
imports: [
CommonModule,
MatButtonModule,
MatDialogModule,
MatListModule,
FlexLayoutModule,
HttpClientModule,
BrowserAnimationsModule,
MatProgressBarModule
],
declarations: [UploadComponent, DialogComponent],
exports: [UploadComponent],
entryComponents: [DialogComponent], // Add the DialogComponent as entry component
providers: [UploadService],
})
export class UploadModule {}
upload.component.ts
import { Component } from '@angular/core'
import { MatDialog } from '@angular/material'
import { DialogComponent } from './dialog/dialog.component'
import { UploadService } from './upload.service'
@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.css'],
})
export class UploadComponent {
constructor(public dialog: MatDialog, public uploadService: UploadService) {}
public openUploadDialog() {
let dialogRef = this.dialog.open(DialogComponent, {
width: '50%',
height: '50%',
})
}
}
edit to share upload.service.ts
import { Injectable } from '@angular/core'
import {
HttpClient,
HttpRequest,
HttpEventType,
HttpResponse,
} from '@angular/common/http'
import { Subject } from 'rxjs/Subject'
import { Observable } from 'rxjs/Observable'
const url = 'http://localhost:8000/upload'
@Injectable()
export class UploadService {
constructor(private http: HttpClient) {}
public upload(files: Set<File>):
{ [key: string]: { progress: Observable<number> } } {
// this will be the our resulting map
const status: { [key: string]: { progress: Observable<number> } } = {};
files.forEach(file => {
// create a new multipart-form for every file
const formData: FormData = new FormData();
formData.append('file', file, file.name);
// create a http-post request and pass the form
// tell it to report the upload progress
const req = new HttpRequest('POST', url, formData, {
reportProgress: true
});
// create a new progress-subject for every file
const progress = new Subject<number>();
// send the http-request and subscribe for progress-updates
this.http.request(req).subscribe(event => {
if (event.type === HttpEventType.UploadProgress) {
// calculate the progress percentage
const percentDone = Math.round(100 * event.loaded / event.total);
// pass the percentage into the progress-stream
progress.next(percentDone);
} else if (event instanceof HttpResponse) {
// Close the progress-stream if we get an answer form the API
// The upload is complete
progress.complete();
}
});
// Save every progress-observable in a map of all observables
status[file.name] = {
progress: progress.asObservable()
};
});
// return the map of progress.observables
return status;
}}
Recieved this error: ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[UploadComponent -> MatDialog]: StaticInjectorError(Platform: core)[UploadComponent -> MatDialog]: NullInjectorError: No provider for MatDialog! NullInjectorError: StaticInjectorError(AppModule)[UploadComponent -> MatDialog]: