Ng13 upgrade -> build issue

[spock123]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

After upgrading from v12 to v13, I'm getting errors when making a build.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

[error] Error: Cannot find module 'webpack-sources'
Require stack:
- /Users/lrj/project/fastorder/admin/node_modules/license-webpack-plugin/dist/WebpackAssetManager.js
- /Users/lrj/project/fastorder/admin/node_modules/license-webpack-plugin/dist/LicenseWebpackPlugin.js
- /Users/lrj/project/fastorder/admin/node_modules/license-webpack-plugin/dist/index.js
- /Users/lrj/project/fastorder/admin/node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js
- /Users/lrj/project/fastorder/admin/node_modules/@angular-devkit/build-angular/src/webpack/configs/index.js
- /Users/lrj/project/fastorder/admin/node_modules/@angular-devkit/build-angular/src/builders/browser/index.js
- /Users/lrj/project/fastorder/admin/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
- /Users/lrj/project/fastorder/admin/node_modules/@angular-devkit/architect/node/index.js
- /Users/lrj/project/fastorder/admin/node_modules/@angular/cli/models/architect-command.js
- /Users/lrj/project/fastorder/admin/node_modules/@angular/cli/commands/build-impl.js
- /Users/lrj/project/fastorder/admin/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /Users/lrj/project/fastorder/admin/node_modules/@angular-devkit/schematics/tools/index.js
- /Users/lrj/project/fastorder/admin/node_modules/@angular/cli/utilities/json-schema.js
- /Users/lrj/project/fastorder/admin/node_modules/@angular/cli/models/command-runner.js
- /Users/lrj/project/fastorder/admin/node_modules/@angular/cli/lib/cli/index.js
- /Users/lrj/project/fastorder/admin/node_modules/@angular/cli/lib/init.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
    at Function.Module._load (internal/modules/cjs/loader.js:730:27)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/lrj/project/fastorder/admin/node_modules/license-webpack-plugin/dist/WebpackAssetManager.js:4:25)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/lrj/project/fastorder/admin/node_modules/license-webpack-plugin/dist/LicenseWebpackPlugin.js:12:29)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)

Please provide the environment you discovered this bug in

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.2
@angular-devkit/build-angular   13.0.2
@angular-devkit/core            13.0.2
@angular-devkit/schematics      13.0.2
@angular/cli                    13.0.2
@angular/fire                   6.1.5
@schematics/angular             13.0.2
rxjs                            6.5.5
typescript                      4.4.4

Anything else?

Upgrade process seemed to work fine and went without apparent issues. I've also re-installed all node_modules

[spock123]

Angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "admin": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "i18n": {
        "locales": {
          "en": "src/locale/messages.en.xlf",
          "da": "src/locale/messages.da.xlf"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/admin",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ],
            "styles": [
              "src/app/styles/index.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/app/styles"
              ]
            },
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true,
            "aot": true
          },
          "configurations": {
            "production": {
              "localize": [
                "en",
                "da"
              ],
              "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,
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json"
            },
            "localprod": {
              "localize": [
                "en"
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.localprod.ts"
                }
              ],
              "optimization": false,
              "outputHashing": "all",
              "sourceMap": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json",
              "aot": true
            },
            "dev": {
              "localize": [
                "en",
                "da"
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json",
              "aot": true
            },
            "test": {
              "localize": [
                "en",
                "da"
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true,
              "aot": true,
              "ngswConfigPath": "ngsw-config.json"
            },
            "da": {
              "localize": [
                "da"
              ]
            },
            "en": {
              "localize": [
                "en"
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "admin:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "admin:build:production"
            },
            "localprod": {
              "browserTarget": "admin:build:localprod"
            },
            "en": {
              "browserTarget": "admin:build:en"
            },
            "da": {
              "browserTarget": "admin:build:da"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "admin:build"
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "admin",
  "cli": {
    "analytics": "04706150-4802-490a-a272-e611b3fd6996",
    "defaultCollection": "@angular-eslint/schematics"
  }
}

[spock123]

I think some of my dependencies are creating the issues - I will investigate further. Package.json:

{
  "name": "admin",
  "version": "1.2.0",
  "scripts": {
    "analyze": "webpack-bundle-analyzer dist/admin/en/stats.json",
    "clean": "npx rimraf dist",
    "docs:generate": "npx compodoc -p ./tsconfig.json",
    "docs:serve": "npx compodoc -s ./tsconfig.json",
    "ng": "ng",
    "dev": "ng serve --host=0.0.0.0 --port=4300  --proxy-config proxy.conf.json --configuration=en   --open",
    "localprod": "npm run dev -- --configuration=localprod ",
    "dev:da": "npm run dev -- --configuration=da ",
    "dev:en": "npm run dev -- --configuration=en  ",
    "start": "ng serve",
    "build": "ng build",
    "build:stats": "npm run build -- --configuration=dev --stats-json",
    "build:dev-code": "npm run build -- --configuration=dev",
    "build:test-code": "npm run build -- --configuration=test",
    "build:production-code": "npm run build -- --configuration=production",
    "prebuild:dev": "npm-run-all version",
    "build:dev": "npm-run-all build:dev-code copy-root-index copy-assets ignore-firebase-in-sw",
    "prebuild:test": "npm-run-all version",
    "build:test": "npm-run-all build:test-code copy-root-index copy-assets ignore-firebase-in-sw",
    "prebuild:production": "npm-run-all version",
    "build:production": "npm-run-all build:production-code copy-root-index copy-assets ignore-firebase-in-sw",
    "test": "jest",
    "lint": "ng lint",
    "lint:fix": "ng lint --fix",
    "lint:watch": "nodemon --exec \"npm run lint || exit 1\" --ext ts,html,scss",
    "e2e": "ng e2e",
    "postinstall": "npm-run-all version",
    "deploy:dev": "firebase deploy --only hosting:dev --project dev",
    "deploy:test": "firebase deploy --only hosting:test --project test",
    "deploy:production": "firebase deploy --only hosting:production --project production",
    "copy-robots": "shx cp ./src/robots.txt ./dist/admin/robots.txt",
    "copy-root-index": "npx shx cp ./root-index.html ./dist/admin/index.html",
    "copy-assets": "shx cp -Rf src/assets ./dist/admin/assets",
    "ignore-firebase-in-sw": "ts-node -P ./scripts/ignore-firebase-in-sw/tsconfig.json  ./scripts/ignore-firebase-in-sw/index.ts",
    "version": "node ./scripts/version.js",
    "dev:all": "npm-run-all build:dev deploy:dev",
    "test:all": "npm-run-all build:test deploy:test",
    "production:all": "npm-run-all build:production deploy:production"
  },
  "private": true,
  "dependencies": {
    "@angular-material-components/datetime-picker": "^7.0.0",
    "@angular/animations": "~13.0.1",
    "@angular/cdk": "^13.0.1",
    "@angular/common": "~13.0.1",
    "@angular/compiler": "~13.0.1",
    "@angular/core": "~13.0.1",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "~13.0.1",
    "@angular/localize": "^13.0.1",
    "@angular/material": "^13.0.1",
    "@angular/platform-browser": "~13.0.1",
    "@angular/platform-browser-dynamic": "~13.0.1",
    "@angular/router": "~13.0.1",
    "@angular/service-worker": "^13.0.1",
    "@ngrx/effects": "12.5.1",
    "@ngrx/router-store": "^12.5.1",
    "@ngrx/store": "^12.5.1",
    "@ngrx/store-devtools": "12.5.1",
    "@sentry/angular": "^6.8.0",
    "@sentry/tracing": "^6.8.0",
    "@types/fabric": "^4.5.4",
    "angular-calendar": "^0.28.28",
    "angularx-qrcode": "^11.0.0",
    "chart.js": "^2.9.4",
    "crypto-js": "^3.3.0",
    "drag-drop-touch": "^1.3.1",
    "fabric": "^4.5.0",
    "firebase": "^7.21.0",
    "jsqr": "^1.3.1",
    "lodash": "^4.17.21",
    "lodash.clonedeep": "^4.5.0",
    "mat-progress-buttons": "^9.3.1",
    "mat-table-exporter": "^10.2.4",
    "material-icon": "^0.1.4",
    "material-icons": "^0.3.1",
    "material-theme-creator": "^3.2.0",
    "ng-connection-service": "^1.0.4",
    "ng2-charts": "^2.4.3",
    "ngrx-store-localstorage": "^12.0.0",
    "ngx-image-cropper": "^5.0.1",
    "ngx-toastr": "^14.2.0",
    "rxjs": "~6.5.4",
    "tslib": "^2.0.0",
    "uuid": "^7.0.3",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.2",
    "@angular-eslint/builder": "12.0.0",
    "@angular-eslint/eslint-plugin": "12.0.0",
    "@angular-eslint/eslint-plugin-template": "12.0.0",
    "@angular-eslint/schematics": "12.6.1",
    "@angular-eslint/template-parser": "12.0.0",
    "@angular/cli": "~13.0.2",
    "@angular/compiler-cli": "~13.0.1",
    "@types/jasminewd2": "~2.0.3",
    "@types/jest": "^26.0.10",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.23.0",
    "@typescript-eslint/parser": "4.23.0",
    "bufferutil": "^4.0.1",
    "compodoc": "0.0.41",
    "eslint": "^7.26.0",
    "fs-extra": "^9.0.1",
    "husky": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jest": "^26.4.0",
    "jest-preset-angular": "^8.2.1",
    "karma": "~6.3.2",
    "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",
    "nodemon": "^2.0.4",
    "npm-run-all": "^4.1.5",
    "protractor": "~7.0.0",
    "replace-in-file": "^6.1.0",
    "rimraf": "^3.0.2",
    "shx": "^0.3.2",
    "ts-node": "~8.3.0",
    "typescript": "~4.4.4",
    "webpack-bundle-analyzer": "^3.8.0"
  },
  "optionalDependencies": {
    "fsevents": "^2.3.2"
  }
}

[JoostK]

Duplicate of https://github.com/angular/angular-cli/issues/22153

[spock123]

@JoostK thanks, I also got it working by manually installing webpack-sources.

[angular-automatic-lock-bot[bot]]

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