Angular 12 production build breaking styles

[oobayly]

When building using ng build --prod, or the new ng build --configuration production, a style tag is addded to the head element that forces the body min-width to be 992px!important, and completely breaks the responsive layout.

In an attempt to identify the culprit, I removed styles from angular.json until the min-width wasn't added, and found that node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss was the cause.

Expected behavior

The CSS should render the same as when built without the --prod flag.

Actual behavior

The following CSS is injected into the head, breaking the page. Note the body{min-width:992px!important;} at the end.

@charset "UTF-8";:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}*,:after,:before{box-sizing:border-box;}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff;}@page {size:a3;}body{min-width:992px!important;}

Your working environment and MDB version information

• angular-bootstrap-md - 11.1.0
• angular - 12.0.4

Resources (screenshots, code snippets etc.)

package.json

  "dependencies": {
    "@angular/animations": "~12.0.4",
    "@angular/cdk": "^11.2.13",
    "@angular/common": "~12.0.4",
    "@angular/compiler": "~12.0.4",
    "@angular/core": "~12.0.4",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "~12.0.4",
    "@angular/localize": "^12.0.4",
    "@angular/platform-browser": "~12.0.4",
    "@angular/platform-browser-dynamic": "~12.0.4",
    "@angular/router": "~12.0.4",
    "@angular/service-worker": "~12.0.4",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@types/uuid": "^8.3.0",
    "@zxing/browser": "0.0.9",
    "@zxing/library": "^0.18.6",
    "@zxing/ngx-scanner": "^3.1.3",
    "angular-bootstrap-md": "^11.1.0",
    "angularx-qrcode": "^11.0.0",
    "animate.css": "^4.1.1",
    "eslint": "^7.28.0",
    "firebase": "^8.3.3",
    "hammerjs": "^2.0.8",
    "rxjs": "^7.1.0",
    "tslib": "^2.3.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.11.4"
  },

[lucas-vidmar]

Did you fix it?

[42plamusse]

We have the same issue with Angular 11 and "angular-bootstrap-md": "11.0.0".

Adding min-width: 0!important; to the body tag in your main css file fixes it.

[Zahen]

@42plamusse, min-width: 0!important; does not work for me

Angular 12 MDBootstrap 11

[42plamusse]

@Zahen I have very little experience in angular, but I have been through our code and found out that the main style.css is added after the bootstrap one in the angular.json file.

            "styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
              "node_modules/animate.css/animate.css",
              "node_modules/flag-icon-css/css/flag-icon.min.css",
              "node_modules/video.js/dist/video-js.min.css",
              "src/styles.scss",
              "src/assets/fonts/customfonts.css",
              "src/toastr.css"
            ],

Is there any chance that yours is added before ? The !important flag could be overwritten by bootstrap's one.

[Zahen]

@42plamusse, thank you for your response.

No, I have my styles.scss at the end of the section:

"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
"node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
"node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
"node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
"node_modules/animate.css/animate.css",
"node_modules/angular2-toaster/toaster.css",
"node_modules/@ng-select/ng-select/themes/material.theme.css",
"node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"projects/app/src/styles.scss"

I think that this is a problem with Angular 12 compilation....

[anna-Kop]

I have the same problem with Angular 12 and ng-uikit-pro-standard. I have not added the mdb-styles in my angular.json or anywhere else either, but still I get these styles injected into the head tag. Why is that?

The min-width: 0!important; helped me, but I would rather not have these styles in the head tag at all. Is there a way to get them removed?

[Lorelei]

@anna-Kop it can be removed with setting inlineCritical: false in angular.json "optimization": { "scripts": true, "fonts": { "inline": true }, "styles": { "minify": true, "inlineCritical": false } },

[MC-Spraint]

This thing was bothering me for so long and I couldn't even find the reason as to why my responeive website loses it's responsiveness on production mode...then I was going through the index.html code to again find out what went wrong and I saw this culprit..I changed it to 134 px then everything satrted working fine

[oobayly]

Appologies, for some reason I didn't see the notifiations that there were a bunch of responses to this issue.

@42plamusse - I used your fix, except that I used min-width: initial!important in the body element which works for me.

Edit: @Lorelei I vaguely remember seeing that fix, but opted for the inline style as I felt I understood that fix better!

[NautilusDev]

I had the same problem with Angular 12 and Bootstrap 4.4.1

To fix it, you only need update Bootstrap to v4.6.2

[csimpi]

Same result for me, even with bootstrap 5