Angular 12 production build warning (MDB4 12)


Topic: Angular 12 production build warning (MDB4 12)

akrolis pro asked 9 months ago

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 pro commented 9 months 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 9 months 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 9 months 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 9 months ago

@akrolis Thank you, we will do a few more test and let you know what we found.


fanny111 premium commented 9 months ago

I am having the same exact issue


Arkadiusz Idzikowski staff answered 9 months ago

@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 premium commented 8 months 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 8 months 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 premium commented 8 months ago

Thank you!!! -closed


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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