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 3 months 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
Arkadiusz Idzikowski staff commented 3 months ago
Did you follow all the steps from our installation guide during installation? You can find it here (npm section, pro tab): https://v4-angular-15.legacydocs.mdbootstrap.com/docs/b4/angular/getting-started/installation/
In case of any further problems, please edit the first and provide more information about your configuration (installed dependencies, styles.scss and angular.json config).
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 3 months 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 months 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 months ago
Global Angular cli: 9.1.9Node: 18.10.0OS: 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://-@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git#12.0.0](https://oauth2:-@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)