TypeError: Невозможно прочитать свойство 'length' нулевой кармы, используя Karma - PullRequest
Новая
       10

TypeError: Невозможно прочитать свойство 'length' нулевой кармы, используя Karma

0 голосов
/ 04 сентября 2018

Я видел много вопросов об этой ошибке, но ни один из них не помог мне найти источник проблемы, как узнать, откуда возникла эта ошибка и как ее исправить? 

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)

Ошибка видна как в консоли браузера (Chrome), так и при запуске тестов с Karma.

В другом тестовом сообщении об ошибке указано следующее: 

[object ErrorEvent] thrown

Я тоже не знаю, как отследить эту ошибку.

ОБНОВЛЕНИЕ: минимальный, полный и проверяемый пример

Услуги: 

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');
    }
}

Компонент: 

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 = '')
        });

        // 1st try
        this.getCountries();

        // 2nd try
        this.countries$ = this.dropdownService.getCountries();
    }

    getCountries() {
        this.dropdownService.getCountries().subscribe(
            data => this.countries = data,
            err => console.error(err),
            () => console.log('done loading countries')
        );
    }

}

Шаблон: 

<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>

1 Ответ

0 голосов
/ 05 сентября 2018

Что ж, после 2 дней исследований мне удалось найти проблему, и она исходит из кода, который, как я думал, не повлияет:

GenericService: 

@Injectable()
export class JWTInterceptor implements HttpInterceptor {

    private token: string;

    constructor(
        private config: Configuration,
        private authStore: AuthenticationStore
    ) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        this.token = this.authStore.getToken();

        if (!req.headers.has('Content-Type')) {
            req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
        }

        req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
        req = req.clone({ headers: req.headers.set('Authorization', this.token) });

        return next.handle(req);
    }
}

SharedModule: 

providers: [
    GenericService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: JWTInterceptor,
      multi: true,
    }
],

С этими фрагментами все запросы были перехвачены JWTInterceptor, который выдавал ошибку, и я не хотел, поэтому я использовал HttpBackend, чтобы игнорировать этот перехватчик:

DropdownService: 

constructor(
    private http: HttpClient,
    private handler: HttpBackend, // to ignore interceptor
    private configuration: Configuration
) {
    this.http = new HttpClient(this.handler); // use it in HttpClient
    this.server = this.configuration.serverOCD;
}
...