Question

我最近被迫使用AOT，在生产中模板编译不正确。当我尝试一个空白项目时，它运行良好，但在我的巨大应用程序中存在一个问题。

这样的事情：

@Component({
  selector: 'app-c3',
  template: '<ng-template #container></ng-template>',
  styleUrls: [],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App3Component {
  _container: ViewContainerRef = null;

  @ViewChild('container', { read: ViewContainerRef })
  set container(value: ViewContainerRef) {
    console.log('set');
    this._container = value;
  }

  get container(): ViewContainerRef {
    return this._container;
  }
}

编译为

function View_App3Component_0(_l) { return _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵvid"](2, [_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵqud"](402653184, 1, { container: 0 }), (_l()(), _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵand"](16777216, [[1, 3], ["container", 2]], null, 0, null, View_App3Component_1))], null, null); }

然而，在我的巨型应用程序中，它编译如下：

function View_DynamicComponent_0(_l) { return _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵvid"](2, [(_l()(), _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵand"](0, [["container", 2]], null, 0, null, View_DynamicComponent_1))], null, null); }

通过分析一点，我看到这个container被视为一个 anchorDef（ɵand）代替queryDef（ɵqud）。什么可能导致此错误？我如何进一步研究以找出在这种情况下输出anchorDef的原因。

Answer 1

在搜索了很长时间后，我发现问题来自层次结构类中的导出缺失。比如这个：

login(user, onsuccess?, onerror?): void {
    let url: string = `${this.BASE_URL}/`;
    this.httpClient.post(url, user, { headers: this.headers }).subscribe(
      response => {
        this.setLogin("test");
        if (onsuccess) {
          onsuccess(response);
        }
      },
      error => {
        this.setLogin("test");
        if (onerror) {
          onerror(error);
        }
      },
    );
  }

通过添加导出，编译器可以创建正确的东西。

我已经在Angular团队中打开了一个错误。

https://github.com/angular/angular/issues/24543

使用AOT

1 个答案: