fix(angular): fix ssr with runtime option (#145)

chihab · web-flow · commit c0b97fef3c50 · 2025-07-28T10:37:49.000+01:00
diff --git a/examples/nx-workspace/apps/ng-app-cli/package.json b/examples/nx-workspace/apps/ng-app-cli/package.json
@@ -30,7 +30,7 @@
     "@angular/platform-server": "^20.0.5",
     "@angular/router": "^20.0.0",
     "@angular/ssr": "^20.0.4",
-    "@ngx-env/builder": "workspace:20.1.0",
+    "@ngx-env/builder": "workspace:20.1.1",
     "express": "^5.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
@@ -44,7 +44,7 @@
     "@dotenv-run/core": "workspace:^1.3.8",
     "@dotenv-run/jest-angular": "workspace:^0.2.1",
     "@jest/transform": "^29.7.0",
-    "@ngx-env/builder": "workspace:^20.1.0",
+    "@ngx-env/builder": "workspace:^20.1.1",
     "@types/express": "^5.0.1",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^22.12.0",
diff --git a/examples/nx-workspace/apps/ng-app-cli/src/custom-theme.scss b/examples/nx-workspace/apps/ng-app-cli/src/custom-theme.scss
@@ -0,0 +1,31 @@
+// Include theming for Angular Material with `mat.theme()`.
+// This Sass mixin will define CSS variables that are used for styling Angular Material
+// components according to the Material 3 design spec.
+// Learn more about theming and how to use it for your application's
+// custom components at https://material.angular.dev/guide/theming
+@use "@angular/material" as mat;
+
+html {
+  @include mat.theme(
+    (
+      color: (
+        primary: mat.$azure-palette,
+        tertiary: mat.$blue-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  // Default the application to a light color theme. This can be changed to
+  // `dark` to enable the dark color theme, or to `light dark` to defer to the
+  // user's system settings.
+  color-scheme: light;
+
+  // Set a default background, font and text colors for the application using
+  // Angular Material's system-level CSS variables. Learn more about these
+  // variables at https://material.angular.dev/guide/system-variables
+  background-color: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
+  font: var(--mat-sys-body-medium);
+}
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @ngx-env/builder
 
+## 20.1.1
+
+### Patch Changes
+
+- Fix SSR with runtime option
+
 ## 20.1.0
 
 ### Minor Changes
diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngx-env/builder",
-  "version": "20.1.0",
+  "version": "20.1.1",
   "description": "Easily inject environment variables into your Angular applications",
   "author": "chihab <chihab@gmail.com>",
   "homepage": "https://github.com/chihab/ngx-env/tree/main/packages/angular",
diff --git a/packages/angular/src/builders/application/index.ts b/packages/angular/src/builders/application/index.ts
@@ -10,8 +10,10 @@ import { join } from "path";
 import { from, switchMap, tap } from "rxjs";
 import { NgxEnvSchema } from "../ngx-env/ngx-env-schema";
 import { getEnvironment } from "../utils/get-environment";
-import { indexHtml } from "../utils/index-html-build";
+import { writeRuntimeFile } from "../utils/write-ngx-env-runtime";
 import { getProjectCwd } from "../utils/project";
+import { replaceHtmlVars } from "../utils/replace-html-vars";
+import { indexHtmlTransformer } from "../utils/index-html-transform";
 
 export const executeWithEnv = (
   options: ApplicationBuilderOptions & NgxEnvSchema,
@@ -28,20 +30,30 @@ export const executeWithEnv = (
       });
       options.define = full;
       return fromAsyncIterable<BuilderOutput>(
-        buildApplication(options, context)
+        buildApplication(options, context, {
+          indexHtmlTransformer: async (html) => {
+            return indexHtmlTransformer(
+              html,
+              raw,
+              false,
+              dotEnvOptions.runtime
+            );
+          },
+        })
       ).pipe(
         tap(() => {
-          const outputDir = join(
-            context.workspaceRoot,
-            options.outputPath?.toString() ?? `dist/${context.target.project}`
-          );
-          indexHtml(
-            join(outputDir, "browser"),
-            options.ssr ? join(outputDir, "server") : null,
-            Array.isArray(options.localize) ? options.localize : [],
-            raw,
-            dotEnvOptions.runtime
-          );
+          if (dotEnvOptions.runtime) {
+            const outputDir = join(
+              context.workspaceRoot,
+              options.outputPath?.toString() ?? `dist/${context.target.project}`
+            );
+            writeRuntimeFile(
+              join(outputDir, "browser"),
+              options.ssr ? join(outputDir, "server") : null,
+              Array.isArray(options.localize) ? options.localize : [],
+              raw
+            );
+          }
         })
       );
     })
diff --git a/packages/angular/src/builders/browser-esbuild/index.ts b/packages/angular/src/builders/browser-esbuild/index.ts
@@ -10,7 +10,7 @@ import { join } from "path";
 import { from, switchMap, tap } from "rxjs";
 import { NgxEnvSchema } from "../ngx-env/ngx-env-schema";
 import { getEnvironment } from "../utils/get-environment";
-import { indexHtml } from "../utils/index-html-build";
+import { indexHtmlTransformerLegacy } from "../utils/index-html-transform-legacy";
 import { getProjectCwd } from "../utils/project";
 
 export const executeWithEnv = (
@@ -31,7 +31,7 @@ export const executeWithEnv = (
         buildEsbuildBrowser(options, context, undefined)
       ).pipe(
         tap(() => {
-          indexHtml(
+          indexHtmlTransformerLegacy(
             join(
               context.workspaceRoot,
               options.outputPath.toString(),
diff --git a/packages/angular/src/builders/browser/index.ts b/packages/angular/src/builders/browser/index.ts
@@ -7,7 +7,7 @@ import { join } from "path";
 import { from, switchMap, tap } from "rxjs";
 import { NgxEnvSchema } from "../ngx-env/ngx-env-schema";
 import { getEnvironment } from "../utils/get-environment";
-import { indexHtml } from "../utils/index-html-build";
+import { indexHtmlTransformerLegacy } from "../utils/index-html-transform-legacy";
 import { getProjectCwd } from "../utils/project";
 import { plugin } from "../utils/webpack-plugin";
 
@@ -26,7 +26,7 @@ export const executeWithEnv = (
         webpackConfiguration,
       }).pipe(
         tap(() => {
-          indexHtml(
+          indexHtmlTransformerLegacy(
             join(context.workspaceRoot, options.outputPath.toString()),
             null, // no ssr support with browser,
             Array.isArray(options.localize) ? options.localize : [],
diff --git a/packages/angular/src/builders/dev-server/index.ts b/packages/angular/src/builders/dev-server/index.ts
@@ -7,7 +7,7 @@ import type { DotenvRunOptions } from "@dotenv-run/core";
 import { env } from "@dotenv-run/core";
 import { catchError, combineLatest, switchMap } from "rxjs";
 import { getEnvironment } from "../utils/get-environment";
-import { indexHtml } from "../utils/index-html-serve";
+import { indexHtmlTransformer } from "../utils/index-html-transform";
 import { getProjectCwd } from "../utils/project";
 import { validateAndPrepareBuildContext } from "../utils/validate-prepare-context";
 
@@ -35,7 +35,7 @@ export const executeWithEnv = (
       });
       return executeDevServerBuilder(options, context, {
         indexHtmlTransformer: async (content: string) =>
-          indexHtml(content, raw, dotenvRunOptions.runtime),
+          indexHtmlTransformer(content, raw, true, dotenvRunOptions.runtime),
       });
     }),
     catchError((e) => {
diff --git a/packages/angular/src/builders/utils/index-html-build.ts b/packages/angular/src/builders/utils/index-html-build.ts
diff --git a/packages/angular/src/builders/utils/index-html-serve.ts b/packages/angular/src/builders/utils/index-html-serve.ts
diff --git a/packages/angular/src/builders/utils/index-html-transform-legacy.ts b/packages/angular/src/builders/utils/index-html-transform-legacy.ts
@@ -0,0 +1,58 @@
+import { type Dict } from "@dotenv-run/core";
+import { readFileSync, writeFileSync } from "fs";
+import * as glob from "glob";
+import { replaceHtmlVars } from "./replace-html-vars";
+import { writeRuntimeFile } from "./write-ngx-env-runtime";
+
+export function indexHtmlTransformerLegacy(
+  browserOutputDir: string,
+  serverOutputDir: string | null,
+  locales: string[] = [],
+  raw: Dict,
+  runtime = false
+) {
+  glob
+    .sync(`${browserOutputDir}/**/index{.html,.csr.html}`)
+    .forEach((filePath) => {
+      const html = readFileSync(filePath, "utf-8");
+      const content = replaceHtmlVars(html, raw); // Replace %VARIABLE% with the actual value
+      try {
+        writeFileSync(
+          filePath,
+          runtime
+            ? content.replace(
+                /<head>/,
+                `<head><script src="/ngx-env.js"></script>`
+              )
+            : content
+        );
+      } catch (e) {
+        console.log(`❌ Failed to replace variables in ${filePath} ❌`);
+        throw e;
+      }
+    });
+  if (serverOutputDir) {
+    glob.sync(`${serverOutputDir}/**/*html*`).forEach((filePath) => {
+      const html = readFileSync(filePath, "utf-8");
+      const content = replaceHtmlVars(html, raw); // Replace %VARIABLE% with the actual value
+      console.log(`📦 Replace variables in ${filePath}`);
+      try {
+        writeFileSync(
+          filePath,
+          runtime
+            ? content.replace(
+                /<head>/,
+                `<head><script src="/ngx-env.js"></script>`
+              )
+            : content
+        );
+      } catch (e) {
+        console.log(`❌ Failed to replace variables in ${filePath} ❌`);
+        throw e;
+      }
+    });
+  }
+  if (runtime) {
+    writeRuntimeFile(browserOutputDir, serverOutputDir, locales, raw);
+  }
+}
diff --git a/packages/angular/src/builders/utils/index-html-transform.ts b/packages/angular/src/builders/utils/index-html-transform.ts
@@ -0,0 +1,21 @@
+import type { Dict } from "@dotenv-run/core";
+import { replaceHtmlVars } from "./replace-html-vars";
+
+export function indexHtmlTransformer(
+  content: string,
+  raw: Dict,
+  serve: boolean,
+  runtime = false
+) {
+  const html = replaceHtmlVars(content, raw);
+  return runtime
+    ? html.replace(
+        /<head>/,
+        serve
+          ? `<head><script>globalThis._NGX_ENV_ = ${JSON.stringify(
+              raw
+            )}</script>`
+          : `<head><script src="ngx-env.js"></script>`
+      )
+    : html;
+}
diff --git a/packages/angular/src/builders/utils/replace-html-vars.ts b/packages/angular/src/builders/utils/replace-html-vars.ts
@@ -1,7 +1,7 @@
 import { Dict } from "@dotenv-run/core";
 import { escapeStringRegexp } from "./escape-string-regexp";
 
-export const variablesReducer = (content: string, raw: Dict) => {
+export const replaceHtmlVars = (content: string, raw: Dict) => {
   return Object.keys(raw).reduce(
     (html, key) =>
       html.replace(
diff --git a/packages/angular/src/builders/utils/webpack-plugin.ts b/packages/angular/src/builders/utils/webpack-plugin.ts
@@ -1,7 +1,7 @@
 import type { DotenvRunOptions } from "@dotenv-run/core";
 import { DotenvRunPlugin } from "@dotenv-run/webpack";
 import type { Configuration } from "webpack";
-import { indexHtml } from "./index-html-serve";
+import { indexHtmlTransformer } from "./index-html-transform";
 
 export function plugin(options: DotenvRunOptions, ssr = false) {
   const dotEnvPlugin = new DotenvRunPlugin(
@@ -16,7 +16,7 @@ export function plugin(options: DotenvRunOptions, ssr = false) {
       return webpackConfig;
     },
     indexHtml: async (content: string) => {
-      return indexHtml(content, raw, options.runtime);
+      return indexHtmlTransformer(content, raw, false, options.runtime);
     },
   };
 }
diff --git a/packages/angular/src/builders/utils/write-ngx-env-runtime.ts b/packages/angular/src/builders/utils/write-ngx-env-runtime.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@ngx-env/builder",`
`3`		`- "version": "20.1.0",`
	`3`	`+ "version": "20.1.1",`
`4`	`4`	`"description": "Easily inject environment variables into your Angular applications",`
`5`	`5`	`"author": "chihab <chihab@gmail.com>",`
`6`	`6`	`"homepage": "https://github.com/chihab/ngx-env/tree/main/packages/angular",`