Cannot combine @Input decorators with query decorators using Ivy

Question

I have migrated my angular 7 app to 8.0.0 and i'am now trying the new compiler ivy.

The app works perfectly without ivy but when i try to compile with it i have the following error :

Cannot combine @Input decorators with query decorators

No line number , no file , nothing ... hard to debug anything.

I have warning just before that , but i don't know if it's related :

WARNING in Entry point 'angular-tree-component' contains deep imports into 'lodash/defaultsDeep', 'lodash/get', 'lodash/omit', 'lodash/isNumber', 'lodash/first', 'lodash/last', 'lodash/some', 'lodash/every', 'lodash/compact', 'lodash/find', 'lodash/isString', 'lodash/isFunction', 'lodash/throttle', 'lodash/includes', 'lodash/pick'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

Any ideas ?

Answer 1

The problem is that somewhere in your application you're using the @Input decorator together with one of the query decorators (@ContentChild, @ContentChildren, @ViewChild, @ViewChildren, @Query). This combination of decorators actually makes no sense and may prevent the compiler from correctly analyzing your code, therefore you get the error Cannot combine @Input decorators with query decorators.

Look through your code and remove every @Input decorator from members which have a query decorator applied. Also, you might check if all of your 3rd party libraries are compatible with angular 8.0.0.

Answer 2

Upgrading to Angular 9 I got the same error, the responsible code of this error, for me, was the following:

@Input() @ContentChild(Component) actions: Component;

The problem is that I can't combine @Input() and @ContentChild, so I replaced the code responsible of the error with the following:

get actions(): Component {
  return this._actions;
}

private _actions: Component;

@Input()
set actions(value: Component) {
  this._actions = value;
}

@ContentChildren(Component)
set viewActions(value: Component) {
  if (!this._actions && value) {
    this._actions = value;
  }
}