Issue while building with v17 when SSR is disabled

[PrinceGupta1999]

Hi I am facing this error while building an angular application (no server or ssr) with the ngx-env/builder. The build succeeds and just straight after that I am receiving this error with an exit code 1. ng serve works fine

✖ NGX_ENV: Cannot read index.html in dist folder
✖ Error: ENOENT: no such file or directory, open '/Users/princegupta/mykaarma/mykaarma-js-starter-template/dist/demo-app/server/index.server.html'

Versions "@ngx-env/builder": "^17.0.0-alpha.0" "@angular/cli": "^17.0.0", "@angular/compiler-cli": "^17.0.0",

Angular.json This is basically a brand new application with few libraries installed and the environments configured

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "demo-app": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@ngx-env/builder:application",
          "options": {
            "baseHref": "/demo-app",
            "outputPath": "dist/demo-app",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "@angular/material/prebuilt-themes/indigo-pink.css",
              "node_modules/primeng/resources/themes/md-light-indigo/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "src/styles.css"
            ],
            "scripts": [],
            "sourceMap": true,
            "optimization": true,
            "outputHashing": "all",
            "budgets": [
              {
                "type": "initial",
                "maximumWarning": "500kb",
                "maximumError": "1mb"
              },
              {
                "type": "anyComponentStyle",
                "maximumWarning": "2kb",
                "maximumError": "4kb"
              }
            ]
          },
          "configurations": {
            "prod": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": false
            },
            "qa-aws": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.qa-aws.ts"
                }
              ]
            },
            "devvm": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.devvm.ts"
                }
              ]
            },
            "local": {
              "optimization": false,
              "extractLicenses": false
            }
          },
          "defaultConfiguration": "prod"
        },
        "serve": {
          "builder": "@ngx-env/builder:dev-server",
          "configurations": {
            "prod": {
              "buildTarget": "demo-app:build:prod",
              "proxyConfig": "src/proxy.conf.json"
            },
            "qa-aws": {
              "buildTarget": "demo-app:build:qa-aws",
              "proxyConfig": "src/proxy.conf.json"
            },
            "devvm": {
              "buildTarget": "demo-app:build:devvm",
              "proxyConfig": "src/proxy.conf.json"
            },
            "local": {
              "buildTarget": "demo-app:build:local"
            }
          },
          "defaultConfiguration": "local"
        },
        "extract-i18n": {
          "builder": "@ngx-env/builder:extract-i18n",
          "options": {
            "buildTarget": "demo-app:build"
          }
        },
        "test": {
          "builder": "@ngx-env/builder:karma",
          "options": {
            "polyfills": ["zone.js", "zone.js/testing"],
            "tsConfig": "tsconfig.spec.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "@angular/material/prebuilt-themes/indigo-pink.css",
              "node_modules/primeng/resources/themes/md-light-indigo/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
          }
        }
      }
    }
  },
  "cli": {
    "schematicCollections": ["@angular-eslint/schematics"]
  }
}

[chihab]

Hi, is NGX_ENV env variable set? If not, try NGX_ENV=production npm run build

Could you share the logs from ngx-env/builder?

[PrinceGupta1999]

Hi, no the NGX_ENV variable was not set. Is it a requirement ?

These are the relevant logs from when I run ng build

ng build
⠋ Building...---------------------------------
- Verbose:  true
- Prefix:  NG_APP
- Root directory:  .
- Working directory:  /Users/princegupta/mykaarma/mykaarma-js-starter-template
- Environment files: 
 ✔ /Users/princegupta/mykaarma/mykaarma-js-starter-template/.env
- Injected keys:
 ✔ NG_APP_ENV => undefined
 ✔ NG_APP_HOSTNAME
 ✔ NG_APP_ROLLOUT_STAGE
 ✔ NG_APP_VERSION
---------------------------------
... application build logs

Application bundle generation complete. [7.647 seconds]
---------------------------------
- Verbose:  true
- Prefix:  NG_APP
- Root directory:  .
- Working directory:  /Users/princegupta/mykaarma/mykaarma-js-starter-template
- Environment files: 
 ✔ /Users/princegupta/mykaarma/mykaarma-js-starter-template/.env
- Injected keys:
 ✔ NG_APP_ENV => undefined
 ✔ NG_APP_HOSTNAME
 ✔ NG_APP_ROLLOUT_STAGE
 ✔ NG_APP_VERSION
---------------------------------

✖ NGX_ENV: Cannot read index.html in dist folder
✖ Error: ENOENT: no such file or directory, open '/Users/princegupta/mykaarma/mykaarma-js-starter-template/dist/demo-app/server/index.server.html'

[chihab]

If you're using the NGX_ENV environment variable inside your code then I guess it should be defined. Are you using it?

Just to be sure, when you set it, do you still have the error?

[PrinceGupta1999]

I am not using NGX_ENV anywhere. The error remains the same even when I set the NGX_ENV variable. These are the logs

princegupta@princegupta mykaarma-js-starter-template % NGX_ENV=production npm run build

> demo-app@0.0.0 build
> ng build

⠋ Building...---------------------------------
- Verbose:  true
- Prefix:  NG_APP
- Root directory:  .
- Working directory:  /Users/princegupta/mykaarma/mykaarma-js-starter-template
- Environment files: 
 ✔ /Users/princegupta/mykaarma/mykaarma-js-starter-template/.env
- Injected keys:
 ✔ NG_APP_ENV => undefined
 ✔ NG_APP_HOSTNAME
 ✔ NG_APP_ROLLOUT_STAGE
 ✔ NG_APP_VERSION
---------------------------------

⠇ Building...▲ [WARNING] bundle initial exceeded maximum budget. Budget 500.00 kB was not met by 197.13 kB with a total of 697.13 kB.

⠧ Building...▲ [WARNING] Module 'shimmer' used by 'node_modules/@opentelemetry/instrumentation/build/esm/instrumentation.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

Initial Chunk Files   | Names         |  Raw Size | Estimated Transfer Size
main-DRJPZ65I.js      | main          | 359.91 kB |                90.08 kB
styles-FQ3MBTND.css   | styles        | 303.94 kB |                26.18 kB
polyfills-GUX7YTFP.js | polyfills     |  33.29 kB |                10.76 kB

                      | Initial Total | 697.13 kB |               127.02 kB

Application bundle generation complete. [6.059 seconds]
---------------------------------
- Verbose:  true
- Prefix:  NG_APP
- Root directory:  .
- Working directory:  /Users/princegupta/mykaarma/mykaarma-js-starter-template
- Environment files: 
 ✔ /Users/princegupta/mykaarma/mykaarma-js-starter-template/.env
- Injected keys:
 ✔ NG_APP_ENV => undefined
 ✔ NG_APP_HOSTNAME
 ✔ NG_APP_ROLLOUT_STAGE
 ✔ NG_APP_VERSION
---------------------------------

✖ NGX_ENV: Cannot read index.html in dist folder
✖ Error: ENOENT: no such file or directory, open '/Users/princegupta/mykaarma/mykaarma-js-starter-template/dist/demo-app/server/index.server.html'

[chihab]

You're probably not using ssr in the application: you don't have "ssr" entry in your angular.json.

That's an issue as the builder has to handle this use case, I will send a fix soon.

Thanks for reporting the problem.

[PrinceGupta1999]

Great, thanks. Looking forward to the fix

[chihab]

Could you test the fix please?

npx ng add @ngx-env/builder@17.0.1-alpha.0

[PrinceGupta1999]

The fix works, thanks. Small question, I am getting this warning only when running ng serve (not during build).

Warning: Forcing the use of the esbuild-based build system with third-party builders may cause unexpected behavior and/or build failures.
The 'browser-esbuild' builder is a compatibility builder which will be removed in a future major version in favor of the 'application' builder.

It should not be causing any issues right ?

[chihab]

It should not, hopefully :)

The new esbuild based build system does not officially support esbuild plugins yet (which ngx-env is using), hence the warning from the angular builder package. That is why the ngx-env package is still in alpha.

If a future version of Angular makes the plugin system stable and you update your angular app, the warning would disappear.

Feel free to use the stable "future legacy" webpack builder as described here: https://github.com/chihab/ngx-env/issues/61#issuecomment-1807050922

[PrinceGupta1999]

Thanks, I will keep using this package. I actually came across this builder from the custom-webpack builder because I wanted to use the faster esbuild / vite speeds that the new Angular versions allow for