I encountered the following error message:
ERROR TypeError: Cannot read property 'length' of undefined at eval (webpack-internal:///./node_modules/@angular/common/esm5/http.js:163) at Array.forEach () at HttpHeaders.lazyInit (webpack-internal:///./node_modules/@angular/common/esm5/http.js:157) at HttpHeaders.init (webpack-internal:///./node_modules/@angular/common/esm5/http.js:305) at HttpHeaders.forEach (webpack-internal:///./node_modules/@angular/common/esm5/http.js:408) at Observable.eval [as _subscribe] (webpack-internal:///./node_modules/@angular/common/esm5/http.js:2210) at Observable._trySubscribe (webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:177) at Observable.subscribe (webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:165) at subscribeToResult (webpack-internal:///./node_modules/rxjs/_esm5/util/subscribeToResult.js:32) at MergeMapSubscriber._innerSub (webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:143)
This error occurs when attempting to upload a file, despite not implementing the length() function anywhere in my code.
Here is the relevant HTML snippet:
<app-supervisor-header></app-supervisor-header>
<main>
<div class="container">
<div class="col-sm">
<h3>Modifying exam: {{examen.naam}}</h3>
<form #examUpdateForm="ngForm" (ngSubmit)="onSubmit(examUpdateForm)">
<div class="row">
<!-- Form fields omitted for brevity -->
</div>
</form>
</div>
</div>
</main>
The Component looks like this:
export class SupervisorExamenAanpassenComponent implements OnInit {
@Input() examen: Examen = new Examen(null, '', '', null);
id: number;
constructor(private serv: ExamService, private route: ActivatedRoute) { }
onSubmit(form) {
this.serv.updateExamById(this.id, this.examen).subscribe();
}
fileChanged(e) {
const reader = new FileReader();
reader.onload = () => {
this.examen.file = reader.result;
};
reader.readAsText(e.target.files[0]);
}
ngOnInit() {
this.route.params.subscribe(params => this.id = params.id);
this.serv.getExamById(this.id).subscribe((data) => this.examen = data);
}
}
Upon attempting to submit again, I receive an error pointing to HTML line 6 which is:
<form #examUpdateForm="ngForm" (ngSubmit)="onSubmit(examUpdateForm)">
Additional information:
ExamService details:
@Injectable()
export class ExamService {
examens: Examen[] = [];
constructor(private http: HttpClient) {}
// Implementation details omitted for clarity
}