错误：在 Angular Webpack 插件初始化之前尝试发出（错误：在 Angular Webpack 插件初始化之前尝试发出）

Question

我正在做的是，我在 Angular 15 中创建了新项目，并从 Angular 版本 5 中移动了代码。我已经修复了所有错误，但仍坚持这个错误。这里也是我当前的 Angular 版本详细信息：

Angular CLI：15.2.10 节点：18.18.2 包管理器：npm 10.2.0 操作系统：win32 x64

我收到以下错误： [错误]：

这是package.json文件：

{
  "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

兄弟，我建议您执行以下步骤，根据我的看法，您正在尝试使用 ng update 从 Angular 版本 5 更新到 Angular 版本 15，这可能不是一个可行的解决方案，所以请尝试按照以下步骤操作

1. 使用 Angular 版本 15 创建新的 Angular 应用程序
2. 备份现有项目代码，但丢弃节点模块除外
3. 现在替换src文件夹，添加所有第三方依赖项 package.json，并在 angular.json 中添加脚本或样式 新创建的 Angular 项目中的现有项目
4. 现在运行“npm i”
5. 您可能会遇到一些第三方依赖项版本问题，然后尝试 要更新第三方依赖项，然后重新运行“npm i”

保持 Angular 5 最新并不是一个好的做法，请尝试更新 Angular 一两年一次

希望以上步骤对您有帮助 保持安全，快乐编码。