Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@ngx-env/builder Mistargets File Path for index.server.html. ( Nx + Angular ) monorepo #77

Closed
Abdulali97 opened this issue Jan 24, 2024 · 4 comments
Assignees
Labels
bug Something isn't working

Comments

@Abdulali97
Copy link

Abdulali97 commented Jan 24, 2024

I'm currently facing an issue with @ngx-env/builder. During the build(production) process, an error shows up that says the builder couldn't find the file index.server.html. Here's the error message I'm getting:

Failed to replace variables in /Users/abdulali/dev/silicon/apps/client/dist/apps/client/server/index.server.html
Error: ENOENT: no such file or directory, open '/Users/abdulali/dev/silicon/apps/client/dist/apps/client/server/index.server.html'

Screenshot 2024-01-24 at 3 04 10 AM

and it just works! even with this error I can use .env and pass the env variable during the build :)

However, my index.server.html file seems to be correctly generated and is located on this path

/Users/abdulali/dev/silicon/dist/apps/client/server/index.server.html.

After doing a bit of digging, it looks like the issue stems from how @ngx-env/builder is trying to construct the path to index.server.html. It seems to be basing this on our project's current working directory but is not correctly considering the output directory setting from the project.json file (which is dist/apps/client).
Here's the setting from the buildWithPlugin function in @ngx-env/builder/dist/builders/application/index.js:

(0, esbuild_index_html_1.indexHtml)((0, path_1.join)(cwd, options.outputPath.toString()), raw, !!options.ssr);

From my understanding, the outcome of the above is apps/client/dist/apps/client but according to our project.json, it should be just dist/apps/client

I'm not sure how to go about resolving this issue. If anyone has encountered a similar issue or has any guidance, it would be greatly appreciated.

additional details
folder tree sample

.
├── Dockerfile
├── README.md
├── apps
│   ├── api
│   ├── client
│   │   ├── jest.config.ts
│   │   ├── project.json
│   │   ├── proxy.conf.json
│   │   ├── server.ts
│   │   ├── src
│   │   │   ├── app
│   │   │   ├── assets
│   │   │   ├── env.d.ts
│   │   │   ├── environments
│   │   │   │   ├── environment.development.ts
│   │   │   │   └── environment.ts
│   │   │   ├── index.html
│   │   │   ├── main.server.ts
│   │   │   ├── main.ts
│   │   │   └── test-setup.ts
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.editor.json
│   │   ├── tsconfig.json
│   │   └── tsconfig.spec.json
├──dist/
└── apps
    └── client
        ├── 3rdpartylicenses.txt
        ├── browser
        │   ├── index.html
        │   ├── main-WRO5BJZ2.js
        │   ├── polyfills-LZBJRJJE.js
        ├── prerendered-routes.json
        └── server
            ├── index.server.html
            ├── main.server.mjs
            ├── polyfills.server.mjs
            ├── render-utils.server.mjs
            └── server.mjs
├── migrations.json
├── nx.json
├── package.json
├── tsconfig.base.json
└── yarn.lock

project.json

{
  "name": "client",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "prefix": "org",
  "sourceRoot": "apps/client/src",
  "tags": [],
  "targets": {
    "build": {
      "executor": "@ngx-env/builder:application",
      "outputs": ["{options.outputPath}"],
      "options": {
        "allowedCommonJsDependencies": ["undici"],
        "outputPath": "dist/apps/client",
        "index": "apps/client/src/index.html",
        "browser": "apps/client/src/main.ts",
        "polyfills": ["zone.js"],
        "tsConfig": "apps/client/tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": ["apps/client/src/favicon.ico", "apps/client/src/assets"],
        "styles": ["apps/client/src/styles.scss"],
        "scripts": [],
        "server": "apps/client/src/main.server.ts",
        "prerender": true,
        "ssr": {
          "entry": "apps/client/server.ts"
        }
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "2mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "optimization": false,
          "extractLicenses": false,
          "sourceMap": true,
          "fileReplacements": [
            {
              "replace": "apps/client/src/environments/environment.ts",
              "with": "apps/client/src/environments/environment.development.ts"
            }
          ]
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "executor": "@ngx-env/builder:dev-server",
      "configurations": {
        "production": {
          "buildTarget": "client:build:production"
        },
        "development": {
          "buildTarget": "client:build:development"
        }
      },
      "defaultConfiguration": "development",
      "options": {
        "proxyConfig": "apps/client/proxy.conf.json"
      }
    },
    "extract-i18n": {
      "executor": "@ngx-env/builder:extract-i18n",
      "options": {
        "buildTarget": "client:build"
      }
    },
    "lint": {
      "executor": "@nx/eslint:lint",
      "outputs": ["{options.outputFile}"]
    },
    "test": {
      "executor": "@ngx-env/builder:karma",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "apps/client/jest.config.ts"
      }
    },
    "serve-static": {
      "executor": "@nx/web:file-server",
      "options": {
        "buildTarget": "client:build",
        "staticFilePath": "dist/apps/client/browser"
      }
    }
  }
}

package.json

"dependencies": {
    "@angular/animations": "~17.0.0",
    "@angular/cdk": "^17.0.1",
    "@angular/common": "~17.0.0",
    "@angular/compiler": "~17.0.0",
    "@angular/core": "~17.0.0",
    "@angular/fire": "^17.0.0",
    "@angular/forms": "~17.0.0",
    "@angular/material": "^17.0.1",
    "@angular/platform-browser": "~17.0.0",
    "@angular/platform-browser-dynamic": "~17.0.0",
    "@angular/platform-server": "~17.0.0",
    "@angular/router": "~17.0.0",
    "@angular/ssr": "~17.0.0",
    "@ngrx/component-store": "17.0.1",
    "@ngrx/effects": "17.0.1",
    "@ngrx/entity": "17.0.1",
    "@ngrx/router-store": "17.0.1",
    "@ngrx/store": "17.0.1",
    "@ngx-env/builder": "^17.1.1",
    "@nx/angular": "17.2.3",
    "express": "~4.18.2",
    "firebase-admin": "^12.0.0",
    "firebase-functions": "^4.5.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~17.0.0",
    "@angular-devkit/core": "~17.0.0",
    "@angular-devkit/schematics": "~17.0.0",
    "@angular-eslint/eslint-plugin": "~17.0.0",
    "@angular-eslint/eslint-plugin-template": "~17.0.0",
    "@angular-eslint/template-parser": "~17.0.0",
    "@angular/cli": "~17.0.0",
    "@angular/compiler-cli": "~17.0.0",
    "@angular/language-service": "~17.0.0",
    "@ngrx/schematics": "17.0.1",
    "@ngrx/store-devtools": "17.0.1",
    "@nx/cypress": "17.2.3",
    "@nx/eslint": "17.2.3",
    "@nx/eslint-plugin": "17.2.3",
    "@nx/jest": "17.2.3",
    "@nx/js": "17.2.3",
    "@nx/web": "17.2.3",
    "@nx/workspace": "17.2.3",
    "@schematics/angular": "~17.0.0",
    "@swc-node/register": "~1.6.7",
    "@swc/core": "~1.3.85",
    "@types/express": "4.17.14",
    "@types/jest": "^29.4.0",
    "@types/node": "18.16.9",
    "@typescript-eslint/eslint-plugin": "^6.9.1",
    "@typescript-eslint/parser": "^6.9.1",
    "autoprefixer": "^10.4.0",
    "concurrently": "^8.2.2",
    "cypress": "^13.0.0",
    "eslint": "8.48.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-cypress": "^2.13.4",
    "jasmine-marbles": "~0.9.1",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-preset-angular": "13.1.4",
    "jsonc-eslint-parser": "^2.1.0",
    "nx": "17.2.3",
    "postcss": "^8.4.5",
    "prettier": "^2.6.2",
    "tailwindcss": "^3.0.2",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~5.2.2"
  }
@chihab chihab added the bug Something isn't working label Jan 24, 2024
@chihab chihab self-assigned this Jan 24, 2024
@chihab
Copy link
Owner

chihab commented Jan 24, 2024

Thanks for detailing the issue. I was able to reproduce it.

@chihab
Copy link
Owner

chihab commented Jan 24, 2024

Fixed in 17.1.2, could you please test it?

@chihab
Copy link
Owner

chihab commented Jan 24, 2024

Note when using Nx: #47 (comment)

@Abdulali97
Copy link
Author

@chihab Tested with version 17.1.2 and the issue is fixed. Thank you for the quick fix!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants