Angular: NG8107 warning when compiling frontend in list and detail view with referenced other entities

[OmarHawk]

Overview of the issue

In the following line, we do produce a ? character right before the element accessor:

generator-jhipster/generators/entity-client/templates/angular/src/main/webapp/app/entities/list/entity-management.component.html.ejs

Line 149 in 1668772

<a [routerLink]="['/<%= relationship.otherEntity.entityPage %>', <%= entityInstance %>.<%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= entityInstance %>.<%= relationshipFieldName %>?.<%= otherEntityField %> }}</a>

This produces such warnings during frontend build:

[INFO] Warning: src/main/webapp/app/entities/stream-data/list/stream-data.component.html:137:108 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator.
[INFO] 
[INFO] 137               <a [routerLink]="['/stream-router', streamData.routerid.id, 'view']">{{ streamData.routerid?.info }}</a>
[INFO]                                                                                                                ~~~~
[INFO] 
[INFO]   src/main/webapp/app/entities/stream-data/list/stream-data.component.ts:18:16
[INFO]     18   templateUrl: './stream-data.component.html',
[INFO]                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[INFO]     Error occurs in the template of component StreamDataComponent.

Another place where the same thing is done is this:

generator-jhipster/generators/entity-client/templates/angular/src/main/webapp/app/entities/detail/entity-management-detail.component.html.ejs

Line 91 in 1668772

<a [routerLink]="['/<%= otherEntityStateName %>', <%= entityInstance + '.' + relationshipFieldName + '.' + relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= entityInstance %>.<%= relationshipFieldName %>?.<%= otherEntityField %> }}</a>

Producing such a warning

[INFO] Warning: src/main/webapp/app/entities/stream-log/detail/stream-log-detail.component.html:32:108 - warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator.
[INFO] 
[INFO] 32             <a [routerLink]="['/stream-data', streamLog.streamData.uuid, 'view']">{{ streamLog.streamData?.uuid }}</a>
[INFO]                                                                                                               ~~~~
[INFO] 
[INFO]   src/main/webapp/app/entities/stream-log/detail/stream-log-detail.component.ts:8:16
[INFO]     8   templateUrl: './stream-log-detail.component.html',
[INFO]                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[INFO]     Error occurs in the template of component StreamLogDetailComponent.

Motivation for or Use Case

Shouldn't throw such warning during build.

Reproduce the error

See references above. We should put the question mark only for nullable fields... but interestingly, this field seems to be nullable here and the compiler seems to be not able to recognize that...

Related issues

Suggest a Fix

We should put the question mark only for nullable fields...

JHipster Version(s)

7.9.2

JHipster configuration

Leaving it out. I already put a reference to the code lines causing the issue.

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

• Checking this box is mandatory (this is just to show you read everything)

[OmarHawk]

Maybe related to angular/angular#46918

[mraible]

I saw this in the last couple of days too.

[ertunga]

@mshima I think we can merge this without waiting. Mentioned lines in the issue are wrapped with ngIf checks that make sure the fields are there. Even the fields can be null or undefined, because of the ngIf ?. can be removed here.

Here is an example, we can remove the question mark here.

<div *ngIf="post.blog"> <a [routerLink]="['/blog', post.blog.id, 'view']">{{ post.blog?.name }}</a> </div>

[mshima]

@ertunga looks correct thanks for the example.