Angular build: Cannot read property 'split' of undefined

Question

just upgraded from ng8 to ng11. when I run ng serve it works fine, but when I run build for production I get the following error:

Generating ES5 bundles for differential loading... An unhandled exception occurred: C:\P.....\src\app\9-es2015.dce42a686e45767441f2.js: Cannot read property 'split' of undefined

I tried removing code to see what is causing the issue and I found the following code in my component, I change the enum to a hardcoded number it works, or if I remove the console.log. it seems it's an issue with es2015, changing to es5 solves it.

import {FormTableData} from '../../../form/service/type/form-table-data';
import {FormFieldTypes} from '../../../form/service/type/form-field-types.enum';

export class FormEditorFormData {

  formData: FormTableData;
  fieldType = FormFieldTypes;
  arr: string[];


  constructor(n: number,s:string) {
    let type = 0;
    const option: string[] = [];
    for (const s of this.arr) {
      if (s != null) {
        switch (type) {
          case FormFieldTypes.checkbox:
            const cap = 'pp';
            option.forEach( (currentValue) => {
              console.log(cap);
            });
            break;
        }
      }
    }
  }
}

FormFieldTypes:

 export enum FormFieldTypes {
  text = 10,
  checkbox = 20,
  numeric = 30,
  option = 40,
  date = 50,
  combo = 60,
  xiny = 70,
  file = 80,
  picture = 90,
  break = 100,
  textArea = 110,
  actionButton = 998,
  none = 999
}

error log:

[error] TypeError: C:\Projects\Venditio\admin-client\src\app\9-es2015.8205fce0935da26db9bb.js: Cannot read property 'split' of undefined
    at NodePath.get (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\family.js:185:21)
    at BlockScoping.wrapClosure (C:\Projects\Venditio\admin-client\node_modules\@babel\plugin-transform-block-scoping\lib\index.js:534:29)
    at BlockScoping.run (C:\Projects\Venditio\admin-client\node_modules\@babel\plugin-transform-block-scoping\lib\index.js:360:12)
    at PluginPass.BlockStatement|SwitchStatement|Program (C:\Projects\Venditio\admin-client\node_modules\@babel\plugin-transform-block-scoping\lib\index.js:89:24)
    at newFn (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\visitors.js:175:21)
    at NodePath._call (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\context.js:55:20)
    at NodePath.call (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\context.js:42:17)
    at NodePath.visit (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\context.js:92:31)
    at TraversalContext.visitQueue (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:116:16)
    at TraversalContext.visitSingle (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:85:19)
    at TraversalContext.visit (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:144:19)
    at Function.traverse.node (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\index.js:82:17)
    at NodePath.visit (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\context.js:99:18)
    at TraversalContext.visitQueue (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:116:16)
    at TraversalContext.visitMultiple (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:80:17)
    at TraversalContext.visit (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:142:19)

angular.json:

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

tsconfig:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

package,json:

{
  "name": "primer",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --base-href / --deploy-url /venditio-client/ --prod",
    "build-qa-prod": "node --max_old_space_size=2048  ./node_modules/.bin/ng build --prod --configuration=qa --base-href / --deploy-url /",
    "build-qa": "ng build --configuration=qa --base-href / --deploy-url /venditio-client/ --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.6",
    "@angular/cdk": "^11.2.5",
    "@angular/common": "~11.2.6",
    "@angular/compiler": "~11.2.6",
    "@angular/core": "~11.2.6",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "~11.2.6",
    "@angular/material": "11.2.5",
    "@angular/platform-browser": "~11.2.6",
    "@angular/platform-browser-dynamic": "~11.2.6",
    "@angular/router": "~11.2.6",
    "@asymmetrik/ngx-leaflet": "6.0.1",
    "@fullcalendar/core": "^4.3.1",
    "@ngx-loading-bar/core": "^4.2.0",
    "@ngx-loading-bar/router": "4.2.0",
    "@ngx-translate/core": "11.0.1",
    "@ngx-translate/http-loader": "4.0.0",
    "@swimlane/ngx-datatable": "19.0.0",
    "angular-calendar": "0.27.18",
    "angular-tree-component": "8.4.0",
    "chart.js": "^2.9.4",
    "core-js": "^2.6.12",
    "d3": "5.12.0",
    "font-awesome": "^4.7.0",
    "intl": "1.2.5",
    "leaflet": "1.5.1",
    "moment": "2.24.0",
    "ng-block-ui": "^3.0.2",
    "ng2-charts": "^2.4.2",
    "ng2-dragula": "2.1.1",
    "ng2-file-upload": "1.3.0",
    "ng2-validation": "4.2.0",
    "ngx-material-timepicker": "^5.5.3",
    "ngx-perfect-scrollbar": "8.0.0",
    "ngx-toastr": "^13.2.1",
    "primeflex": "^1.3.0",
    "primeicons": "^2.0.0",
    "primeng": "^11.3.1",
    "quill": "^1.3.7",
    "rxjs": "~6.6.0",
    "screenfull": "5.0.0",
    "sweetalert2": "^10.15.6",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2",
    "rxjs-compat": "^6.6.6"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1102.5",
    "@angular/cli": "^11.2.5",
    "@angular/compiler-cli": "11.2.6",
    "@angular/language-service": "11.2.6",
    "@types/jasmine": "^3.6.7",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^12.20.5",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~2.0.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"
  }
}

Answer 1

I just ran into this issue after upgrading to angular@13. I fixed it by updating the "version" field in angular.json from 1 to 2.

Answer 2

The above didn't work for me; however after a ton of debugging (Angular 13, NRWL 13) the solution was this:

Under project.json (for the app you want to build), simply add "dependsOn":[]

For example,

"architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "dependsOn": [],
                    "options": {...

I'm not sure why it works to be honest; but I added print statements to the NRWL node module and saw that it wasn't detecting any projects (undefined) so the warning helped.

Best Regards, ~jedihacks