-1

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.sstatic.net/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

1 Answer 1

Reset to default
0

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.

3
  • 1
    No it is not working still getting same error.. ./src/main.ts - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js): Error: Emit attempted before Angular Webpack plugin initialization. Error: Failed to initialize Angular compilation - NGCC failed.
    – KKR
    Commented Oct 18, 2023 at 12:28
  • Downgrade the typescript version to 4.8.0 "typescript": "~4.8.0", delete the package.lock.json, file then npm i, and then try to run
    – kanishkabc kanishk
    Commented Oct 18, 2023 at 12:37
  • After doing all these i'm still getting the same error: ./src/main.ts - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js): Error: Emit attempted before Angular Webpack plugin initialization. Error: Failed to initialize Angular compilation - NGCC failed.
    – KKR
    Commented Oct 18, 2023 at 12:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.