Despite reviewing numerous inquiries regarding this error, none have provided insight into identifying the root cause of the issue. How can I pinpoint the origin of this error and what steps can I take to resolve it?
TypeError: Cannot read property 'length' of null
at HttpHeaders.applyUpdate (webpack:///./node_modules/@angular/common/fesm5/http.js?:235:27)
at eval (webpack:///./node_modules/@angular/common/fesm5/http.js?:206:74)
at Array.forEach (<anonymous>)
at HttpHeaders.init (webpack:///./node_modules/@angular/common/fesm5/http.js?:206:33)
at HttpHeaders.forEach (webpack:///./node_modules/@angular/common/fesm5/http.js?:271:14)
at Observable.eval [as _subscribe] (webpack:///./node_modules/@angular/common/fesm5/http.js?:1481:25)
at Observable._trySubscribe (webpack:///./node_modules/rxjs/_esm5/internal/Observable.js?:48:25)
at Observable.subscribe (webpack:///./node_modules/rxjs/_esm5/internal/Observable.js?:34:22)
at eval (webpack:///./node_modules/rxjs/_esm5/internal/util/subscribeTo.js?:33:31)
at subscribeToResult (webpack:///./node_modules/rxjs/_esm5/internal/util/subscribeToResult.js?:10:84)
at ____________________Elapsed_26_ms__At__Tue_Sep_04_2018_11_58_19_GMT_0200__hora_de_verano_de_Europa_central_ (http://localhost)
at Object.onScheduleTask (webpack:///./node_modules/zone.js/dist/zone-testing.js?:107:22)
at ZoneDelegate.scheduleTask (webpack:///./node_modules/zone.js/dist/zone.js?:400:51)
at Object.onScheduleTask (webpack:///./node_modules/zone.js/dist/zone.js?:296:29)
at ZoneDelegate.scheduleTask (webpack:///./node_modules/zone.js/dist/zone.js?:400:51)
at Zone.scheduleTask (webpack:///./node_modules/zone.js/dist/zone.js?:231:43)
at Zone.scheduleMacroTask (webpack:///./node_modules/zone.js/dist/zone.js?:254:25)
at scheduleMacroTaskWithCurrentZone (webpack:///./node_modules/zone.js/dist/zone.js?:1113:25)
at eval (webpack:///./node_modules/zone.js/dist/zone.js?:2089:28)
The error is observable in both the Chrome browser console and during test execution with Karma.
Another unsuccessful test message exhibits the following:
[object ErrorEvent] thrown
I am unsure how to troubleshoot this bug as well.
UPDATE: A simplified, comprehensive, and reproducible sample
Service:
import { HttpClient } from '@angular/common/http';
import { Country } from '../countries/country.model';
import { Observable } from 'rxjs';
import { Configuration } from '../../constants';
@Injectable({
providedIn: 'root'
})
export class DropdownService {
private server: String;
constructor(
private http: HttpClient,
private configuration: Configuration
) {
this.server = this.configuration.serverOCD;
}
getCountries(): Observable<Country[]> {
return this.http.get<Country[]>(this.server + '/api/v1/country');
}
}
Component:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
import { DropdownService } from '../services/dropdown.service';
import { Country } from './country.model';
import { Observable } from 'rxjs';
@Component({
selector: 'dropdown-countries',
templateUrl: './countries.component.html',
styleUrls: ['./countries.component.css']
})
export class CountriesComponent implements OnInit {
countries$: Observable<Country[]>;
countries: Country[] = [];
countriesForm: FormGroup;
country: FormControl;
constructor(
private fb: FormBuilder,
private dropdownService: DropdownService,
) { }
ngOnInit() {
this.countriesForm = this.fb.group({
country: this.fb.control(new Country().code = '')
});
// Attempt 1
this.getCountries();
// Attempt 2
this.countries$ = this.dropdownService.getCountries();
}
getCountries() {
this.dropdownService.getCountries().subscribe(
data => this.countries = data,
err => console.error(err),
() => console.log('done loading countries')
);
}
}
Template:
<div [formGroup]="countriesForm">
<select id="countriesDropdown" class="form-control form-control-sm" formControlName="country">
<option value="" disabled>Choose a Country</option>
<option *ngFor="let country of countries$ | async" [ngValue]="country">{{country.longDescription}}</option>
</select>
</div>
<p>Form value: {{ countriesForm.value | json }}</p>