【问题标题】:Angular Production build error "ERROR in Cannot read property 'toLowerCase' of undefined"Angular Production 构建错误“无法读取未定义的属性 'toLowerCase' 中的错误”
【发布时间】:2020-12-21 17:51:00
【问题描述】:

虽然我在编译时使用ng build --prod 创建生产版本但在开发模式下工作得非常好,我该如何解决这个问题?

我在很多地方都在使用.toLowerCase(),我如何才能确定该方法究竟在哪里导致错误,或者该方法实际上是否导致错误,因为如果它导致错误,那么它也应该在开发的情况下出现。请帮助我如何确定导致问题的确切原因

出现以下错误:

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
     }
    }

【问题讨论】:

  • 你使用类似environment.someThing.toLowerCase()的东西吗?
  • 向我们展示您的两个环境文件。
  • @BojanKogoj 不直接我通过将值分配给变量然后使用 toLowerCase() 来使用它
  • @RandyCasburn 我不习惯共享环境文件,但可以肯定的是,这两个环境文件具有完全相同的键
  • 好的,没有足够的信息来确定问题,这个问题缺少调试细节。祝你好运。

标签: javascript angular


【解决方案1】:

我能够通过将优化更改为true 来解决它。我不知道它是如何工作的,但它最终解决了这个问题。关闭它会对生产环境产生任何影响吗?

【讨论】:

    【解决方案2】:

    在开发模式下在本地机器上构建您的应用程序,并在您的 angular.json 中设置“优化”:true。这是为了更方便的调试所必需的。

    打开您在 dist 文件夹中生成的 style.css 文件并检查它是否有错误(如果您在 docker 容器中开发,请将此文件从容器复制到主机)。

    当您发现这样的语法错误时:在此处输入图像描述尝试将生成的 style.css 中的错误代码与您的源代码匹配并修复那里的问题。

    【讨论】:

      【解决方案3】:

      我在运行ng build --prod 命令时遇到了与 Angular 11 相同的问题:

      Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
      
      Error: /../../example.component.less Cannot read property 'toLowerCase' of undefined
      

      所以我在example.component.less文件中发现有些css属性没有定义,生产模式下的angular编译器比较严格,看看:

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

      【讨论】:

        猜你喜欢
        • 2018-08-29
        • 1970-01-01
        • 2021-07-13
        • 2021-02-22
        • 2020-05-07
        • 1970-01-01
        • 1970-01-01
        • 2021-11-08
        • 1970-01-01
        相关资源
        最近更新 更多