Cannot combine @Input decorators with query decorators using Ivy

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


I've had had the same error on a project, and I found that the version of ng-bootstrap in my package.json was 3.0.0 and angular version was 8.0.

I upgraded the ng-bootstrap library to 5.0.0 and the issue resolved.

So in essence, it was due to library mismatch versions, you may also search in this direction...


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.


I had a similar issue and the only way I could get my Angular App running was to disable the offending code in the bootstrap library.

I commented out the references to the ratings module:- NgbRatingModule in the node_modules/@ng-bootstrap/ng-bootstrap/index.js file.

@Obaid Above is probably right, but I couldn't find the conflict.