Topic: Mdb4 angular 12 error

Aroquiassamy LA ROZE priority asked 2 months ago


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.) dependencies and error


Aroquiassamy LA ROZE priority commented 2 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 1 month 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 1 month 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)


Arkadiusz Idzikowski staff answered 1 month ago


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 1 month 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 1 month 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).



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • 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