Angular 6 compilation error when using AOT

Question

I am forced to use AOT recently and in production a template is not compiled properly. When I try on a blank project, it works great but in my giant application there is an issue.

Something like this:

@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;
  }
}

is compiled as

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); }

However, in my giant application, it is compiled like this:

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); }

By analyzing a little more, I see that this container is treated as an anchorDef (ɵand) instead of a queryDef (ɵqud). What could cause this error? How can I research further to find why an anchorDef is output in this case.

score 0 · Answer 1 · answered Jun 15 '18 at 22:33

After searching for a long time, I figured out that the problem came from an export missing on a hierarchy class. Such as this:

/*export*/ class DynamicComponentBase {
  @ViewChild('container', { read: ViewContainerRef })
  container: ViewContainerRef;
}

@Component({
  selector: 'tn-dynamic',
  template: `<ng-template #container></ng-template>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DynamicComponent extends DynamicComponentBase {
}

By adding the export, the compiler creates the right thing.

I have opened a bug on the Angular team.

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

Angular 6 compilation error when using AOT

1 Answers1