Wrong warning : ng8102

[wupaz]

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

Yes

Description

Wrong warning in this case

Exemple :
warning NG8102: The left side of this nullish coalescing operation does not include 'null' or 'undefined' in its type, therefore the '??' operator can be safely removed.

{{element.CurrentLock?.Clinician?.Label ?? '--'}}

In this case CurrentLock and Clinician could be null

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.2.0
Node: 14.18.3
Package Manager: npm 6.14.15
OS: win32 x64

Angular: 13.2.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.0
@angular-devkit/build-angular   13.2.0
@angular-devkit/core            13.2.0
@angular-devkit/schematics      13.2.0
@schematics/angular             13.2.0
rxjs                            6.6.7
typescript                      4.5.4

Anything else?

No response

[geromegrignon]

The problem in this situation is more related to Label.
Does its type include null and undefined?

[JoostK]

What are all the types involved in {{element.CurrentLock?.Clinician?.Label ?? '--'}}? What are the TS compiler options, i.e. strictNullChecks etc.

I guess I am asking for a reproduction.

[yutamago]

This warning is popping up all over my logs since I updated to Angular 13.2.0.
I can't really tell why the first line is fine and the second one throws a warning:

They are defined (in a third party package) as follows:

keyExpr?: string | Function;
rootValue?: SomeInterface;

[wupaz]

I try to reproduce on CodeSandbox without success.

My tsconfig file
{
"compileOnSave": false,
"compilerOptions": {
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"baseUrl": "src",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "es2020",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2018",
"noUnusedLocals": false,
"noUnusedParameters": false,
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"enableIvy": true,
"fullTemplateTypeCheck": true,
"strictTemplates": true,
"strictInjectionParameters": true
}
}

[wupaz]

The problem in this situation is more related to Label. Does its type include null and undefined?

No, Label can't be null

[JoostK]

I will have a look at this.

[JoostK]

This is broken when there's an any or unknown type, I have a fix for that. Can people share more cases where the check is broken?

[JoostK]

There's also an issue when strictNullChecks and strict are both disabled (or their default values), which is also being fixed in #44862.

[sod]

Also string[] yields this warning, even though the compiler can't guarantee that all possible index values return a string.

public foo: string[] = []
...
{{ foo[123456] ?? '' }}

[JoostK]

Also string[] yields this warning, even though the compiler can't guarantee that all possible index values return a string.

public foo: string[] = []
...
{{ foo[123456] ?? '' }}

Ah, that's an interesting one. TS doesn't include |undefined in array element accesses, but we should probably not report for this case.

[tripodsgames]

Same here:

[JoostK]

13.2.1 is out which should have improved things. I'll keep this open for a while, please report situations where you believe the rule is incorrect below.

[FabienCH]

Hello,
We are having this issue with:

Angular: 13.2.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.1
@angular-devkit/build-angular   13.2.1
@angular-devkit/core            13.2.1
@angular-devkit/schematics      13.2.1
@angular/cli                    13.2.1
@nguniversal/express-engine     13.0.2
@schematics/angular             13.2.1
rxjs                            7.5.2
typescript                      4.5.5

@Input() btnLabel?: string;

{{ btnLabel ?? 'Validate' }}

[JoostK]

@FabienCH Please update to latest Angular.

[FabienCH]

Sorry I thought we had the latest. It works fine now.

[alxhub]

Closing as fixed.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}