更新到版本 9 后出现 Angular 编译器错误

Question

升级到 Angular 9 后，我收到一个奇怪的编译器错误。我已经更新了 4 个项目，3 个没有任何问题，但最后一个抛出了这个错误：

ERROR in Error: [class] and [className] bindings cannot be used on the same element simultaneously
    at StylingBuilder.registerClassInput (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:13564:27)
    at StylingBuilder.registerInputBasedOnName (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:13527:36)
    at StylingBuilder.registerBoundInput (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:13503:36)
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17296:57
    at Array.forEach (<anonymous>)
    at TemplateDefinitionBuilder.visitElement (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17295:28)
    at Element.visit (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:4268:71)
    at visitAll (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:4435:40)
    at TemplateDefinitionBuilder.buildTemplateFunction (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16982:13)
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17558:60
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:81
    at Array.forEach (<anonymous>)
    at TemplateDefinitionBuilder.buildTemplateFunction (C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:37)
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:17558:60
    at C:\Users\kschramm\Documents\arzneimittel-wechsler\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:81
    at Array.forEach (<anonymous>)

我不知道是什么导致了这个错误，有人知道吗？

Answer 1

我检查了我的代码并找到了错误的原因。这是一个带有两个常规类装饰器的 html 元素。只是一个简单的复制问题，但常春藤 似乎不喜欢它：D

Answer 2

在您的项目中搜索每个包含 [class] 和 [className] 的 html 元素。就我而言，它是一个较旧的插件（在 node_modules 中），尚未适应 Angular 9。在我删除 [className] （我不需要它）之后，它运行良好。提示是编译在有错误的插件处停止。

Answer 3

错误很明显，但很难找到它的确切生成位置。

在我的例子中，有问题的模板类似于：

<div class="classA {{ some_object.propertyB }}"
     [class.classC]="some_object.propertyC">

我已将其转换为：

<div class="classA" [ngClass]="{
     'classX': some_condition,
     'classC': some_object.propertyC}">

基本上，我不得不将所有绑定移动到一个 ngClass。

一个可能有用的链接：

• fix(ivy): handling className as an input properly

Answer 4

我遇到了一个问题，我必须在大型应用程序中追踪双重类的发生（哎呀）。 vs-code 中的这个正则表达式帮助了很多。

启用正则表达式搜索：

class=".*".*class  // single line
class=".*"[^>\r\n]*(\r\n|\r|\n)[^>\r\n]*class // class on a new line
class=".*"[^>\r\n]*(\r\n|\r|\n)[^>\r\n]*(\r\n|\r|\n)[^>\r\n]*class // class on the second line away

我不确定处理变量行上出现的类的好方法，所以我只是在第二个 class 关键字之前添加了 [^>\r\n]*(\r\n|\r|\n) 的另一个迭代。

希望对其他人有所帮助！