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 ?

score 11 · Accepted Answer · answered Jun 06 '19 at 08:27

11

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.

answered Jun 06 '19 at 08:27

cyr_x

13,987
2
32
46

Does that mean i'am not allowed to do this : `@Input() resolution: string = '640x480'; @ViewChild('livepreview', { static: true }) livepreview: ElementRef;` ? If it's not this , it's probably comming from a 3rd party lib – grunk Jun 06 '19 at 09:53
3

You're not allowed to do: `@Input() @ViewChild(...) value`. – cyr_x Jun 06 '19 at 10:56
Ok that seems obvious , in my case it's two differents variable so the problem is probably coming from 3rd party lib. – grunk Jun 06 '19 at 11:21
8

The error is almost impossible to find in a large application with 3rd party libs. – Piotr Stulinski Jul 05 '19 at 10:21
I search every where @Input is not used in my entire app but still having this error. HELP! – Biswas Khayargoli May 27 '20 at 08:05
Oh my.. I am trying to upgrade a webapp from angular 8 to angular 9 and getting this error. The webapp was running before and I do not have any combination of @Input with other decorators. – Julian Egner Aug 14 '20 at 16:05

score 4 · Answer 2 · answered Nov 21 '19 at 11:05

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

score 3 · Answer 3 · answered Mar 18 '20 at 14:19

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

Sydwell · Answer 4 · 2020-09-09T20:27:11.907

1

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.

edited Sep 09 '20 at 20:27

answered Sep 09 '20 at 20:20

Sydwell

4,954
1
33
36

score 0 · Answer 5 · answered Jan 04 '21 at 16:55

0

My issue was that I mistakenly put multiple query decorator like below

@ViewChild(DataTableDirective, { static: false })
@ViewChild(DataTableDirective, { static: false })

So issue resolved only by removing one decorator.

answered Jan 04 '21 at 16:55

Shakoor Hussain Attari

1,641
13
8

score 0 · Answer 6 · answered May 09 '21 at 03:00

I had the same problem updating my project from angular v8 to angular v11. If this is your case, it is likely that you have activated the --force flag. My advice is that you don't. You check the warnings it shows you and solve them one by one. Basically the warnings mean an update of third party libraries.

Cannot combine @Input decorators with query decorators using Ivy

6 Answers6

Linked

Related