Cannot read property 'outlets' of null in Angular 4

Question

I have Angular 4.3.6 project where a template snippet produces 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 error cause seems to be obvious. article variable is fetched async from Http and initialized after page is rendered so firstly it's null. However I thought that putting ? after this variable allows to avoid this issue.

Can you please advise?

Answer 1

? in article?.id is working fine, but the RouterLink directive doesn't like getting a null passed.

You could work around using something like:

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