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中），尚未适应Angular9。删除[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

我遇到了一个问题，我必须跟踪大规模应用程序（如ikes）上的double类。 vs代码中的这个正则表达式帮助了很多人。

启用正则表达式的搜索：

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

我不确定要如何处理出现在可变行上的类，因此我只是在第二个[^>\r\n]*(\r\n|\r|\n)关键字之前添加了class的另一个迭代。

希望它对其他人有帮助！

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

4 个答案: