Topic: Mdb-Select doesn't work after build
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.)
<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"
}
}
}
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
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