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

Question

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.

Answer 1

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

Answer 2

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
}

Answer 3

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.