chihab / dotenv-run

Seamlessly load environment variables. Supports cli, esbuild, rollup, vite, webpack, angular. ESM and Monorepos.
238 stars 17 forks source link

@ngx-env not working with `localize` option in SSR #81

Closed yonguelink closed 6 months ago

yonguelink commented 6 months ago

@ngx-env/builder:application does not support the localize key from Angular's default way of doing i18n - https://angular.io/guide/i18n-common-merge#generate-application-variants-for-each-locale - when using SSR.

If localize is set to anything other than false, then ng build will fail with the following error:

❌ Failed to replace variables in path\to\project\ngx-env-localize\dist\ngx-env-localize\server\index.server.html ❌
Error: ENOENT: no such file or directory, open 'path\to\project\ngx-env-localize\dist\ngx-env-localize\server\index.server.html'
    at readFileSync (node:fs:453:20)
    at replaceInFile (path\to\project\ngx-env-localize\node_modules\@ngx-env\builder\dist\builders\utils\esbuild-index-html.js:10:47)
    at indexHtml (path\to\project\ngx-env-localize\node_modules\@ngx-env\builder\dist\builders\utils\esbuild-index-html.js:24:13)
    at Object.next (path\to\project\ngx-env-localize\node_modules\@ngx-env\builder\dist\builders\application\index.js:18:48)
    at path\to\project\ngx-env-localize\node_modules\rxjs\dist\cjs\internal\operators\tap.js:20:81
    at OperatorSubscriber._this._next (path\to\project\ngx-env-localize\node_modules\rxjs\dist\cjs\internal\operators\OperatorSubscriber.js:33:21)
    at Subscriber.next (path\to\project\ngx-env-localize\node_modules\rxjs\dist\cjs\internal\Subscriber.js:51:18)
    at handleAsyncIterator (path\to\project\ngx-env-localize\node_modules\@angular-devkit\architect\src\api.js:39:24) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'path\\to\\project\\ngx-env-localize\\dist\\ngx-env-localize\\server\\index.server.html'
}

The issue is easy to spot in the source files:

https://github.com/chihab/dotenv-run/blob/a614db48e37c730dc3bd72979a17f250d406078f/packages/angular/src/builders/utils/esbuild-index-html.ts#L28C1-L30C6

The outputDir references dist/project-name & then the path to the index.server.html file is hard coded, whereas localize dynamically adds all the locales defined in it (e.g.: en), so the full path looks like this: dist/project-name/server/en/index.server.html

Reproduction

Here's a repo reproducing the issue: https://github.com/yonguelink/ngx-env-localize-issue-reproduction

The issue can also be reproduced without any source by doing the following:

  1. Create the project & add the features

    ng new --ssr ngx-env-localize
    cd ngx-env-localize
    ng add @angular/localize
    ng add @ngx-env/builder
  2. Configure the localization minimally in angular.json

    ng config projects.ngx-env-localize.i18n.sourceLocale en
    ng config projects.ngx-env-localize.architect.build.options.localize true
  3. Try to build with ng build

chihab commented 6 months ago

Thanks for the detailed explanation