Angular 10.2 build: Localized bundle generation failed: Cannot read property 'value' of undefined

3.6k Views Asked by At

I have a project build on Angular 10.0.11.

I updated the project to 10.2 with npm update, but this resulted in multiple Unable to fully load [...] for source-map flattening: Circular source file mapping dependency -errors, when trying to build

I solved it with:

rm -rf node_modules package-lock.json
npm install

But I still have trouble building. At the end of the process, I get this error:

[...]
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
Generating localized bundles...
Localized bundle generation failed: Cannot read property 'value' of undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build-prod-da: `ng build --prod --configuration=production-da`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build-prod-da script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/jde/.npm/_logs/2021-02-10T12_06_55_122Z-debug.log

I can't figure out what is wrong here. According to the "Angular update guide", updating from 10.0 to 10.2 should be a piece of cake.

This is the content of the log file:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/local/bin/npm', 'run', 'build-prod-da' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild-prod-da', 'build-prod-da', 'postbuild-prod-da' ]
5 info lifecycle [email protected]~prebuild-prod-da: [email protected]
6 verbose lifecycle [email protected]~prebuild-prod-da: unsafe-perm in lifecycle true
7 verbose lifecycle [email protected]~prebuild-prod-da: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/jde/edApp2Angular10Prerender2/node_modules/.bin:/usr/share/Modules/bin:/usr/local/bin:/usr/local/sbin:/usr/bin:/usr/sbin:/opt/gradle/gradle-6.8.1/bin:/var/lib/snapd/snap/bin:/home/jde/flutter_projects/flutter/bin:/home/jde/.local/bin:/home/jde/bin:/home/jde/flutter_projects/flutter/bin:/opt/gradle/gradle-6.8.1/bin:/home/jde/flutter_projects/flutter/bin:/home/jde/.local/bin:/home/jde/bin:/home/jde/flutter_projects/flutter/bin:/opt/gradle/gradle-6.8.1/bin
8 verbose lifecycle [email protected]~prebuild-prod-da: CWD: /home/jde/edApp2Angular10Prerender2
9 silly lifecycle [email protected]~prebuild-prod-da: Args: [ '-c', 'npm run before-build' ]
10 silly lifecycle [email protected]~prebuild-prod-da: Returned: code: 0  signal: null
11 info lifecycle [email protected]~build-prod-da: [email protected]
12 verbose lifecycle [email protected]~build-prod-da: unsafe-perm in lifecycle true
13 verbose lifecycle [email protected]~build-prod-da: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/jde/edApp2Angular10Prerender2/node_modules/.bin:/usr/share/Modules/bin:/usr/local/bin:/usr/local/sbin:/usr/bin:/usr/sbin:/opt/gradle/gradle-6.8.1/bin:/var/lib/snapd/snap/bin:/home/jde/flutter_projects/flutter/bin:/home/jde/.local/bin:/home/jde/bin:/home/jde/flutter_projects/flutter/bin:/opt/gradle/gradle-6.8.1/bin:/home/jde/flutter_projects/flutter/bin:/home/jde/.local/bin:/home/jde/bin:/home/jde/flutter_projects/flutter/bin:/opt/gradle/gradle-6.8.1/bin
14 verbose lifecycle [email protected]~build-prod-da: CWD: /home/jde/edApp2Angular10Prerender2
15 silly lifecycle [email protected]~build-prod-da: Args: [ '-c', 'ng build --prod --configuration=production-da' ]
16 silly lifecycle [email protected]~build-prod-da: Returned: code: 1  signal: null
17 info lifecycle [email protected]~build-prod-da: Failed to exec build-prod-da script
18 verbose stack Error: [email protected] build-prod-da: `ng build --prod --configuration=production-da`
18 verbose stack Exit status 1
18 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
18 verbose stack     at EventEmitter.emit (events.js:315:20)
18 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
18 verbose stack     at ChildProcess.emit (events.js:315:20)
18 verbose stack     at maybeClose (internal/child_process.js:1048:16)
18 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
19 verbose pkgid [email protected]
20 verbose cwd /home/jde/edApp2Angular10Prerender2
21 verbose Linux 5.10.8-200.fc33.x86_64
22 verbose argv "/usr/bin/node" "/usr/local/bin/npm" "run" "build-prod-da"
23 verbose node v14.15.4
24 verbose npm  v6.14.11
25 error code ELIFECYCLE
26 error errno 1
27 error [email protected] build-prod-da: `ng build --prod --configuration=production-da`
27 error Exit status 1
28 error Failed at the [email protected] build-prod-da script.
28 error This is probably not a problem with npm. There is likely additional logging output above.
29 verbose exit [ 1, true ]

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "edApp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "ed",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "i18n": {
        "sourceLocale":"en",
        "locales": {
          "da":"src/i18n/messages.da.xlf"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/edApp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json",
              "src/apple-touch-icon.png",
              "src/browserconfig.xml",
              "src/favicon-16x16.png",
              "src/favicon-32x32.png",
              "src/mstile-150x150.png",
              "src/safari-pinned-tab.svg"
            ],
            "scripts": [ 
              "src/scripts/parallax.js"
            ],
            "styles": [
              {
                "input": "./node_modules/bootstrap/dist/css/bootstrap.css"
              },
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "src/styles.scss",
              "./node_modules/cropperjs/src/css/cropper.scss"
            ],
            "allowedCommonJsDependencies": [
              "crypto-js",
              "element-resize-detector",
              "batch-processor",
              "lodash"
            ]
          },
          "configurations": {
            "da": {
              "aot": true,
              "outputPath": "dist/da",
              "baseHref": "/da/",
              "localize":["da"]
            },
            "en": {
              "aot": true,
              "outputPath": "dist/en",
              "baseHref": "/en/",
              "localize":["en"]
          
            },
            "production-da-test": {
              "index": {
                "input": "src/index.test.da.html",
                "output": "index.html"
              },
              "outputPath": "dist-test",
              "localize":["da"],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true
            },
            "production-da": {
              "index": {
                "input": "src/index.prod.da.html",
                "output": "index.html"
              },
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputPath": "dist-prod/",
              "localize":["da"],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true
            },
            "production-en": {
              "index": {
                "input": "src/index.prod.en.html",
                "output": "index.html"
              },
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputPath": "dist-prod/",
              "baseHref": "/en/",
              "localize":["en"],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true
            },
            "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,
              "serviceWorker": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "edApp:build",
            "proxyConfig": "proxy.conf.json",
            "disableHostCheck": true,
            "port":4300
          },
          "configurations": {
            "production-da": {
              "browserTarget": "edApp:build:production-da"
            },
            "production-en": {
              "browserTarget": "edApp:build:production-en"
            },
            "production": {
              "browserTarget": "edApp:build:production"
            },
            "en": {
              "browserTarget": "edApp:build:en"
            },
            "da": {
              "browserTarget": "edApp:build:da"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "edApp: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",
              "src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "edApp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "edApp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "edApp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "edApp"
}

package.json

{
  "name": "ed-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "before-build": "node prebuild.js",
    "extract-i18n": "ng xi18n --output-path i18n && xliffmerge --profile xliffmerge.json da en",
    "serve-da": "ng serve -o --configuration=da",
    "serve-en": "ng serve -o --configuration=en",
    "serve-da-home": "ng serve -o --configuration=da --host 0.0.0.0",
    "serve-en-home": "ng serve -o --configuration=en --host 0.0.0.0",
    "build-da": "ng build --configuration=da",
    "build-en": "ng build --configuration=en",
    "build-prod-da-test": "ng build --prod --configuration=production-da-test",
    "prebuild-prod-da": "npm run before-build",
    "prebuild-test-da": "npm run before-build",
    "build-test-da": "ng build --prod --configuration=production-da-test --crossOrigin=anonymous",
    "build-prod-da": "ng build --prod --configuration=production-da",
    "build-prod-en": "ng build --prod --configuration=production-en",
    "build-all": "for lang in da en; do npm run build-$lang; done",
    "build-prod-all": "for lang in da en; do npm run build-prod-$lang; done"
  },
  "browser": {
    "crypto": false
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.2.4",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "^10.2.4",
    "@angular/compiler": "^10.2.4",
    "@angular/core": "^10.2.4",
    "@angular/forms": "^10.2.4",
    "@angular/localize": "^10.2.4",
    "@angular/platform-browser": "^10.2.4",
    "@angular/platform-browser-dynamic": "^10.2.4",
    "@angular/pwa": "^0.1000.8",
    "@angular/router": "^10.2.4",
    "@angular/service-worker": "^10.2.4",
    "@ckeditor/ckeditor5-angular": "^1.2.3",
    "@clampy-js/ngx-clampy": "^8.0.1",
    "@fortawesome/angular-fontawesome": "^0.7.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@it-era/ngx-safe-pipes": "^0.2.1",
    "@ng-select/ng-select": "^5.1.0",
    "@ngx-pwa/local-storage": "^10.1.0",
    "@ngx-translate/core": "^13.0.0",
    "angular-file": "^3.4.0",
    "blueimp-canvas-to-blob": "^3.28.0",
    "body-scroll-lock": "^3.1.5",
    "bootstrap": "^4.6.0",
    "canvas-to-blob": "^1.0.0",
    "core-js": "^3.8.3",
    "cropperjs": "^1.5.9",
    "crypto-js": "^4.0.0",
    "element-resize-detector": "^1.2.1",
    "hammerjs": "^2.0.8",
    "heic-convert": "^1.2.4",
    "heic2any": "0.0.3",
    "lodash-es": "^4.17.20",
    "moment": "^2.29.1",
    "ng-sidebar": "^9.4.2",
    "ngx-bootstrap": "^5.6.2",
    "ngx-moment": "^5.0.0",
    "ngx-smart-modal": "^7.4.1",
    "ngx-spinner": "^10.0.1",
    "rxjs": "^6.6.3",
    "rxjs-tslint": "^0.1.8",
    "survey-angular": "^1.8.29",
    "zone.js": "^0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1000.8",
    "@angular/cli": "^10.2.2",
    "@angular/compiler-cli": "^10.2.4",
    "@angular/language-service": "^10.2.4",
    "@types/jasmine": "^3.6.3",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^14.14.25",
    "codelyzer": "^6.0.1",
    "inquirer": "^7.3.3",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.2",
    "karma": "^5.2.3",
    "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",
    "replace-in-file": "^6.2.0",
    "ts-node": "^8.10.2",
    "tslint": "~6.1.3",
    "typescript": "^3.9.8"
  }
}
3

There are 3 best solutions below

0
On

I ended up upgrading to Angular 11

Then I reinstalled all packages to get a fresh start. Still after that, there were packages not entirely up-to-date, so I used ncu (npm-check-updates) to sort that out...

rm -rf node_modules package-lock.json
npm install
ncu -u
npm install

Then the problem went away. I suspect it was probably due to some kind of package version mismatch or a problem with Angular 10.2.4.

1
On
ng build  --single-bundle --configuration production --localize --deploy-url http://localhost:8080/

In angular.json

projects>xyz>architect>build>configurations

Before change: "sourceMap": false

✖ Localized bundle generation failed. Cannot read properties of undefined (reading 'includes')

After change removed sourceMap property / "sourceMap": true

Generating localized bundles...OK

4
On

You can simply change target from es2015 to es5 in tsconfig.ts.

It will fix the error.