Topic: [Pro. user question] Angular 12.2.8 and ng-uikit-pro-standard.git#12.0.0 have `ng build` issue that makes page responsive not working.

axa priority asked 2 years ago


I was exhausted to figure out the ng build --configuration production issue over the weekend. It worked with ng serve command but not ng build which made web page responsive didn't work, as (presuming) @angular-devkit/build-angular": "~12.2.8") failed to handle bootstrap css during ng build process.

To reproduce this issue, you can simply to run ng new my-app to generate a very simple Angular 12 app, and then install ng-uikit-pro-standard.git#12.0.0 with npm install command, Once you got ng-uikit-pro-standard.git#12.0.0 installed, follow the official installation doc to load MDBBootstrapModulesPro in app.modules.ts, then you can run ng build --configuration production to build this simple app. Finally, use http-server to start you built app in your dist/ folder, then you can notice the responsive doesn't work.

My workaround for now is to downgrade Angular to 11.2.14 and downgrade ng-uikit-pro-standard.git to 11.1.0 and using "@angular-devkit/build-angular": "0.1102.14" for building.

Below is my package.json file.

{
  "name": "my-awesome-guest",
  "version": "11.2.14",
  "scripts": {
    "ng": "ng",
    "start": "node version.ts && ng serve",
    "build": "node version.ts && ng build --configuration=production",
    "build-canary": "node version.ts && ng build --prod --configuration=canary",
    "test": "ng test --watch false",
    "lint": "ng lint",
    "build:all": "node version.ts && ng build --prod && ng run my-awesome-guest:server && npm run webpack:prerender && npm run prerender",
    "serve:prerender": "http-server dist -c-1",
    "webpack:prerender": "webpack --config webpack.prerender.config.js",
    "prerender": "node dist/prerender.js",
    "replace-endpoint-version": "node replace-endpoint-service-version.js",
    "make-link-dispatch-yaml": "node make-link-dispatch-yaml.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.2.14",
    "@angular/cdk": "^11.2.13",
    "@angular/common": "^11.2.14",
    "@angular/compiler": "^11.2.14",
    "@angular/core": "^11.2.14",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "^11.2.14",
    "@angular/platform-browser": "^11.2.14",
    "@angular/platform-browser-dynamic": "^11.2.14",
    "@angular/platform-server": "^11.2.14",
    "@angular/pwa": "0.1102.14",
    "@angular/router": "^11.2.14",
    "@angular/service-worker": "^11.2.14",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@types/chart.js": "^2.9.34",
    "@types/jquery": "^3.5.6",
    "@types/lodash": "^4.14.175",
    "@types/moment": "^2.13.0",
    "angular-calendar": "^0.28.28",
    "animate.css": "^4.1.1",
    "chart.js": "^2.5.0",
    "core-js": "^3.18.1",
    "create-symlink": "^1.0.0",
    "del": "6.0.x",
    "delete": "^1.1.0",
    "easy-pie-chart": "^2.1.7",
    "firebase": "^8.10.0",
    "font-awesome": "4.7.x",
    "fs-extra": "^10.0.0",
    "git-describe": "^4.1.0",
    "git-rev-sync": "^3.0.1",
    "hammerjs": "^2.0.8",
    "jarallax": "^1.12.7",
    "jquery": "^3.6.0",
    "lodash": "^4.17.21",
    "mini-css-extract-plugin": "^2.3.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.33",
    "ng-html-util": "3.0.x",
    "ng-uikit-pro-standard": "git+https://oauth2:[YOUR_PRO_ACCESS_TOKEN]@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git#11.1.0",
    "ngx-device-detector": "^2.1.1",
    "replace-in-file": "^6.2.0",
    "rxjs": "^6.6.0",
    "rxjs-compat": "^6.6.0",
    "screenfull": "^3.3.0",
    "web-animations-js": "2.3.x",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.1102.14",
    "@angular/cli": "~11.2.14",
    "@angular/compiler-cli": "^11.2.14",
    "@types/chance": "^1.1.3",
    "@types/jasmine": "~3.8.0",
    "@types/node": "~16.10.2",
    "chance": "^1.1.8",
    "concat": "^1.0.3",
    "firebase-tools": "^8.10.0",
    "fs-extra": "^10.0.0",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "ts-loader": "^9.2.6",
    "ts-node": "~10.2.1",
    "tslint": "~6.1.3",
    "typescript": "~4.1.6",
    "ws": "^8.2.2"
  }
}

Arkadiusz Idzikowski staff answered 2 years ago


It looks like the problem is caused by the new version of Angular CLI (specifically by inlineCritical option that is set to true by default in Angular 12). Please disable the inlineCritical option in angular.json configuration:

https://angular.io/guide/workspace-config#optimization-configuration

You can also try other workaround and add these styles to the styles.scss:

body {
  min-width: 0 !important;
}

axa priority commented 2 years ago

Thank you so much! It works like a charm !



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB4 12.0.0
  • Device: laptop
  • Browser: chrome
  • OS: macos
  • Provided sample code: Yes
  • Provided link: No