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.
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 3 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;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB4 12.0.0
- Device: laptop
- Browser: chrome
- OS: macos
- Provided sample code: No
- Provided link: No