2

I am working on an Angular application that relies on the ng-jhipster library, specifically version 0.16.0. Here's the relevant section from the package.json of ng-jhipster:

{
  "name": "ng-jhipster",
  "description": "A Jhipster util library for Angular",
  "repository": {
    "type": "git",
    "url": "https://github.com/jhipster/ng-jhipster.git"
  },
  "keywords": [
    "jhipster",
    "angular",
    "angular2"
  ],
  "author": "Deepu KS",
  "license": "Apache-2.0",
  "bugs": {
    "url": "https://github.com/jhipster/generator-jhipster/issues"
  },
  "homepage": "https://www.jhipster.tech",
  "peerDependencies": {
    "@angular/core": "^10.0.0",
    "@angular/router": "^10.0.0",
    "@angular/common": "^10.0.0",
    "@angular/forms": "^10.0.0",
    "@ng-bootstrap/ng-bootstrap": "^6.1.0 || ^7.0.0",
    "@ngx-translate/core": "^12.1.2 || ^13.0.0",
    "@ngx-translate/http-loader": "^5.0.0 || ^6.0.0",
    "@fortawesome/angular-fontawesome": "^0.6.1 || ^0.7.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.21",
    "@fortawesome/free-solid-svg-icons": "^5.10.1",
    "rxjs": "^6.5.2"
  },
  "devDependencies": {
    "@angular/animations": "^10.0.0",
    "@angular/common": "^10.0.0",
    "@angular/compiler": "^10.0.0",
    "@angular/compiler-cli": "^10.0.0",
    "@angular/core": "^10.0.0",
    "@angular/forms": "^10.0.0",
    "@angular/platform-browser": "^10.0.0",
    "@angular/platform-browser-dynamic": "^10.0.0",
    "@angular/platform-server": "^10.0.0",
    "@angular/router": "^10.0.0",
    "@fortawesome/angular-fontawesome": "0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@ng-bootstrap/ng-bootstrap": "^6.0.0",
    "@ngx-translate/core": "^12.1.1",
    "@ngx-translate/http-loader": "^5.0.0",
    "@types/jest": "26.0.3",
    "@types/node": "13.13.4",
    "@typescript-eslint/eslint-plugin": "^2.30.0",
    "@typescript-eslint/eslint-plugin-tslint": "^2.30.0",
    "@typescript-eslint/parser": "^2.30.0",
    "codelyzer": "^5.2.1",
    "core-js": "^3.6.4",
    "eslint": "^6.8.0",
    "eslint-config-jhipster": "0.0.1",
    "eslint-config-prettier": "^6.10.0",
    "husky": "4.2.5",
    "jest": "26.1.0",
    "jest-preset-angular": "8.2.1",
    "lint-staged": "9.2.3",
    "ng-packagr": "^10.0.0",
    "prettier": "^2.0.5",
    "reflect-metadata": "0.1.13",
    "rimraf": "^3.0.2",
    "rxjs": "^6.5.4",
    "tsickle": "0.36.0",
    "tslint": "^6.0.0",
    "typescript": "3.9.5",
    "zone.js": "0.10.2"
  },
  "version": "0.16.0",
  "lint-staged": {
    "{,src/**/}*.{md,json,ts,html}": [
      "prettier --write",
      "git add"
    ]
  },
  "scripts": {
    "cleanup": "rimraf dist/*",
    "format": "prettier --write \"{,src/**/}*.{md,json,ts,html}\"",
    "lint": "eslint . --ext .ts",
    "lint:fix": "npm run lint -- --fix",
    "test": "npm run lint && jest --config tests/jest.conf.js",
    "test:watch": "npm run test -- --watch",
    "build": "ng-packagr -p ng-package.prod.json",
    "build:dev": "ng-packagr -p ng-package.dev.json --watch",
    "release": "git push && git push --tags && npm publish dist/",
    "clean-release": "npm run cleanup && npm run build && npm run release",
    "release:patch": "npm test && npm version patch -a -m \"Update to %s\" && npm run clean-release",
    "release:minor": "npm test && npm version minor -a -m \"Update to %s\" && npm run clean-release",
    "release:major": "npm test && npm version major -a -m \"Update to %s\" && npm run clean-release"
  }
}

The challenge is that my Angular application needs to be upgraded to the latest version, 16.2.0. However, ng-jhipster hasn't been updated for roughly 4 years and currently supports Angular up to version 10.0.0.

Given this scenario, what would be the recommended steps or best practices to upgrade ng-jhipster to be compatible with Angular 16.2.0? Any insights or experiences related to this would be greatly appreciated!

1 Answer 1

1

The JHipster Angular lib is now a part of generated projects, you can see it in action in sample app in different folders like src/main/webapp/app/shared.

So you have 4 alternatives :

  1. You use new jhipster v8 classes, copy them from a generated project to your project and adapt your project (code, build process)
  2. You clone the git repo of ng-jhipster library to fork it, adapt it to latest version of Angular and other deps and build library by yourself.
  3. A variant of #2 : you import ng-jhipster lib 0.16.0 source into your own project if you don't want to manage a library and don't care about change history
  4. Last alternative that should work only for trivial projects : you generate a new project and import your custom code in to it.

I omitted jhipster upgrade alternative because it might not work if you are far behind JHipster current version (v8).

Personally, I did follow option #3 3 months after I initially generated our project, strategy was to cut dependency on JHipster as soon as project is mature enough and I never regret it. It was 2 years ago.

Another thing to consider is frontend build: starting from JHipster 7, it uses Angular CLI while before it was using a custom webpack configuration. So you might have to provision some time too to migrate your build to Angular CLI.

1
  • 1
    Currently using Approach #3 A variant of #2 : you import ng-jhipster lib 0.16.0 source into your own project if you don't want to manage a library and don't care about change history Aug 21 at 1:42

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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