'Receiving "unmatched pseudo-class :lang" after updating Angular

After updating node, I started receiving the following error:

custom-file-input:lang(en)~.custom-file-label -> unmatched pseudo-class :lang

I am not understanding what the issue is. How can I sort out this error? I installed node 14.X.

cssnode.jsangular


Solution 1:[1]

That is probably due to the fact that the :lang() selector is deprecated in this new version of Angular, you could try this instead:

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

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

Solution 2:[2]

I have the same warning after upgrading node to v12 and Angular from 11 to 12. After some digging I found :lang(en) in Bootstrap v4.6.0.. Since it is not an error but a warning I am going to ignore it. But the only way to rid off of it is to wait for Bootstrap upgrade.

Solution 3:[3]

When we upgrade our application to Angular 12 we recived the same error (Angular 12 with Bootstrap 4) also.

UI developer from my team solved this error by override bootstrap selector like below:

$custom-file-text: ();

This code put to _bootstrap.scss file.

I hope this hint helps you.

Solution 4:[4]

Fixed with bootstrap 5.x for angular 12.

Solution 5:[5]

After updating my project from Angular 11 to 12 a while ago, I did a build for production for the first time today. I notized the "unmatched pseudo-class :lang" -warning, and found a thread on the subject at mdboostrap.com. One of the staff members recommended this solution:

In angular.json replace "optimization":true with this:

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

I am not sure exactly what this does, but it removed the warning for me.

Angular 12 production build warning (MDB4 12) - Material Design for Bootstrap

Solution 6:[6]

use $custom-file-text: (); before import bootstrap

$custom-file-text: (); // --> Warning: 1 rules skipped due to selector errors: .custom-file-input:lang(en) ~ .custom-file-label -> unmatched pseudo-class :lang
@import "~bootstrap/scss/bootstrap";

Solution 7:[7]

I had local version of Bootstrap 4.0.0 save in css directory, resolved it by removing it from the file (Not the best practice but resolved the warning for me)

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Boppity Bop
Solution 3 marianciu
Solution 4 Kévin GERVAIS
Solution 5 Jette
Solution 6 OMANSAK
Solution 7 Zain Zafar

Related Questions