1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Mdb-Select doesn't work after build

junior5417 pro asked 3 years ago

Expected behavior mdb-select should work nicely after build

Actual behavior My angular application return an error ERROR TypeError: Cannot read property 'optionHeight' of undefined. This error only occurs in application that is build by ng serve --prod and ng build --aot --prod. Similar case: https://mdbootstrap.com/support/angular/mdb-select-doesnt-work-after-build/

Resources (screenshots, code snippets etc.)enter image description here

<mdb-select class="remove-focus pl-2" formControlName="productWeightOption" [options]="productWeightOption"
          placeholder="g" [(ngModel)]="selectedProductNetWeight">
        </mdb-select>

productWeightOption = [
{ label: 'g', value: 'g', id: 1 },
{ label: 'kg', value: 'kg', id: 2 }];

Package.json

{
  "name": "mdb-angular-pro",
  "version": "6.0.2",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "^6.0.0-rc.1",
    "@angular/cdk": "^6.3.2",
    "@angular/common": "^6.0.0-rc.1",
    "@angular/compiler": "^6.0.0-rc.1",
    "@angular/core": "^6.0.0-rc.1",
    "@angular/fire": "^5.1.3",
    "@angular/flex-layout": "^6.0.0-beta.16",
    "@angular/forms": "^6.0.0-rc.1",
    "@angular/http": "^6.0.0-rc.1",
    "@angular/material": "^6.3.2",
    "@angular/platform-browser": "^6.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^6.0.0-rc.1",
    "@angular/router": "^6.0.0-rc.1",
    "@fortawesome/fontawesome-free": "^5.7.2",
    "@types/lodash": "^4.14.116",
    "chart.js": "2.5.x",
    "chartjs-funnel": "^1.0.5",
    "classlist.js": "^1.1.20150312",
    "core-js": "2.4.x",
    "export-to-csv": "^0.2.1",
    "firebase": "^5.9.3",
    "hammerjs": "2.0.x",
    "intl": "^1.2.5",
    "lodash": "^4.17.11",
    "masonry-layout": "^4.2.2",
    "moment": "^2.22.2",
    "mydatepicker": "^2.6.6",
    "mydaterangepicker": "^4.2.1",
    "ng-click-outside": "^4.0.0",
    "ng-lazyload-image": "^5.1.2",
    "ng-simple-slideshow": "^1.2.9",
    "ng-uikit-pro-standard": "git+https://oauth2:xxxxxx@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git#7.4.4",
    "ng2-ckeditor": "^1.2.2",
    "ng5-slider": "^1.2.1",
    "ngx-countdown": "^3.2.0",
    "ngx-facebook": "^2.4.0",
    "ngx-infinite-scroll": "^6.0.0",
    "ngx-masonry": "^1.1.4",
    "ngx-moment": "^3.1.0",
    "request": "^2.88.2",
    "rxjs": "^6.0.0-rc.1",
    "rxjs-compat": "^6.0.0-rc.1",
    "screenfull": "3.3.x",
    "smoothscroll-polyfill": "0.3.x",
    "web-animations-js": "^2.3.1",
    "xlsx": "^0.15.6",
    "zone.js": "0.8.x"
  },
  "devDependencies": {
    "@angular/cli": "^6.0.0-rc.1",
    "@angular/compiler-cli": "^6.0.0-rc.1",
    "@angular/language-service": "^6.0.0-rc.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.85",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.9.1",
    "@angular-devkit/build-angular": "~0.5.0"
  },
  "browser": {
    "crypto": false,
    "http": false,
    "https": false,
    "net": false,
    "path": false,
    "stream": false,
    "tls": false,
    "fs": false,
    "zlib": false
  }
}

Angular.json

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "mdb-angular-pro": {
      "root": "",
      "projectType": "application",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/mdb-angular-pro",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ],
            "styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
              "src/styles.scss"
            ],
            "scripts": [
              {
                "input": "node_modules/chart.js/dist/Chart.js"
              },
              {
                "input": "node_modules/screenfull/dist/screenfull.js"
              },
              {
                "input": "node_modules/hammerjs/hammer.min.js"
              }
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "mdb-angular-pro:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "mdb-angular-pro:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "mdb-angular-pro:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              {
                "input": "styles.scss"
              }
            ],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "mdb-angular-pro-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "mdb-angular-pro:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }
}

Arkadiusz Idzikowski staff commented 3 years ago

@junior5417 We tried to reproduce this problem on our end using your code and mentioned commands, but the application was built correctly without any errors. Do you use v7.4.4?

junior5417 pro commented 3 years ago

Ya, im using version 7.4.4. My mdb-select is within a pop up by modal service, not sure that will help on reproducing the scenario or not.

Can you send me your code and I have a look?

Arkadiusz Idzikowski staff commented 3 years ago

@junior5417 We created a new Angular application and used the code that you included in the first post to render select component (we only added selectedProductNetWeight='g' variable because it was missing). Can you check if the problem also occurs if you try to use select outside of the modal?

Please edit your first post and add more information about your project configuration (package.json, angular.json) so we can try to reproduce the problem using the same settings.

junior5417 pro commented 3 years ago

@Arkadiusz Idzikowski I have added my project configuration package.json and angular json on my first post.

I also tested mdb-select outside of modal, it doesn't work as well. While you check on the project configuration, can you send me your project that is working without any issue? Maybe I will get some idea from your project.

Arkadiusz Idzikowski staff commented 3 years ago

@junior5417 We tested that on our internal development repository, we don't have new configured projects that we could share.

It looks like you use version 6 of Angular. MDB Angular 7.x.x is compatible only with Angular 7 and using different Angular versions may cause many problems. Please update your projects dependencies using the official guide: https://update.angular.io/?v=6.0-7.0
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Opened

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.4
  • Device: Mac
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: Yes
Tags
mdb-select
About author
junior5417
Pro User 261Support score
21Questions 19Answers 0Snippets