更新 Angular 后收到“不匹配的伪类：lang”答案

【问题标题】：Receiving "unmatched pseudo-class :lang" after updating Angular更新 Angular 后收到“不匹配的伪类：lang”
【发布时间】：2021-08-07 09:50:23
【问题描述】：

更新节点后，我开始收到以下错误：

custom-file-input:lang(en)~.custom-file-label -> 不匹配的伪类:lang

我不明白问题是什么。我该如何解决这个错误？我安装了节点 14.X。

【问题讨论】：

您是否在 Angular 应用程序中使用任何第三方 CSS 库，例如 Twitter Bootstrap？还是可能生成 CSS 的 JavaScript 组件？还是您的所有 CSS 都是您（或您的团队）创建的？
另外，你的标题说你升级了 Angular，但你的正文说你升级了节点。你两个都升级了吗？您是否将其隔离到节点或 Angular？如果您升级了 Angular，您从哪个版本升级到哪个版本？这些信息将帮助未来的读者了解他们是否有同样的问题。

【解决方案1】：

在不久前将我的项目从 Angular 11 更新到 12 之后，我今天第一次进行了生产构建。我注意到了"unmatched pseudo-class :lang" -警告，并在 mdboostrap.com 上找到了一个关于该主题的线程。一位工作人员推荐了这个解决方案：

在 angular.json 中将 "optimization":true 替换为：

"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": false
  },
  "fonts": true
}

我不确定这是做什么的，但它为我消除了警告。

【讨论】：

【解决方案2】：

我将本地版本的 Bootstrap 4.0.0 保存在 css 目录中，通过从文件中删除它来解决它（不是最佳做法，但为我解决了警告）

.custom-file-input:lang(en)~.custom-file-label::after{content:"Browse"}

【讨论】：

【解决方案3】：

当我们将应用程序升级到 Angular 12 时，我们也收到了同样的错误（Angular 12 with Bootstrap 4）。

我团队的 UI 开发人员通过覆盖引导选择器解决了这个错误，如下所示：

$custom-file-text: ();

这段代码放到_bootstrap.scss文件中。

我希望这个提示对你有所帮助。

【讨论】：

【解决方案4】：

这可能是因为 :lang() 选择器在这个新版本的 Angular 中被弃用了，你可以试试这个：

[lang="en"] {
    // Your code
}

[lang="fr"] {
    // Your code
}

【讨论】：

值得注意的是，编写 CSS 的 CSS 库或 JavaScript 组件可能也在使用遗留的伪类，并且可能需要更新。正如@dmitry-kholodov 所指出的，例如，这个问题可能会出现在 Twitter Bootstrap 4 中，并且可以通过升级到 Twitter Bootstrap 5 的 beta 来解决。显然，如果你没有编写所有的库，则可能需要评估每个库。 CSS。
有人可以提供有关何时/为什么发生这种情况的参考吗？我在网上找不到任何关于它的信息。

【解决方案5】：

使用 bootstrap 5.x 修复 Angular 12。

【讨论】：

【解决方案6】：

在将节点升级到 v12 和 Angular 从 11 升级到 12 后，我有同样的警告。经过一番挖掘，我在 Bootstrap v4.6.0 中找到了:lang(en)。因为这不是错误而是警告，我将忽略它.但摆脱它的唯一方法是等待 Bootstrap 升级。

【讨论】：