Ivy template type checking doesn't narrow types in output positions

🐞 bug report

Scope

@angular/compiler-cli Specifically: Ivy template type checking

Is this a regression?

No.

Description / Reproduction

Given a template such as

<some-component
    *ngIf="myVar"
    [anInput]="myVar.otherVal"
    (anOutput)="myFunc(myVar)"
></some-component>

And the owning component class contains

    public myVar?: {otherVal: number};
    public myFunc(aDefinedVal: {otherVal: number}) {}

The type checker will correctly know that myVar.otherVal is a safe operation under strictNullChecks because of the *ngIf, but the checker will incorrectly throw an error on the myFunc(myVar), claiming that myVar is of type {otherVal: number} | undefined which is not assignable to type {otherVal: number} (diagnostic code NG2345).

🌍 Environment

“@angular/common”: “9.0.0-rc.11”, “@angular/compiler”: “9.0.0-rc.11”, “@angular/compiler-cli”: “9.0.0-rc.11”, “@angular/core”: “9.0.0-rc.11”,

Compiled using Bazel and --define=angular_ivy_enabled=True

[DavidANeil]

I dropped the following test into packages/compiler-cli/test/ngtsc/template_typecheck_spec.ts to verify the issue.

fit('ngIf should narrow on output types', () => {
  env.write('test.ts', `
    import {Component, Directive, NgModule, EventEmitter, Output} from '@angular/core';

    @Component({
      selector: 'test',
      template: '<div *ngIf="prop" dir (foo)="func(prop)"></div>',
    })
    class TestCmp {
      prop?: string
      func(str: string) {}
    }

    @Directive({selector: '[dir]'})
    class TestDir {
      @Output() foo: EventEmitter<void>;
    }

    @NgModule({
      declarations: [TestCmp, TestDir],
    })
    class Module {}
  `);
  env.tsconfig(
    {fullTemplateTypeCheck: true, strictOutputEventTypes: true});
  const diags = env.driveDiagnostics();
  expect(diags.length).toBe(0);
  // console.error(diags[0].messageText);
});

The issue happens both with and without strictOutputEventTypes

[JoostK]

Hi @DavidANeil, thanks for the report and the testcase! I have a PR that implements Alex’s proposal to repeat the template guards within the event handlers, so their narrowing effect will be in effect.