Topic: Angular 12 production build warning (MDB4 12)
Expected behavior
Upgrading a project from Angular 10 (to Angular 11 and then) to Angular 12 and making a production build.
Actual behavior
After said upgrade, the production build command (ng build --configuration production) show these warnings:
√ Browser application bundle generation complete.
√ Copying assets complete.
- Generating index html...8 rules skipped due to selector errors:
.custom-file-input:lang(en)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(es)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(pl-PL)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(fr)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(in)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(zh)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(de)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(ru)~.custom-file-label -> unmatched pseudo-class :lang
I thought maybe something went wrong with the update so I also tried a fresh instalation on an empty project: https://mdbootstrap.com/docs/angular/getting-started/installation/#npm-installation (pro version)
Same warnings appear for the production build.
Resources (screenshots, code snippets etc.)
Output for ng v command:
@angular-devkit/architect 0.1202.12
@angular-devkit/build-angular 12.2.12
@angular-devkit/core 12.2.12
@angular-devkit/schematics 12.2.12
@schematics/angular 12.2.12
rxjs 6.6.7
typescript 4.3.5
Output for npm ls ng-uikit-pro-standard:
`-- ng-uikit-pro-standard@12.0.0
@akrolis @fanny111It looks like this is caused by @angular/cli and more specifically by inlineCritical option.
Please try to replace optimization: true option in angular.json with:
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
},
I'm afraid we can't do much on our side because these are Bootstrap 4 styles and the compiler incorrectly detects the selector as deprecated. We will keep an eye on this to see if it gets fixed on the Angular side.
If you do not use this component (custom file input) in your applications, this warning should not cause any problems in the final build.
alex737876 pro premium commented 3 years ago
Hello @Arkadiusz Idzikowski,
i do have the same issue. I cannot find "custom-file-input" in my source. How do i know i use it? As i use file inputs a lot Thanks in advance,
Arkadiusz Idzikowski staff commented 3 years ago
@alex737876 If you don't use any elements with custom-file-input class you will not need these styles. This problem is caused by the styles definitions of basic Bootstrap 4 file input and you probably use MDB file upload component which you can find in our documentation: https://mdbootstrap.com/docs/angular/forms/file-input/
alex737876 pro premium commented 3 years ago
Thank you!!! -closed
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB4 12.0.0
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
akrolis pro commented 3 years ago
Nobody else is having this issue? It seems that some or all of these files are the ones triggering the warning:
ng-uikit-pro-standard\assets\scss\bootstrap\mixins_forms.scss
ng-uikit-pro-standard\assets\scss\core\msc_forms.scss
ng-uikit-pro-standard\assets\scss\bootstrap_input-group.scss
ng-uikit-pro-standard\assets\scss\bootstrap_custom-forms.scss
These are the only files in my node_modules folder that contain the custom-file-input and custom-file-label classes.
Arkadiusz Idzikowski staff commented 3 years ago
@akrolis Could you provide some more information about the MDB components that you used in the project? We tried to reproduce that in a new app with MDB configuration but without success.
akrolis pro commented 3 years ago
I tried again with an empty new project and got the same warnings.
In that I only import MDBBootstrapModulesPro and MDBSpinningPreloader in app.module.ts as shown in the docs, not actual MDB components are used.
If in the angular.json I remove the styles imports:
"node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss"
"node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
the warning dissapears.
This is the complete enviroment info (on W10):
Angular CLI: 12.2.13
Node: 14.17.0
Package Manager: npm 6.14.13
OS: win32 ia32
Angular: 12.2.13... animations, cli, common, compiler, compiler-cli, core, forms... platform-browser, platform-browser-dynamic, router
@angular-devkit/architect 0.1202.13
@angular-devkit/build-angular 12.2.13
@angular-devkit/core 12.2.13
@angular-devkit/schematics 12.2.13
@angular/cdk 12.2.12@schematics/angular 12.2.13
rxjs 6.6.7
typescript 4.3.5
Arkadiusz Idzikowski staff commented 3 years ago
@akrolis Thank you, we will do a few more test and let you know what we found.
fanny111 commented 3 years ago
I am having the same exact issue