I wanted to create a feature module which will handle the front end for an upload.
upload.component.html No errors.
<input
type="file"
#file
style="display: none"
(change)="onFilesAdded()"
multiple
/>
<button mat-raised-button (click)="openUploadDialog()">Upload</button>
upload.component.ts 2 errors - importing the upload and dialog components
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'],
})
class UploadComponent {
constructor(public dialog: MatDialog, public uploadService: UploadService) {}
public openUploadDialog() {
let dialogRef = this.dialog.open(DialogComponent, {
width: '50%',
height: '50%',
})
}
}
upload.module.ts 3 errors, importing the DialogComponent, upload service, and upload component
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.service.ts no errors
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()
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;
}}
app.module.ts error importing upload component
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';
import { NavbarService } from './navbar/navbar.service';
import { UploadComponent } from './upload/upload.component';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
WelcomeComponent,
PagenotfoundComponent,
UploadComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [NavbarService],
bootstrap: [AppComponent]
})
export class AppModule { }
I've got the error "Module has no exported member" for my DialogComponent, UploadService, and UploadComponent.
I've left the code for the dialog component out because it's very long and I presume the cause of the problem for that and the upload component will be the same.
Very stuck - help much appreciated!
Your classes should be exported using the export
keyword. For eg:
export class UploadComponent {
...
}
This needs to be done for the UploadService
as well. The module will not be able to import it otherwise.