chore(ngx-env): add compatibility with Angular 21

.github/workflows/main.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 22
       - uses: pnpm/action-setup@v4
         with:
           version: 10

examples/nx-workspace/apps/ng-app-cli/angular.json

@@ -26,7 +26,6 @@
           "options": {
             "browser": "src/main.ts",
             "tsConfig": "tsconfig.app.json",
-            "polyfills": ["zone.js"],
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.css"],
             "ngxEnv": {
@@ -196,7 +195,7 @@
             "buildTarget": "ng-app-cli:build"
           }
         },
-        "test": {
+        "test-karma": {
           "builder": "@ngx-env/builder:karma",
           "options": {
             "watch": false,
@@ -214,14 +213,8 @@
             "browsers": "ChromeHeadless"
           }
         },
-        "test-unit": {
-          "builder": "@ngx-env/builder:unit-test",
-          "options": {
-            "browsers": ["chromium"],
-            "buildTarget": "::development",
-            "tsConfig": "tsconfig.spec.json",
-            "runner": "vitest"
-          }
+        "test": {
+          "builder": "@ngx-env/builder:unit-test"
         }
       }
     }

examples/nx-workspace/apps/ng-app-cli/jest.config.ts

@@ -0,0 +1,29 @@
+import type { Config } from 'jest';
+import { default as preset } from 'jest-preset-angular/presets/index.js';
+
+const basePreset: Config = preset.createEsmPreset();
+
+const jestConfig = {
+  ...basePreset,
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+  testMatch: ['<rootDir>/src/app/**/*.(spec|jest).ts'],
+  cache: false,
+  moduleNameMapper: {
+    ...basePreset.moduleNameMapper,
+    '^rxjs(/operators$)?$':
+      '<rootDir>/node_modules/rxjs/dist/bundles/rxjs.umd.js',
+    tslib: '<rootDir>/node_modules/tslib/tslib.es6.mjs',
+  },
+  transform: {
+    '^.+\\.(ts)$': [
+      '@dotenv-run/jest-angular',
+      {
+        useESM: true,
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+    ...basePreset.transform,
+  },
+};
+
+export default jestConfig;

examples/nx-workspace/apps/ng-app-cli/package.json

@@ -13,52 +13,59 @@
     "pretest:karma": "ng config projects.ng-app-cli.architect.test-karma.options.ngxEnv.prefix 'NGX_'",
     "test:unit": "NODE_ENV=test NGX_BRANCH=test ng test-unit",
     "test": "NODE_ENV=test NGX_BRANCH=test ng run ng-app-cli:test",
-    "test:jest": "NODE_ENV=test node --experimental-vm-modules ./node_modules/jest/bin/jest.js --config ./jest.config.mjs",
+    "test:karma": "NODE_ENV=test NGX_BRANCH=test ng run ng-app-cli:test-karma",
+    "test:jest": "NODE_ENV=test node --experimental-vm-modules ./node_modules/jest/bin/jest.js --config ./jest.config.ts",
     "e2e": "playwright test",
     "static": "serve dist/ng-app-cli/browser -p 8085",
-    "serve:ssr:ng-app-ssr": "node dist/ng-app-ssr/server/server.mjs"
+    "serve:ssr:ng-app-ssr": "node dist/ng-app-cli/server/server.mjs"
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/compiler": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/forms": "^20.0.0",
-    "@angular/localize": "^20.0.5",
-    "@angular/platform-browser": "^20.0.0",
-    "@angular/platform-browser-dynamic": "^20.0.5",
-    "@angular/platform-server": "^20.0.5",
-    "@angular/router": "^20.0.0",
-    "@angular/ssr": "^20.0.4",
-    "@ngx-env/builder": "workspace:20.1.1",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/localize": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
+    "@angular/platform-server": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "@angular/ssr": "^21.0.2",
+    "@ngx-env/builder": "workspace:^21.0.0",
     "express": "^5.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20.0.4",
-    "@angular/build": "^20.0.5",
-    "@angular/cli": "^20.0.4",
-    "@angular/compiler-cli": "^20.0.0",
+    "@angular-devkit/build-angular": "^21.0.2",
+    "@angular/build": "^21.0.2",
+    "@angular/cli": "^21.0.2",
+    "@angular/compiler-cli": "^21.0.0",
     "@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.1",
+    "@jest/transform": "^30.2.0",
+    "@ngx-env/builder": "workspace:^21.0.0",
     "@types/express": "^5.0.1",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^22.12.0",
-    "@vitest/browser": "^3.2.4",
+    "@vitest/browser": "^4.0.8",
+    "@vitest/browser-playwright": "^4.0.15",
     "esbuild": "0.23.0",
     "jasmine-core": "~5.7.0",
-    "jest": "^29.7.0",
-    "jest-preset-angular": "^14.6.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jest-preset-angular": "^16.0.0",
+    "jsdom": "^27.2.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.8.2",
-    "tslib": "~2.8.1"
+    "playwright": "^1.47.2",
+    "serve": "^14.2.3",
+    "tslib": "~2.8.1",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
   }
 }

examples/nx-workspace/apps/ng-app-cli/setup-jest.ts

@@ -1,4 +1,7 @@
-import 'jest-preset-angular/setup-jest.mjs';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';
+
+setupZoneTestEnv();
+
 import { env } from '@dotenv-run/core';
 env({ root: '../../..', files: ['.env', '.env.app'] });
 

examples/nx-workspace/apps/ng-app-cli/src/app/app.config.ts

@@ -1,7 +1,6 @@
 import {
   ApplicationConfig,
   provideBrowserGlobalErrorListeners,
-  provideZonelessChangeDetection,
 } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
@@ -14,7 +13,6 @@ import {
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideZonelessChangeDetection(),
     provideRouter(routes),
     provideClientHydration(withEventReplay()),
   ],

examples/nx-workspace/apps/ng-app-cli/src/app/app.component.spec.ts → examples/nx-workspace/apps/ng-app-cli/src/app/app.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import { AppComponent } from './app';
 
 describe('AppComponent', () => {
   let component: AppComponent;

examples/nx-workspace/apps/ng-app-cli/src/app/app.component.ts → examples/nx-workspace/apps/ng-app-cli/src/app/app.ts

@@ -5,8 +5,8 @@ import { environment } from '../environments/environment';
 @Component({
   selector: 'app-root',
   imports: [RouterOutlet],
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  templateUrl: './app.html',
+  styleUrls: ['./app.css'],
 })
 export class AppComponent {
   title = `Hello world`;

examples/nx-workspace/apps/ng-app-cli/src/main.server.ts

@@ -1,8 +1,12 @@
 import '@ngx-env/builder/runtime';
-import { bootstrapApplication } from '@angular/platform-browser';
+import {
+  BootstrapContext,
+  bootstrapApplication,
+} from '@angular/platform-browser';
+import { AppComponent } from './app/app';
 import { config } from './app/app.config.server';
-import { AppComponent } from './app/app.component';
 
-const bootstrap = () => bootstrapApplication(AppComponent, config);
+const bootstrap = (context: BootstrapContext) =>
+  bootstrapApplication(AppComponent, config, context);
 
 export default bootstrap;

examples/nx-workspace/apps/ng-app-cli/src/main.ts

@@ -1,8 +1,6 @@
-/// <reference types="@angular/localize" />
-
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
+import { AppComponent } from './app/app';
 
 bootstrapApplication(AppComponent, appConfig).catch((err) =>
   console.error(err)

examples/nx-workspace/apps/ng-app-cli/src/server.ts

@@ -51,7 +51,7 @@ app.use((req, res, next) => {
  * Start the server if this module is the main entry point.
  * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
  */
-if (isMainModule(import.meta.url)) {
+if (isMainModule(import.meta.url) || process.env['pm_id']) {
   const port = process.env['PORT'] || 4000;
   app.listen(port, (error) => {
     if (error) {

examples/nx-workspace/apps/ng-app-cli/tsconfig.json

@@ -19,7 +19,6 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "typeCheckHostBindings": true,
     "strictTemplates": true
   },
   "files": [],

examples/nx-workspace/apps/ng-app-cli/tsconfig.spec.json

@@ -4,11 +4,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["vitest/globals", "jasmine"]
   },
-  "include": [
-    "src/**/*.ts"
-  ]
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
 }

examples/nx-workspace/package.json

@@ -4,7 +4,7 @@
   "version": "2.0.0",
   "scripts": {
     "build:all": "nx run-many --target=build  --parallel",
-    "test:all": "nx run-many --target=test,test:jest --all --parallel --verbose",
+    "test:all": "nx run-many --target=test,test:jest,test:karma --all --parallel --verbose",
     "e2e:all": "nx run-many --target=e2e --all --parallel"
   },
   "devDependencies": {
@@ -17,9 +17,7 @@
     "@playwright/test": "^1.47.2",
     "@types/node": "^22.12.0",
     "nx": "21.2.2",
-    "playwright": "^1.47.2",
     "rollup": "^3.29.5",
-    "serve": "^14.2.3",
     "verdaccio": "^6.0.5",
     "webpack": "5.99.8",
     "webpack-cli": "^5.1.4",

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-env/builder",
-  "version": "20.1.1",
+  "version": "21.0.0",
   "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",
@@ -33,21 +33,21 @@
     "glob": "^10.4.5"
   },
   "devDependencies": {
-    "@angular/build": "^20.1.0",
-    "@angular-devkit/architect": "^0.2001.00",
-    "@angular-devkit/build-angular": "^20.1.0",
-    "@angular-devkit/core": "^20.1.0",
-    "@angular-devkit/schematics": "^20.1.0",
+    "@angular/build": "^21.0.2",
+    "@angular-devkit/architect": "^0.2100.0",
+    "@angular-devkit/build-angular": "^21.0.2",
+    "@angular-devkit/core": "^21.0.0",
+    "@angular-devkit/schematics": "^21.0.0",
     "@dotenv-run/core": "workspace:^1.3.7",
     "@dotenv-run/webpack": "workspace:^1.5.2",
     "cpy": "^8.1.2",
-    "rxjs": "7.8.2",
+    "rxjs": "~7.8.0",
     "ts-node": "^10.9.2",
-    "typescript": "~5.8.0",
+    "typescript": "~5.9.2",
     "webpack": "5.99.8"
   },
   "peerDependencies": {
-    "@angular/build": "^20.1.0"
+    "@angular/build": "^21.0.2"
   },
   "optionalDependencies": {
     "@dotenv-run/webpack": "workspace:^1.5.2"

packages/angular/src/builders/application/application.json

@@ -6,7 +6,7 @@
   "properties": {
     "assets": {
       "type": "array",
-      "description": "List of static application assets.",
+      "description": "Define the assets to be copied to the output directory. These assets are copied as-is without any further processing or hashing.",
       "default": [],
       "items": {
         "$ref": "#/definitions/assetPattern"
@@ -441,7 +441,7 @@
     },
     "outputHashing": {
       "type": "string",
-      "description": "Define the output filename cache-busting hashing mode.",
+      "description": "Define the output filename cache-busting hashing mode.\n\n- `none`: No hashing.\n- `all`: Hash for all output bundles. \n- `media`: Hash for all output media (e.g., images, fonts, etc. that are referenced in CSS files).\n- `bundles`: Hash for output of lazy and main bundles.",
       "default": "none",
       "enum": ["none", "all", "media", "bundles"]
     },
@@ -611,7 +611,7 @@
     },
     "outputMode": {
       "type": "string",
-      "description": "Defines the build output target. 'static': Generates a static site for deployment on any static hosting service. 'server': Produces an application designed for deployment on a server that supports server-side rendering (SSR).",
+      "description": "Defines the type of build output artifact. 'static': Generates a static site build artifact for deployment on any static hosting service. 'server': Generates a server application build artifact, required for applications using hybrid rendering or APIs.",
       "enum": ["static", "server"]
     }
   },

packages/angular/src/builders/browser/browser.json

@@ -6,7 +6,7 @@
   "properties": {
     "assets": {
       "type": "array",
-      "description": "List of static application assets.",
+      "description": "Define the assets to be copied to the output directory. These assets are copied as-is without any further processing or hashing.",
       "default": [],
       "items": {
         "$ref": "#/definitions/assetPattern"
@@ -319,7 +319,7 @@
     },
     "outputHashing": {
       "type": "string",
-      "description": "Define the output filename cache-busting hashing mode.",
+      "description": "Define the output filename cache-busting hashing mode.\n\n- `none`: No hashing.\n- `all`: Hash for all output bundles. \n- `media`: Hash for all output media (e.g., images, fonts, etc. that are referenced in CSS files).\n- `bundles`: Hash for output of lazy and main bundles.",
       "default": "none",
       "enum": ["none", "all", "media", "bundles"]
     },

packages/angular/src/builders/dev-server/dev-server.json

@@ -53,6 +53,13 @@
         }
       ]
     },
+    "define": {
+      "description": "Defines global identifiers that will be replaced with a specified constant value when found in any JavaScript or TypeScript code including libraries. The value will be used directly. String values must be put in quotes. Identifiers within Angular metadata such as Component Decorators will not be replaced.",
+      "type": "object",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
     "headers": {
       "type": "object",
       "description": "Custom HTTP headers to be added to all responses.",