Angular 7 is calling asp.net webapi twice

Question

I am having performance issues with my angular 7 application. I am using angular 7 as client and c#. asp.net.webapi as the server code. I have noticed that there are two calls made to the webapi endpoint and not sure why ? A another thing that I have noticed is that it initially shows 7 seconds and later 1.7 or 1.8 sec. Why does it do that

Screenshot 1 of Network tab

Screenshot2 of Network tab

The pic shown in the screenshot 2 is the same for the first call as well. I have also seen the call type is xhr. What does that mean

Angular Component service call

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { TermsService } from '../services/terms.service';
import { FundClassesComponent } from './fundClasses/fundClasses.component';
import { TermsStateService } from '../services/terms-state.service';
import { Router, ActivatedRoute } from '@angular/router';
import { FundStrategySelectorComponent } from '../directives/managerStrategySelector';
import { LegalFundClassesComponent } from './fundClasses/legalFundClasses.component';


@Component({
    selector: 'mgr-terms',
    templateUrl: 'terms.component.html'
})


export class TermsComponent implements OnInit {

    private Error: string;
    public TermDetails: any;
    private _ManagerStrategyId: number;
    FilteredClasses: any;
    OriginalList: any;
    Funds: any;
    FundClassType: any;
    FirmFunds: any;
    FundTerms: any;
    recordCount: any;
    Loading: boolean;
    StrategyName: any;
    public get ManagerStrategyId(): number {
        return this._ManagerStrategyId;
    }

    @ViewChild('combo')
    combo: FundStrategySelectorComponent;

    @ViewChild(FundClassesComponent)
    fundClassesComponent: FundClassesComponent;


    @ViewChild(FundClassesComponent)
    legalFundClassesComponent: LegalFundClassesComponent;

    @Input()
    public set ManagerStrategyId(value: number) {
        this._ManagerStrategyId = value;
    }
    FundClasses: any;
    LegalFundClasses: any;
    originalFundClasses: any;
    constructor(private termsService: TermsService, private termsStateService: TermsStateService, private router: Router, private route: ActivatedRoute, ) {

        this.route.params.subscribe(
            params => {
                this.ManagerStrategyId = params['id'];
                this.ngOnInit();
            }
        );
    }

    ngOnInit() {
        this.init();
    }

    init() {
        //this.Loading = true;
        this.getTermsDetails();
    }

    public getFundInvestedDetails(isInvested: boolean) {
        if (isInvested) {
            this.FundClasses = this.TermDetails.FundClassViewModel;
        } else {
            this.FundClasses = this.OriginalList.FundClassViewModel;
        }
    }

    public getLegalFundInvestedDetails(isInvested: boolean) {
        if (isInvested) {
            this.LegalFundClasses = this.TermDetails.LegalFundClassViewModel;

        } else {
            this.LegalFundClasses = this.OriginalList.LegalFundClassViewModel;
        }
    }

    public reset() {
        this.combo.reset();
    }

    public goHome() {
        this.router.navigate([`/home`]);
    }
    public getTermsDetails() {
        if (this.ManagerStrategyId != null) {
            if (this.fundClassesComponent && !this.fundClassesComponent.Load ||
                this.legalFundClassesComponent && this.legalFundClassesComponent.Load) {
                this.Loading = false;
            } else {
                this.Loading = true;
            }

            this.termsService.getTermsDetails(this.ManagerStrategyId).subscribe((data: any) => {
                this.TermDetails = data;
                this.OriginalList = JSON.parse(JSON.stringify(data));

                if (this.TermDetails.FundClassViewModel) {
                    this.FundClasses = this.TermDetails.FundClassViewModel;
                }

                if (this.TermDetails.LegalFundClassViewModel) {
                    this.LegalFundClasses = this.TermDetails.LegalFundClassViewModel;
                }
                if (this.TermDetails.FundTermsViewModel) {
                    this.FundTerms = this.TermDetails.FundTermsViewModel;
                }
                if (this.TermDetails.LegalFundClassViewModel) {
                    if (this.TermDetails.LegalFundClassViewModel.Funds) {
                        this.Funds = this.TermDetails.LegalFundClassViewModel.Funds;
                    }
                    if (this.TermDetails.LegalFundClassViewModel.FundClassType) {
                        this.FundClassType = this.TermDetails.LegalFundClassViewModel.FundClassType;
                    }
                    if (this.TermDetails.LegalFundClassViewModel.FirmFunds) {
                        this.FirmFunds = this.TermDetails.LegalFundClassViewModel.FirmFunds;
                    }
                }
                this.termsStateService.CanEdit = this.TermDetails.CanEdit;
                this.StrategyName = this.TermDetails.FundStrategyName;
                this.termsStateService.CanEditManagerStrategy = this.TermDetails.CanEditManagerStrategy;

                if (this.TermDetails.FundClassViewModel && this.TermDetails.FundClassViewModel) { 
                this.TermDetails.FundClassViewModel.FundDetailsViewModel.forEach(funDetail => {
                    funDetail.FundClassDetailsViewModel = funDetail.FundClassDetailsViewModel
                        .reduce((prev, next) => prev = prev.concat(next), [])
                        .filter(obj => obj.InvestedAmount !== null);
                });
            }

            if( this.TermDetails.LegalFundClassViewModel &&  this.TermDetails.LegalFundClassViewModel.AllTerms) {
                this.TermDetails.LegalFundClassViewModel.AllTerms = this.TermDetails
                    .LegalFundClassViewModel
                    .AllTerms.filter(obj => {
                        for (var prop in obj) {
                            return obj[prop] ? obj[prop].InvestmentStatusId === 1 : null;
                        }
                    });
                }

                this.Loading = false;

            });

        }
    }
}

Angular Service

@Injectable()
export class TermsService {
        _searchFilter: string;
        creds = { withCredentials: true }

        constructor(private mgr360CommonService: Manager360CommonService) { }


        getTermsDetails(managerStrategyId: number) {
                return this.mgr360CommonService.httpGet('/api/terms/details/' + managerStrategyId);
              }
  }

Angular shared Service

const httpPostOptions = {

    headers:
        new HttpHeaders(
            {
                'Content-Type': 'application/json; charset=utf-8',
            }),
    withCredentials: true,
};

@Injectable({
    providedIn: 'root'
})
export class Manager360CommonService {

    webApiLocation = this.getApiLocation();

    private getApiLocation() {
        const port = location.port ? ':56888' : '';
        return location.protocol + '//' + location.hostname + port;
    }

    constructor(private httpClient: HttpClient) { }



    httpGet(url: string): Observable<any> {
        return this.httpClient.get( this.webApiLocation + url, httpPostOptions)
            .pipe(map((response: Response) => {
                return response;
            }), catchError(error => {
                this.onError(error);
                return Promise.reject(error);
            }));
    }

Answer 1

The 1st call must be of type OPTION. Check the Request method in that.

OPTIONS requests are pre-flight requests in Cross-origin resource sharing (CORS).

They are necessary while making requests across different origins in specific situations.

For more info, visit this link