ERROR in Cannot read property 'length' of undefine

web
mobile

Topic: ERROR in Cannot read property 'length' of undefined

Zaffar pro asked 3 weeks ago

Hi,

i just tried to migrate to Angular 9 and followed the Instruction. But getting this mistake:

ERROR in Cannot read property 'length' of undefined

Here is my package.json:

{
  "name": "erp-frontend",
  "version": "9.0.0",
  "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.5",
    "@angular/animations": "~9.0.6",
    "@angular/cdk": "^9.1.3",
    "@angular/common": "~9.0.6",
    "@angular/compiler": "~9.0.6",
    "@angular/core": "~9.0.6",
    "@angular/forms": "~9.0.6",
    "@angular/platform-browser": "~9.0.6",
    "@angular/platform-browser-dynamic": "~9.0.6",
    "@angular/router": "~9.0.6",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@types/chart.js": "^2.9.15",
    "angular-calendar": "^0.25.2",
    "animate.css": "^3.7.2",
    "chart.js": "^2.5.0",
    "core-js": "^2.5.4",
    "easy-pie-chart": "^2.1.7",
    "hammerjs": "^2.0.8",
    "ng-uikit-pro-standard": "git+https://oauth2:token@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",
    "rxjs": "~6.5.2",
    "screenfull": "^3.3.0",
    "tslib": "^1.10.0",
    "webpack": "^4.41.6",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.6",
    "@angular-devkit/build-ng-packagr": "~0.900.6",
    "@angular-devkit/core": "^9.0.6",
    "@angular-devkit/schematics": "^9.0.6",
    "@angular/cli": "~9.0.6",
    "@angular/compiler-cli": "~9.0.6",
    "@angular/language-service": "~9.0.6",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "^8.7.0",
    "tslint": "~5.11.0",
    "typescript": "~3.7"
  }
}

and my angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ng-admin-free": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "aot": true,
            "outputPath": "dist/ng-admin-free",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "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",
              "node_modules/animate.css/animate.css",
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/chart.js/dist/Chart.js",
              "./node_modules/easy-pie-chart/dist/easypiechart.js",
              "./node_modules/screenfull/dist/screenfull.js",
              "./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,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ng-admin-free:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ng-admin-free:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ng-admin-free: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": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "ng-admin-free-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ng-admin-free:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ng-admin-free:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "ng-admin-free"
}

Konrad Stępień staff commented 3 weeks ago

Can you give more information about this: ERROR in Cannot read property 'length' of undefined ? Try to update "screenfull": "^3.3.0" to latest version.


Zaffar pro commented 3 weeks ago

Yes I did this, but did not help...below you can find the whole error


Zaffar pro commented 3 weeks ago

Yes sure, here is the error (using verbose):

ERROR in Cannot read property 'length' of undefined
Child mini-css-extract-plugin node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!node_modules/postcss-loader/src/index.js??extracted!node_modules/animate.css/animate.css:
                   Asset      Size  Chunks  Chunk Names
    3rdpartylicenses.txt  1.07 KiB
    Entrypoint mini-css-extract-plugin = *
    chunk    {0} * (mini-css-extract-plugin) 55.6 KiB [entry] [rendered]
     [RIJm] ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??extracted!./node_modules/animate.css/animate.css 55.6 KiB {0} [built]
         ModuleConcatenation bailout: Module is not an ECMAScript module
         single entry !!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\raw-css-loader.js!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\postcss-loader\src\index.js??extracted!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\animate.css\animate.css  mini-css-extract-plugin
Child mini-css-extract-plugin node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!node_modules/postcss-loader/src/index.js??extracted!node_modules/sass-loader/dist/cjs.js??ref--13-3!node_modules/@fortawesome/fontawesome-free/scss/brands.scss:
                   Asset      Size  Chunks  Chunk Names
    3rdpartylicenses.txt  2.64 KiB
    Entrypoint mini-css-extract-plugin = *
    chunk    {0} * (mini-css-extract-plugin) 854 bytes [entry] [rendered]
     [06BP] ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??extracted!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./node_modules/@fortawesome/fontawesome-free/scss/brands.scss 854 bytes {0} [built]
         ModuleConcatenation bailout: Module is not an ECMAScript module
         single entry !!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\raw-css-loader.js!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\postcss-loader\src\index.js??extracted!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\sass-loader\dist\cjs.js??ref--13-3!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\@fortawesome\fontawesome-free\scss\brands.scss  mini-css-extract-plugin
Child mini-css-extract-plugin node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!node_modules/postcss-loader/src/index.js??extracted!node_modules/sass-loader/dist/cjs.js??ref--13-3!node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss:
                   Asset      Size  Chunks  Chunk Names
    3rdpartylicenses.txt  2.64 KiB
    Entrypoint mini-css-extract-plugin = *
    chunk    {0} * (mini-css-extract-plugin) 70.4 KiB [entry] [rendered]
     [ElNe] ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??extracted!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 70.4 KiB {0} [built]
         ModuleConcatenation bailout: Module is not an ECMAScript module
         single entry !!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\raw-css-loader.js!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\postcss-loader\src\index.js??extracted!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\sass-loader\dist\cjs.js??ref--13-3!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\@fortawesome\fontawesome-free\scss\fontawesome.scss  mini-css-extract-plugin
Child mini-css-extract-plugin node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!node_modules/postcss-loader/src/index.js??extracted!node_modules/sass-loader/dist/cjs.js??ref--13-3!node_modules/@fortawesome/fontawesome-free/scss/regular.scss:
                   Asset      Size  Chunks  Chunk Names
    3rdpartylicenses.txt  2.64 KiB
    Entrypoint mini-css-extract-plugin = *
    chunk    {0} * (mini-css-extract-plugin) 856 bytes [entry] [rendered]
     [AEQZ] ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??extracted!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./node_modules/@fortawesome/fontawesome-free/scss/regular.scss 856 bytes {0} [built]
         ModuleConcatenation bailout: Module is not an ECMAScript module
         single entry !!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\raw-css-loader.js!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\postcss-loader\src\index.js??extracted!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\sass-loader\dist\cjs.js??ref--13-3!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\@fortawesome\fontawesome-free\scss\regular.scss  mini-css-extract-plugin
Child mini-css-extract-plugin node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!node_modules/postcss-loader/src/index.js??extracted!node_modules/sass-loader/dist/cjs.js??ref--13-3!node_modules/@fortawesome/fontawesome-free/scss/solid.scss:
                   Asset      Size  Chunks  Chunk Names
    3rdpartylicenses.txt  2.64 KiB
    Entrypoint mini-css-extract-plugin = *
    chunk    {0} * (mini-css-extract-plugin) 850 bytes [entry] [rendered]
     [eesB] ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??extracted!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./node_modules/@fortawesome/fontawesome-free/scss/solid.scss 850 bytes {0} [built]
         ModuleConcatenation bailout: Module is not an ECMAScript module
         single entry !!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\raw-css-loader.js!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\postcss-loader\src\index.js??extracted!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\sass-loader\dist\cjs.js??ref--13-3!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\@fortawesome\fontawesome-free\scss\solid.scss  mini-css-extract-plugin
Child mini-css-extract-plugin node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!node_modules/postcss-loader/src/index.js??extracted!node_modules/sass-loader/dist/cjs.js??ref--13-3!node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss:
                   Asset     Size  Chunks  Chunk Names
    3rdpartylicenses.txt  245 KiB
    Entrypoint mini-css-extract-plugin = *
    chunk    {0} * (mini-css-extract-plugin) 185 KiB [entry] [rendered]
     [fv4+] ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??extracted!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss 185 KiB {0} [built]
         ModuleConcatenation bailout: Module is not an ECMAScript module
         single entry !!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\raw-css-loader.js!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\postcss-loader\src\index.js??extracted!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\sass-loader\dist\cjs.js??ref--13-3!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\ng-uikit-pro-standard\assets\scss\bootstrap\bootstrap.scss  mini-css-extract-plugin
Child mini-css-extract-plugin node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!node_modules/postcss-loader/src/index.js??extracted!node_modules/sass-loader/dist/cjs.js??ref--13-3!node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss:
                   Asset     Size  Chunks  Chunk Names
    3rdpartylicenses.txt  245 KiB
    Entrypoint mini-css-extract-plugin = *
    chunk    {0} * (mini-css-extract-plugin) 374 KiB [entry] [rendered]
     [bCNW] ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??extracted!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss 374 KiB {0} [built]
         ModuleConcatenation bailout: Module is not an ECMAScript module
         single entry !!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\raw-css-loader.js!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\postcss-loader\src\index.js??extracted!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\sass-loader\dist\cjs.js??ref--13-3!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\ng-uikit-pro-standard\assets\scss\mdb.scss  mini-css-extract-plugin
Child mini-css-extract-plugin node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!node_modules/postcss-loader/src/index.js??extracted!node_modules/sass-loader/dist/cjs.js??ref--13-3!src/styles.scss:
                   Asset      Size  Chunks  Chunk Names
    3rdpartylicenses.txt  1.07 KiB
    Entrypoint mini-css-extract-plugin = *
    chunk    {0} * (mini-css-extract-plugin) 2.59 KiB [entry] [rendered]
     [EJBR] ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??extracted!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./src/styles.scss 2.59 KiB {0} [built]
         ModuleConcatenation bailout: Module is not an ECMAScript module
         single entry !!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\raw-css-loader.js!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\postcss-loader\src\index.js??extracted!C:\Users\Umair\Desktop\Dev\erp-frontend\node_modules\sass-loader\dist\cjs.js??ref--13-3!C:\Users\Umair\Desktop\Dev\erp-frontend\src\styles.scss  mini-css-extract-plugin

Arkadiusz Idzikowski staff commented 3 weeks ago

How we can reproduce this problem? Please add some information about reproduction steps.

Make sure that the ng-uikit-pro-standard is correctly updated to v9.0.0 (go to node_modules/ng-uikit-pro-standard and check the version in package.json)


Zaffar pro commented 3 weeks ago

yes it is at version 9.0.0I just followed all the migration steps you provided.Can we have a skype call and I will show you our coding?


Arkadiusz Idzikowski staff commented 3 weeks ago

When exactly does this error occur? On ng serve/ng build? Did you add any MDB Angular Components to your app or is it a fresh installation? Please add more information about reproduction steps.

We only provide support on this forum or via email (in specific cases). If you can share a simple demo app on which we will be able to reproduce this problem, please send it to a.idzikowski@mdbootstrap.com


Zaffar pro commented 3 weeks ago

When I start ng build there is no problem. When I do ng build --prod this problem occurs. Ng serve is working but only locally not in prod due to the error


Arkadiusz Idzikowski staff commented 3 weeks ago

We won't be able to help without additional information. We don't even know which MDB project do you use - custom one based on MDB Angular Pro library or our Admin Template Pro and which MDB components are included in the application.

There is also a chance that this is not related to MDB at all and the error is caused by your custom code.


Zaffar pro commented 3 weeks ago

commented below sorry


Zaffar pro commented 2 weeks ago

Can you help problem is still there only at build --prod not --build


Arkadiusz Idzikowski staff commented 2 weeks ago

We couldn't reproduce this problem on our end. Please try to remove node_modules and package-lock.json and run npm install command again to make sure that all of your dependencies are up to date.

In case of any problem please send a simple demo on which we will be able to reproduce this problem to a.idzikowski@mdbootstrap.com.


Zaffar pro commented 2 weeks ago

ok i just sent you an email


Arkadiusz Idzikowski staff commented 2 weeks ago

I double checked my inbox but I didn't receive any email yet. Can you check if it was sent correctly?


Zaffar pro commented 2 weeks ago

I just send again, can you check?


Arkadiusz Idzikowski staff commented 2 weeks ago

I received only a test mail. If you used correct mail address before, it is possible that your mail client is blocking messages containing zip file. It may be better to share the project files with Google Drive.


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 9.0.0
  • Device: Laptop
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags