Angular Production build error "ERROR in Cannot read property 'toLowerCase' of undefined"

Question

While I am creating the production build using ng build --prod while compiling But working perfectly fine in case of development mode, How can I solve this?

I am using .toLowerCase() in many places how can i identify where exactly this method is causing error or is this method is actually causing error because if it is causing error then it should be present in case of development as well. Please help how i identify what is exactly causing the issue

getting below error:

chunk {} runtime.acf0dec4155e77772545.js (runtime) 1.45 kB [entry] [rendered]
chunk {1} main.82b46379c162ae4d74cf.js (main) 147 kB [initial] [rendered]
chunk {2} polyfills.4503f8e2df6ab08e9ee5.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} styles.c90132e48ef115ac4fd0.css (styles) 3.91 kB [initial] [rendered]
chunk {scripts} scripts.f8926a8840b29b228587.js (scripts) 587 kB [entry] [rendered]
Date: 2020-12-21T17:39:25.893Z - Hash: cfeb9076f180357d8675 - Time: 41679ms

ERROR in Cannot read property 'toLowerCase' of undefined

package.json

{
 "name": "project4",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~10.1.4",
"@angular/cdk": "^10.2.7",
"@angular/common": "~10.1.4",
"@angular/compiler": "~10.1.4",
"@angular/core": "~10.1.4",
"@angular/forms": "~10.1.4",
"@angular/material": "^10.2.7",
"@angular/platform-browser": "~10.1.4",
"@angular/platform-browser-dynamic": "~10.1.4",
"@angular/router": "~10.1.4",
"alife-file-to-base64": "0.0.4",
"amazon-cognito-identity-js": "^4.4.0",
"apexcharts": "^3.23.0",
"aws-sdk": "^2.784.0",
"bootstrap": "^4.5.3",
"crypto-js": "^3.3.0",
"jquery": "^3.5.1",
"ng-apexcharts": "^1.5.6",
"ngx-cookie-service": "^10.1.1",
"ngx-image-cropper": "^3.2.1",
"ngx-owl-carousel": "^2.0.7",
"ngx-pagination": "^5.0.0",
"ngx-spinner": "^10.0.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1001.4",
"@angular/cli": "~10.1.4",
"@angular/compiler-cli": "~10.1.4",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}

angular.json

{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
"project4": {
  "projectType": "application",
  "schematics": {},
  "root": "",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/project4",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": true,
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "node_modules/owl.carousel/dist/assets/owl.carousel.css",
    "node_modules/owl.carousel/dist/assets/owl.theme.default.css",
          "src/styles.css"
        ],
        "scripts": ["node_modules/jquery/dist/jquery.js",
          "node_modules/apexcharts/dist/apexcharts.min.js",
          "node_modules/owl.carousel/dist/owl.carousel.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,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "project4:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "project4:build:production"
        }
      }
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "project4:build"
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.spec.json",
        "karmaConfig": "karma.conf.js",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "src/styles.css"
        ],
        "scripts": []
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": [
          "tsconfig.app.json",
          "tsconfig.spec.json",
          "e2e/tsconfig.json"
        ],
        "exclude": [
          "**/node_modules/**"
        ]
      }
    },
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "e2e/protractor.conf.js",
        "devServerTarget": "project4:serve"
      },
      "configurations": {
        "production": {
          "devServerTarget": "project4:serve:production"
        }
      }
    }
      }
     }
    },
   "defaultProject": "project4",
    "cli": {
     "analytics": false
     }
    }

Answer 1

I was able to solve it by changing optimization to true . I do not how it worked but it eventually solved the issue. But turning it of will their be any effect on prod environment

Answer 2

Build your application on local machine in development mode with "optimization": true set in your angular.json. This is needed for more convenient debugging.

Open your style.css file generated in the dist folder and inspect it for errors (in case you're developing in docker container, copy this file from the container to host).

When you find syntax errors like this: enter image description here try to match the erroneous code in the generated style.css with your source code and fix the issue / issues there.

Answer 3

I had the same problem with Angular 11 when I ran the ng build --prod command:

Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):

Error: /../../example.component.less Cannot read property 'toLowerCase' of undefined

so I found in the example.component.less file that some css attributes were not defined and the angular compiler in production mode is more stricted, look at:

.card-container {
    width: 50%;
    height: 40%;
    border: ; <<< Here <<<
    text-align: center;
    overflow: auto;
}