为什么 aot 编译器不会因缺少属性而出错？

Question

使用以下代码：

模板

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

组件

export class MyComponent {

  public state = 0;

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

}

ng build --aot 构建，但如果您取消注释模板中的第二行，您预计会得到

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

为什么ng-container里面的<button (click)="foo()">foo()</button>不报错？

在你建议之前：

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

将呈现为

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

但我只需要

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

还有其他方法可以解决这个问题，但问题是在制作 bug 或 feat 之前要有基本的了解。

Answer 1

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

你试过这个吗：https://angular.io/guide/aot-compiler#fulltemplatetypecheck？

看来此 AOT 设置（当前）默认处于非活动状态。

奖金：

另请参阅编译器 github 中有关绑定表达式的部分：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

这个阶段会抛出错误'Property X does not exist on type Y'，验证的详细程度可以通过编译器参数调整，比如前面提到的参数'fulltemplatetypecheck'.

Answer 2

这是我的评论：

AoT 预先编译模板，并正在寻找要生成的绑定。另一方面，将它放在 ng-container 中是一件特殊的事情，因为 ng-container 在被调用之前不会被解释和编译。

查看这篇文章：

https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

我尝试在其中搜索更多信息，然后我回到了您关于 Angular 问题的第一条评论：

来自此线程 https://github.com/angular/angular/issues/20287 to this issue linked : https://github.com/angular/angular/issues/19792。

这似乎是一个持续存在的错误，所以这意味着应该编译 ng-containers。我想你现在无能为力了！

为什么 aot 编译器不会因缺少属性而出错？

Why won't aot compiler error on missing property?

angular

angular-aot

奖金：

为什么 aot 编译器不会因缺少 属性 而出错？

Why won't aot compiler error on missing property?

angular

angular-aot

奖金：

为什么 aot 编译器不会因缺少属性而出错？