Error: Emit attempted before Angular Webpack plugin initialization(Error: Emit attempted before Angular Webpack plugin initialization)

Question

Here what im doing is I have created new project in Angular 15 and moving the code from the Angular version 5. I have fixed all the errors but stuck with this one error.And also here is the my current Angular version details:

Angular CLI: 15.2.10 Node: 18.18.2 Package Manager: npm 10.2.0 OS : win32 x64

I'm getting below error: [Error]: https://i.stack.imgur.com/22xkl.png

Here is package.json file:

{
  "name": "demo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "prod": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-prod": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build -- 
     prod"


  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.3",
    "@angular/animations": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.2.10",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@ngtools/webpack": "^14.2.3",
    "@ngui/datetime-picker": "^0.16.2",
    "@progress/kendo-angular-charts": "^3.8.0",
    "@progress/kendo-angular-common": "^3.2.1",
    "@progress/kendo-angular-dropdowns": "^3.5.2",
    "@progress/kendo-angular-intl": "^1.7.0",
    "@progress/kendo-angular-l10n": "^1.3.0",
    "@progress/kendo-angular-pdf-export": "^1.3.1",
    "@progress/kendo-drawing": "^1.17.1",
    "@progress/kendo-licensing": "^1.2.2",
    "@syncfusion/ej2-angular-richtexteditor": "^17.4.40",
    "@types/angular-ui-bootstrap": "^0.13.44",
    "@types/d3": "^5.7.2",
    "@types/jquery": "^3.3.29",
    "@types/jqueryui": "^1.12.7",
    "@types/underscore": "^1.8.14",
    "admin-lte-css": "^2.4.3",
    "angular-checklist": "^1.3.0",
    "angular-sortablejs": "^2.7.0",
    "angular2-datetimepicker": "^1.1.1",
    "angular2-image-zoom": "^1.2.1",
    "angular2-json2csv": "^1.1.2",
    "angular2-tag-input": "^1.2.3",
    "babel-regenerator-runtime": "^6.5.0",
    "bootstrap": "^3.4.1",
    "bootstrap-css-only": "^3.3.7",
    "chart.js": "^2.9.4",
    "core-js": "^2.6.5",
    "d3": "^5.9.2",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "html2canvas": "^1.0.0-rc.1",
    "ionicons": "^2.0.1",
    "jquery": "^3.6.0",
    "jquery-ui-sortable": "^1.0.0",
    "jqueryui": "^1.11.1",
    "jspdf": "^1.5.3",
    "lodash": "^4.17.21",
    "moment": "^2.24.0",
    "ng-pick-datetime": "^5.2.6",
    "ng-pick-datetime-moment": "1.0.7",
    "ng-recaptcha": "^5.0.0",
    "ng-starrating": "^1.0.11",
    "ng2-charts": "^1.1.1",
    "ng2-ckeditor": "1.1.9",
    "ng2-nouislider": "^1.7.13",
    "ng2-order-pipe": "^0.1.5",
    "ng2-pdf-viewer": "^5.0.1",
    "ng2-search-filter": "^0.4.7",
    "ng2-toastr": "^4.1.2",
    "ng2-tree": "^2.0.0-rc.11",
    "ngx-bootstrap": "^2.0.0-beta.9",
    "ngx-color-picker": "^4.5.3",
    "ngx-editor": "^1.2.1",
    "ngx-embed-video": "^1.0.4",
    "ngx-inactivity": "^1.0.1",
    "ngx-pagination": "^3.2.1",
    "ngx-stripe": "^6.0.0",
    "ngx-toastr": "^6.4.1-beta.0",
    "ngx-ui-switch": "^1.6.0",
    "npm": "^7.24.2",
    "primeng": "^4.3.0",
    "rxjs": "~7.5.0",
    "rxjs-compat": "6.2.2",
    "save": "^2.3.3",
    "socket.io-client": "^2.2.0",
    "sortablejs": "^1.8.4",
    "tslib": "^2.3.0",
    "underscore": "^1.13.1",
    "uuid": "^9.0.1",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.5",
    "@angular/cli": "^15.2.10",
    "@angular/compiler-cli": "^15.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/googlemaps": "^3.38.0",
    "@types/jasmine": "~4.3.0",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^6.0.118",
    "@types/socket.io-client": "^1.4.32",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~4.5.0",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~1.0.1",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "mi18n": "^0.3.4",
    "protractor": "^7.0.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~4.8.0"
  }
}

Here is angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "demo": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap-css-only/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.css",
              "node_modules/ionicons/css/ionicons.css",
              "node_modules/admin-lte-css/dist/css/AdminLTE.css",
              "node_modules/admin-lte-css/dist/css/skins/_all-skins.css",
              "src/assets/kendoui.css",
              "src/assets/sass/form-builder.scss",
              "src/assets/sass/form-render.scss",
              "node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeng/resources/themes/omega/theme.css",
              "node_modules/ng2-tree/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/jquery-ui-sortable/jquery-ui.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/moment/min/moment.min.js",
              "node_modules/chart.js/dist/Chart.js",
              "src/assets/dist/js/adminlte.js",
              "src/assets/hammerjs/hammer.js",
              "node_modules/jspdf/dist/jspdf.min.js",
              "node_modules/html2canvas/dist/html2canvas.min.js"             
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "demo:build:production"
            },
            "development": {
              "browserTarget": "demo:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "demo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "cli": {
    "analytics": "125d0ec8-f37c-4580-834c-591ee3bb8c6c"
  }
}
Here is tsconfig.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "include": [
    "node_modules/angular2-json2csv/src/csv.service.ts",
    "node_modules/ngx-inactivity/src/app/ngx-inactivity/index.ts",
    "src/main.ts", 
    "src/polyfills.ts",
    "src/*.ts",
    "src/app/**/*.ts"
    
    ],
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "enableIvy": false
  }
}
Here is tsconfig-app.json:
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

Here is tsconfig-spec.json:
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jasmine"
    ]
  },
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]`enter code here`
}

Here need solution for this issue.Thanks in advance

Answer 1

Bro, I suggest you do the following steps, As per my perception you are trying to update from angular version 5 to angular version 15 with ng update, this might not be a feasible solution, so try following the below steps

1. Create a new angular app with angular version 15
2. Take a backup of existing project code except discarding node modules
3. Now replace the src folder,add all the third-party dependencies in package.json, and add scripts or styles in the angular.json from the existing project in the newly created angular project
4. Now run 'npm i'
5. You might be getting some third-party dependencies version issues, then try to update third-party dependencies as well, then rerun 'npm i'

Keeping angular 5 to date is not a good practice, try to update angular once one or two years

I hope the above steps help you Stay Safe, Happy Coding.