@ngx-env/builder Mistargets File Path for index.server.html. ( Nx + Angular ) monorepo
Abdulali97 opened this issue · 4 comments
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'
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"
}Thanks for detailing the issue. I was able to reproduce it.
Fixed in 17.1.2, could you please test it?
Note when using Nx: #47 (comment)
@chihab Tested with version 17.1.2 and the issue is fixed. Thank you for the quick fix!