CODEWITHSUNDEEP
angularangular-ivyangular-tree-component
grunk
grunk

Reputation: 14938

Cannot combine @Input decorators with query decorators using Ivy

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 ?

Upvotes: 13

Views: 17282

Answers (6)

Leandro Hernández Mira
Leandro Hernández Mira

Reputation: 837

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.

Upvotes: 0

Shakoor Hussain Attari
Shakoor Hussain Attari

Reputation: 1801

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.

Upvotes: 0

Sydwell
Sydwell

Reputation: 5024

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.

Upvotes: 1

Stefano Borzì
Stefano Borzì

Reputation: 2398

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

Upvotes: 3

Mujadid Mughal
Mujadid Mughal

Reputation: 2663

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

Upvotes: 4

cyr_x
cyr_x

Reputation: 14257

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.

Upvotes: 11

Related Questions