search

angular / angular-cli

CLI tool for Angular
https://cli.angular.dev
MIT License
26.78k stars 11.98k forks source link

Error: Cannot read property 'toLowerCase' of undefined - ng build --configuration production #20914

Closed ChiKaLiO closed 3 years ago

ChiKaLiO commented 3 years ago

🐞 Bug report

**Not sure** new code is affecting it or just the angular version, the previous version in which this bug was not present was: 11.x ### Description Running ng build --configuration production gave me this error: `Error: Cannot read property 'toLowerCase' of undefined` ### Nothig more.. _edit:_ ng serve works with no problem edit 2: ng build (without --prod) works so i guess i can resolve the problem by changing one if these: ``` "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, ``` _edit 3:_ it didn't work 😢 **Package.json:** ``` { "name": "name-project", "version": "0.0.1", "scripts": { "ng": "ng", "sub": "ng serve --host test.localhost.com --port 4200 --open", "start": "ng serve", "build": "ng build --configuration production", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "rtl": "webpack --config webpack-rtl.config.js", "postinstall": "ngcc" }, "private": true, "dependencies": { "@angular/animations": "~12.0.0", "@angular/cdk": "^12.0.0", "@angular/common": "~12.0.0", "@angular/compiler": "~12.0.0", "@angular/core": "~12.0.0", "@angular/forms": "~12.0.0", "@angular/localize": "~12.0.0", "@angular/material": "^12.0.0", "@angular/material-moment-adapter": "^12.0.0", "@angular/platform-browser": "~12.0.0", "@angular/platform-browser-dynamic": "~12.0.0", "@angular/router": "~12.0.0", "@fortawesome/fontawesome-free": "^5.15.3", "@linways/table-to-excel": "^1.0.4", "@ng-bootstrap/ng-bootstrap": "^9.1.0", "@ngx-translate/core": "^13.0.0", "@types/socket.io": "^2.1.13", "angular-in-memory-web-api": "^0.11.0", "apexcharts": "^3.26.3", "bootstrap": "^4.6.0", "clipboard": "^2.0.6", "file-saver": "^2.0.5", "frappe-gantt": "^0.5.0", "highlight.js": "^10.7.1", "highlightjs-line-numbers.js": "^2.8.0", "howler": "^2.2.1", "jquery": "^3.6.0", "moment": "^2.27.0", "ng-apexcharts": "^1.5.9", "ng-inline-svg": "^10.1.0", "ng-orgchart": "git+https://github.com/ChiKaLiO/ng-orgchart.git", "ng2-dragula": "^2.1.1", "ng2-file-upload": "^1.4.0", "ngx-clipboard": "^14.0.1", "ngx-color-picker": "^11.0.0", "ngx-highlightjs": "^4.1.3", "ngx-perfect-scrollbar": "^10.1.0", "ngx-print": "^1.2.0-beta.6", "ngx-socket-io": "^3.2.0", "object-path": "^0.11.4", "perfect-scrollbar": "^1.5.0", "popper.js": "^1.16.1", "postcss": "^8.2.15", "rxjs": "^6.6.7", "socicon": "^3.0.5", "socket.io-client": "^4.0.1", "tslib": "^2.0.0", "xlsx": "^0.17.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~12.0.0", "@angular/cli": "~12.0.0", "@angular/compiler-cli": "~12.0.0", "@types/jasmine": "^3.6.9", "@types/jasminewd2": "~2.0.8", "@types/node": "^14.14.37", "codelyzer": "^6.0.1", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~6.0.0", "karma": "~6.3.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.3", "karma-jasmine": "~4.0.1", "karma-jasmine-html-reporter": "^1.5.4", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.2.4", "webpack-cli": "^3.3.12", "webpack-messages": "^2.0.4", "webpack-rtl-plugin": "^2.0.0" } } ``` **angular.json:** ``` { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "name": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "../back/public", "allowedCommonJsDependencies": [ "object-path", "apexcharts", "clipboard.js", "highlight.js" ], "index": "src/app.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [ "node_modules/apexcharts/dist/apexcharts.min.js", "node_modules/clipboard/dist/clipboard.js" ], "vendorChunk": true, "extractLicenses": false, "buildOptimizer": false, "sourceMap": true, "optimization": false, "namedChunks": true }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "5mb", "maximumError": "7mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "name:build" }, "configurations": { "production": { "browserTarget": "name:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "name: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": [ "src/styles.scss" ], "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": "name:serve" }, "configurations": { "production": { "devServerTarget": "name:serve:production" } } } } } }, "defaultProject": "name", "cli": { "analytics": false } } ```
alan-agius4 commented 3 years ago

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

ChiKaLiO commented 3 years ago

I commented every line :') i found the problem to be here:

border-width: get($checkbox-config, types, accent, borderWidth) !important; $checkbox-config: 

// Checkbox
$checkbox-config: (
    // transition: all 0.3s ease,
    // itemSpace: 1rem,
    // labelSpace: 0.75rem,
    // inlineItemSpace: 0.35rem,
    types: (
        solid: (
            theme: (
                base-color: $gray-200
            ),
            sizes: (
                default: (
                    base: 18px,
                    tick: 10px,
                ),
                lg: (
                    base: 24px,
                    tick: 12px,
                )
            )
        ),
        outline: (
            theme: (
                base-color: $gray-400
            ),
            sizes: (
                default: (
                    base: 18px,
                    tick:  10px,
                ),
                lg: (
                    base: 24px,
                    tick: 12px,
                )
            )
        )
    )
) !default;

There was no problem with angular 11 since this is an old code, the real problem is that the cli don't indicate anything about where the error is..

alan-agius4 commented 3 years ago

@ChiKaLiO, I'm sorry, but we can't reproduce the problem following the instructions you provided.

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

ChiKaLiO commented 3 years ago

the issue is with postcss and the problem is at my last comment thanks ^^

angular-automatic-lock-bot[bot] commented 3 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.