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>

Answer 2

 <a  [routerLink]="['/language',language.iso639_1 || 'all']" >{{language.name}}</a>

I was also facing the same issue (Cannot read property 'outlets' of null ) but the above code that I have written, worked for me.