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

Answer 1

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

Answer 2

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.

Answer 3

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 4

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