Issue Reproduction:
1. We have a list of advertisers (our clients) for whom we run various marketing campaigns.
2. Upon clicking the "Campaign" button for a specific advertiser.
Result: You are taken to the "campaigns" page displaying all campaigns for the selected advertiser.
3. However, sometimes, but not always, after clicking the "Campaign" button, an error occurs stating "name" is undefined. Screenshot: https://i.sstatic.net/fRiHl.png
Below is the main logic executed upon clicking the "Campaign" button.
header.component.ts:
@Input() advertiserId: string;
@Input() advertiserIoId: string;
@Input() campaignId: string;
public advertiserDto: AdvertiserDto;
public advertiserIoDto: AdvertiserIoDto;
public campaignDto: CampaignDto;
constructor(private advertiserModel: AdvertiserModel,
private advertiserIoModel: AdvertiserIoModel,
private campaignModel: CampaignModel) {
}
ngOnChanges() {
this.getAdvertiserDto();
this.getAdvertiserDtoData();
this.getAdvertiserIoDto();
// Here lies the issue in getAdvertiserIoDtoData()
this.getAdvertiserIoDtoData();
this.getCampaignDto();
this.getCampaignDtoData();
}
private getAdvertiserDto(): void {
this.advertiserDto = this.advertiserModel.getDto(this.advertiserId);
}
private getAdvertiserIoDto(): void {
this.advertiserIoDto = this.advertiserIoModel.getDto(this.advertiserIoId, this.advertiserId);
}
private getCampaignDto(): void {
this.campaignDto = this.campaignModel.getDto(this.campaignId, this.advertiserId, this.advertiserIoId);
}
private getAdvertiserDtoData(): void {
this.advertiserModel
.getDtoData(this.advertiserDto)
.catch(error => console.log(error))
}
private getAdvertiserIoDtoData(): void {
this.advertiserIoModel
.getDtoData(this.advertiserIoDto)
.catch(error => console.log(error))
}
private getCampaignDtoData(): void {
this.campaignModel
.getDtoData(this.campaignDto)
.catch(error => console.log(error))
}
header-template - part ({{ advertiserIoDto.dtoData.name }}) - where dtoData.name is undefined:
<span *ngIf="campaignDto.isLoaded === true"
[routerLink]="['/private/advertiser/' + advertiserId + '/advertiserIo/' + advertiserIoId]"
class="nano-breadcrumb-item">
{{ advertiserIoDto.dtoData.name }}
</span>
Another important observation: When comparing the execution order in "ngOnChanges" and the "Browser", you'll notice that "getAdvertiserDtoData()" starts before "getCampaignDtoData()" but executes later. This could be the issue.
Screenshot: https://i.sstatic.net/uRU5X.png
Any suggestions on how to resolve this?
Error Trace:
NanoCampaignHeaderComponent.html:16 ERROR TypeError: Cannot read property 'name' of undefined
at Object.eval [as updateRenderer] (NanoCampaignHeaderComponent.html:16)
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13105)
at checkAndUpdateView (core.es5.js:12256)
at callViewAction (core.es5.js:12599)
at execEmbeddedViewsAction (core.es5.js:12557)
at checkAndUpdateView (core.es5.js:12252)
at callViewAction (core.es5.js:12599)
at execComponentViewsAction (core.es5.js:12531)
at checkAndUpdateView (core.es5.js:12257)
at callViewAction (core.es5.js:12599)