无法使用 Ivy 将 @Input 装饰器与查询装饰器结合使用

Question

我已经将我的 angular 7 应用程序迁移到 8.0.0，我现在正在尝试新的编译器 ivy。

该应用程序在没有 ivy 的情况下可以完美运行，但是当我尝试使用它进行编译时出现以下错误：

Cannot combine @Input decorators with query decorators

没有行号，没有文件，什么都没有...很难调试任何东西。

在那之前我有警告，但我不知道它是否相关：

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.

有什么想法吗？

Answer 1

问题是您在应用程序的某处将 @Input 装饰器与其中一个查询装饰器（@ContentChild、@ContentChildren、@ViewChild、 @ViewChildren、@Query）。这种装饰器组合实际上没有任何意义，可能会阻止编译器正确分析您的代码，因此您会收到错误 Cannot combine @Input decorators with query decorators.

查看您的代码并从应用了查询装饰器的成员中删除每个 @Input 装饰器。此外，您可能会检查所有第 3 方库是否与 angular 8.0.0.

兼容

Answer 2

我在一个项目中遇到过同样的错误，我发现我的[=]中的ng-bootstrap版本20=] 是 3.0.0，angular 版本是 8.0.

我将 ng-bootstrap 库升级到 5.0.0，问题已解决。

所以本质上是库版本不匹配，你也可以往这个方向搜索...

Answer 3

升级到Angular 9 我得到了同样的错误，这个错误的责任代码，对我来说，如下：

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

问题是我不能结合@Input()和@ContentChild，所以我用以下代码替换了导致错误的代码：

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

Answer 4

我遇到了类似的问题，获得 Angular 应用程序运行的唯一方法是禁用 bootstrap 库中的违规代码。

我注释掉了对评级模块的引用：- NgbRatingModule 在 node_modules/ @ng-bootstrap/ng-bootstrap/index.js 文件.

@Obaid 上面说的应该是对的，但是没找到冲突

Answer 5

我的问题是我错误地放置了多个查询装饰器，如下所示

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

所以问题只能通过删除一个装饰器来解决。

Answer 6

我在将我的项目从 angular v8 更新到 angular v11 时遇到了同样的问题。如果是这种情况，很可能是您激活了 --force 标志。我的建议是你不要。您检查它向您显示的警告并一一解决。基本上警告意味着第三方库的更新。

无法使用 Ivy 将 @Input 装饰器与查询装饰器结合使用

Cannot combine @Input decorators with query decorators using Ivy

angular

angular-ivy

angular-tree-component