Topic: Mdb4 angular 12 error
Expected behavior
angular app run without error
Actual behavior
getting error while running app.
My dependencies and error thrown while running the app:
(check screenshots)
Resources (screenshots, code snippets etc.)
I think this problem may be caused by the bootstrap dependency. You installed version 5.3.3 but MDB4 Angular package does not support Bootstrap v5. You don't need to install this dependency separately because we already include Bootstrap 4 files in our build.
Aroquiassamy LA ROZE priority commented 9 hours ago
I created a new app and i installed "only" mdbootstrap angular 4 and included the imports in styles.scss
without variables-pro and skins-pro it is working fine. @import 'ng-uikit-pro-standard/assets/scss/core/mixins';@import 'ng-uikit-pro-standard/assets/scss/core/colors';@import 'ng-uikit-pro-standard/assets/scss/core/variables';// @import 'ng-uikit-pro-standard/assets/scss/core/variables-pro';// @import 'ng-uikit-pro-standard/assets/scss/core/msc/skins-pro';
If i included the above two imports then I get the following error:
../src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):SassError: Undefined function. ╷36 │ $btn-floating-width-sm: math.div($btn-floating-width, 1.3) !default; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\ng-uikit-pro-standard\assets\scss\core_variables-pro.scss 36:25 @import src\styles.scss 7:9
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB4 12.0.0
- Device: pc
- Browser: chrome
- OS: windows 11
- Provided sample code: No
- Provided link: No
Aroquiassamy LA ROZE priority commented 5 days ago
here is my devdependencies: "devDependencies": { "@angular-devkit/build-angular": "~12.0.5", "@angular/cli": "~12.0.5", "@angular/compiler-cli": "~12.0.5", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "jasmine-core": "~3.7.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.5.0", "typescript": "~4.2.3" }
Arkadiusz Idzikowski staff commented 3 days ago
Could you please edit your post and provide more details about the error message? I think the screenshots were not attached correctly.
Aroquiassamy LA ROZE priority commented 3 days ago
Global Angular cli: 9.1.9 Node: 18.10.0 OS: win32 x64
"dependencies": { "@angular/animations": "~12.0.5", "@angular/cdk": "^12.0.5", "@angular/common": "~12.0.5", "@angular/compiler": "~12.0.5", "@angular/core": "~12.0.5", "@angular/forms": "~12.0.5", "@angular/platform-browser": "~12.0.5", "@angular/platform-browser-dynamic": "~12.0.5", "@angular/router": "~12.0.5", "@fortawesome/fontawesome-free": "^6.5.1", "animate.css": "^3.7.2", "bootstrap": "^5.3.3", "chart.js": "^2.5.0", "easy-pie-chart": "^2.1.7", "hammerjs": "^2.0.8", "ng-uikit-pro-standard": "git+https://oauth2:a-sx91xzBdWS5njRWmQS@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git#12.0.0", "rxjs": "~6.6.0", "screenfull": "^3.3.0", "tslib": "^2.6.2", "zone.js": "~0.11.8" }, "devDependencies": { "@angular-devkit/build-angular": "~12.0.5", "@angular/cli": "~12.0.5", "@angular/compiler-cli": "~12.0.5", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "jasmine-core": "~3.7.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.5.0", "typescript": "~4.2.3" } Error: ./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined function. ╷ 36 │ $btn-floating-width-sm: math.div($btn-floating-width, 1.3) !default; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\ng-uikit-pro-standard\assets\scss\core_variables-pro.scss 36:25 @import src\styles.scss 3:9 root stylesheet at processResult (D:\Team\manisir\ANG12\cpanel12\node_modules\webpack\lib\NormalModule.js:701:19) at D:\Team\manisir\ANG12\cpanel12\node_modules\webpack\lib\NormalModule.js:807:5 at D:\Team\manisir\ANG12\cpanel12\node_modules\loader-runner\lib\LoaderRunner.js:400:11 at D:\Team\manisir\ANG12\cpanel12\node_modules\loader-runner\lib\LoaderRunner.js:252:18 at context.callback (D:\Team\manisir\ANG12\cpanel12\node_modules\loader-runner\lib\LoaderRunner.js:124:13) at Worker. (D:\Team\manisir\ANG12\cpanel12\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:134:25) at Worker.emit (events.js:315:20) at MessagePort. (internal/worker.js:207:53) at MessagePort.[nodejs.internal.kHybridDispatch] (internal/event_target.js:354:41)