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
}

Fixed with bootstrap 5.x for angular 12.

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.

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

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.

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"}