Language service errors on possibly null binding when it's already checked

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Given this component :

@Component({
  template: `<div *ngIf="data"><p>{{data.title}}</p></div>`
})
export class TestComponent {
  data: SomeObjectInterface | null;
}

The language service raises the error "The expression might be null" on data.title but it's already checked by *ngIf.

Expected behavior

Should not raise an error.

Environment


Angular version: 4.3.1
VS Code Angular Language Service extension 0.1.4

@chuckjaz

@chuckjaz Some news about this issue ?

This will not be addressed until 6.0 as it will require a breaking change to the NgIf declaration that will not be ready in time for 5.0.

The template compiler does not know the runtime behavior of directives, including something as fundamental as *ngIf, therefore, there is currently no typing relationship that can be derived for data inside the template. This is similar to, for example, if you would have written the following in TypeScript:

function ngIf(condition: boolean, cb: () => void) { if (condition) cb()) }
ngIf(data, () => data.title);

here (turn on strict null option to see the error).

This will report that data could possibly be undefined in lambda because proving otherwise requires knowledge of the runtime behavior of ngIf.

To do this we could change the declaration of NgIf to something like what is implied by this playground (turn on strict null checks and see that d is inferred to be of type string).

This would be similar to rewriting the above as:

function ngIf<T>(condition: T | null  | undefined, cb: (condition: T) => void) {
  if (condition) cb(condition);
}

ngIf(data, data => data.title);

here

The new type checker is scheduled for 5.1 but this will not be included in it. As this is a breaking change it cannot happen till 6.0.

Thanks for the detailed answer.

Hi, does this also apply to the case of type narrowing inside the if-condition itself, or is that a separate issue?

class Animal { }
class Bird extends Animal { public wingCount: number; }
    
@Component({
  template: `<div *ngIf="isBird(animal) && (animal.wingCount > 2)"><p>This is one crazy bird!</p></div>`
})
export class TestComponent {
  @Input() animal: Animal;
  isBird(a: Animal): a is Bird { return a instanceof Bird; }
}

In the current language service, the reference to animal.wingCount would be an error ("'Animal' does not contain such a member"), even though of course the AOT compiler gets through it just fine.

Closing this as there are no errors anymore.

But for info, now it seems there is the opposite problem: object is not detected as potentially null when there is no *ngIf.

I don't think it's fixed on the templates, at least -- see my previous comment. I don't run the language service directly (I guess via tsc?) but in VS Code (Salsa), I still get warnings in statements that would compile cleanly in non-template (.ts file) context. In the above example, *ngIf="isBird(animal) && (animal.wingCount > 2) would have a red squiggle under animal.wingCount because wingCount is only defined on Bird and the language service doesn't treat isBird as narrowing the type, even though the actual compiler does.

Would it be better to re-open this issue, or to open a new issue specific to errors in the template itself?

@thw0rted

@thw0rted The plugin for VSCode is using an older version of the Angular language service, so it would be better to open an issue here instead: https://github.com/angular/vscode-ng-language-service

See here: https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

This extension uses @angular/language-service@5.2.2-250c8da and typescript@2.6.2.

@cyrilletuzi

@cyrilletuzi I'm using the language service v6.0.6 in WebStorm and has this issue.

@chuckjaz

@chuckjaz im having the same issue here

<div *ngIf="object">
	{{ object.someField }}
</div>

Could you please assist?
I'm using Angular 7.0.5 another note my object is of type Type | undefined still the error is showing as

[Angular] The expression might be null

I am having the same issue with version 7. I am currently adding ! in front of expressions even though I am using *ngIf. I think this hack is not clean.

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.}

Navigation Menu

Repository navigation

Language service errors on possibly null binding when it's already checked #18248

I'm submitting a...

Current behavior

Expected behavior

Environment

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Language service errors on possibly null binding when it's already checked #18248

Description

I'm submitting a...

Current behavior

Expected behavior

Environment

Activity

cyrilletuzi commented on Aug 18, 2017

chuckjaz commented on Aug 18, 2017

cyrilletuzi commented on Aug 18, 2017

thw0rted commented on Feb 27, 2018

cyrilletuzi commented on Apr 14, 2018

thw0rted commented on Apr 16, 2018

nathanosdev commented on Jun 23, 2018

fetis commented on Jul 2, 2018

inmogr commented on Nov 27, 2018

yoosif0 commented on Mar 19, 2019

angular-automatic-lock-bot commented on Sep 14, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions