Why won't aot compiler error on missing property?

Question

With the following code:

template

<button (click)="myMethod()">myMethod()</button>
<!-- <button (click)="foo()">foo()</button> -->

<ng-container [ngSwitch]="state">
  <ng-container *ngSwitchCase="0">
    <div></div>
    <button (click)="myMethod()">myMethod()</button>
    <button (click)="foo()">foo()</button><!-- why no error -->
  </ng-container>
  <div *ngSwitchCase="1"></div>
</ng-container>

component

export class MyComponent {

  public state = 0;

  public myMethod(): void {
    // no op
  }

}

ng build --aot builds, but if you uncomment the 2nd line in the template you expectedly get

Property 'foo' does not exist on type 'MyComponent'.

Why does the <button (click)="foo()">foo()</button> inside the ng-container not error?

Before you suggest:

<div *ngSwitchCase="0">
  <div></div>
  <button (click)="myMethod()">myMethod()</button>
  <button (click)="foo()">foo()</button><!-- why no error -->
</div>

that will render as

<div>
  <div></div>
  <button>myMethod()</button>
  <button>foo()</button>
</div>

but I need just

<div></div>
<button>myMethod()</button>
<button>foo()</button>

And there are other ways around this, but the question is for fundamental understanding before making bug or feat.

Answer 1

"Are there any other ways around this...?"

Have you tried this: https://angular.io/guide/aot-compiler#fulltemplatetypecheck ?

It looks like this AOT setting is (currently) inactive by default.

Bonus:

Also see this section at compiler github on binding expressions: https://github.com/angular/angular/blob/master/aio/content/guide/aot-compiler.md#phase-3-binding-expression-validation

The validation uses the TypeScript type checker and the options supplied to the TypeScript compiler to control how detailed the type validation is

The error 'Property X does not exist on type Y' is thrown at this phase, and the level of validation detail is adjustable via compiler parameters, such as the aforementioned parameter 'fulltemplatetypecheck'.