Unable to read "exits" of null properties in Angular 4

Question

I have an Angular 4.3.6 project where a template fragment creates this error.

Template block:

<a [routerLink]="['/article',article?.id]">{{article?.title}}</a>

Error Stack Trace:

 ArticleSpComponent.html:26 ERROR TypeError: Cannot read property 'outlets' of null at createNewSegmentGroup (router.es5.js:2967) at updateSegmentGroup (router.es5.js:2896) at router.es5.js:2914 at forEach (router.es5.js:593) at updateSegmentGroupChildren ( 

The cause of the error is obvious. the article variable is selected by async from Http and initialized after the page is displayed so that it is zero at first. However, I thought what to put? after this variable avoids this problem.

Could you advise?

Answer 1

? in the article? .id works fine, but the RouterLink directive RouterLink not like to receive the passed null .

You can get around using something like:

 <a *ngIf="article" [routerLink]="['/article',article?.id]">{{article?.title}}</a> <a *ngIf="!article">{{article?.title}}</a>