Hot reload using @ngx-env/builder

[Ionito]

Hi, I have already working the @ngx-env lib on my project (using nx and angular 17). It works great! thanks so much for the support @chihab :-) The only issue that I found, and is making me crazy is that after replacing @nx/angular:dev-server with the @ngx-env/builder I lost the hot reload when developing. After making any change on my app I need to stop and restart the server to see the change. I try setting the options for the dev-server in my project.json like, liveReload, watchto true, but nothing of this work... Do you have any clue about this?

I leave here my project.json file in case it is useful

Thanks in advance for the help!

{
  "name": "advisor-desktop",
  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "sourceRoot": "apps/advisor/desktop/src",
  "prefix": "ad-de",
  "targets": {
    "build": {
      "executor": "@ngx-env/builder:application",
      "outputs": ["{options.outputPath}"],
      "options": {
        "allowedCommonJsDependencies": [
          "@bugsnag/js",
          "decimal.js",
          "marked",
          "query-string"
        ],
        "outputPath": "dist/apps/advisor/desktop",
        "index": "apps/advisor/desktop/src/index.html",
        "browser": "apps/advisor/desktop/src/main.ts",
        "polyfills": ["apps/advisor/desktop/src/polyfills.ts"],
        "tsConfig": "apps/advisor/desktop/tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": [
          "apps/advisor/desktop/src/assets",
          {
            "glob": "**/*",
            "input": "locales",
            "output": "/locales/"
          }
        ],
        "styles": [
          "libs/tui/dist/tui/tui.css",
          "libs/tui/src/styles/devex.theme.css"
        ],
        "scripts": [],
        "ngxEnv": {
          "runtime": true
        }
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2.5mb",
              "maximumError": "3mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "8kb"
            }
          ],
          "outputHashing": "all"
        },
        "staging": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2.5mb",
              "maximumError": "3mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "8kb"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "optimization": false,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "executor": "@ngx-env/builder:dev-server",
      "options": {
        "proxyConfig": "apps/advisor/desktop/src/proxy.conf.json",
        "buildTarget": "advisor-desktop:build",
        "open": true
      },
      "configurations": {
        "production": {
          "buildTarget": "advisor-desktop:build:production"
        },
        "staging": {
          "browserTarget": "advisor-desktop:build:staging"
        },
        "development": {
          "buildTarget": "advisor-desktop:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    "extract-i18n": {
      "executor": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "buildTarget": "advisor-desktop:build"
      }
    },
    "lint": {
      "executor": "@nx/eslint:lint"
    },
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/apps/advisor/desktop"],
      "options": {
        "jestConfig": "apps/advisor/desktop/jest.config.ts"
      }
    }
  },
  "cli": {
    "cache": {
      "enabled": false
    }
  },
  "tags": []
}

here my dev dependencies versions...

  "@angular-devkit/build-angular": "17.3.9",
    "@angular-devkit/core": "17.3.9",
    "@angular-devkit/schematics": "17.3.9",
    "@angular-eslint/eslint-plugin": "17.3.0",
    "@angular-eslint/eslint-plugin-template": "17.3.0",
    "@angular-eslint/template-parser": "17.3.0",
    "@angular/cli": "~17.3.0",
    "@angular/compiler-cli": "17.3.9",
    "@angular/language-service": "17.3.9",
    "@ngx-env/builder": "^18.0.2",
    "@nx/angular": "18.3.5",
    "@nx/cypress": "18.3.5",
    "@nx/eslint": "18.3.5",
    "@nx/eslint-plugin": "18.3.5",
    "@nx/jest": "18.3.5",
    "@nx/js": "18.3.5",
    "@nx/web": "18.3.5",
    "@nx/workspace": "18.3.5",
    "@schematics/angular": "17.3.9",
    "nx": "18.3.5",

[chihab]

would it be possible to have a simple repo reproducing the issue? (or the steps to reproduce it: like npx create-nx-workspace@18....)

[Ionito]

Sure! here the test repo https://github.com/Ionito/testApp

nx serve test-app

You can try there that the live reloading stop working on serve. Tell me please if I can help you with something else. Big thanks for your help!

[chihab]

Could you rather use @ngx-env/builder": "^17.0.0"?

[Ionito]

yes @chihab, it works!!! thanks for your help! 🫶 I will stay in this version, don't know what improvements v18 introduces...