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

【问题标题】：Cannot combine @Input decorators with query decorators using Ivy无法使用 Ivy 将 @Input 装饰器与查询装饰器结合使用
【发布时间】：2021-05-09 11:00:16
【问题描述】：

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

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

不能将@Input 装饰器与查询装饰器结合起来

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

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

入口点“angular-tree-component”中的警告包含深度导入进入'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'。这可能不是问题，但可能会导致入口点的编译是乱序的。

有什么想法吗？

【问题讨论】：

标签： angular angular-ivy angular-tree-component

【解决方案1】：

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

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

【讨论】：

这是否意味着我不允许这样做：@Input() resolution: string = '640x480'; @ViewChild('livepreview', { static: true }) livepreview: ElementRef;？如果不是 this ，它可能来自 3rd 方库
你不能这样做：@Input() @ViewChild(...) value.
好吧，这似乎很明显，在我的情况下，这是两个不同的变量，所以问题可能来自第 3 方库。
在带有 3rd 方库的大型应用程序中几乎找不到该错误。
我搜索了我的整个应用程序中没有使用 @Input 但仍然出现此错误的每个地方。帮助！

【解决方案2】：

我在一个项目中遇到了同样的错误，我发现我的 package.json 中的 ng-bootstrap 版本是 3.0.0 和 angular版本是 8.0。

我将 ng-bootstrap 库升级到 5.0.0 并解决了问题。

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

【讨论】：

【解决方案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;
  }
}

【讨论】：

【解决方案4】：

我有一个类似的问题，我可以让我的 Angular 应用程序运行的唯一方法是禁用引导库中的违规代码。

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

@Obaid 上面可能是对的，但我找不到冲突。

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

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

【讨论】：