feat: add runtime support (#93)

.gitignore

@@ -3,3 +3,4 @@
 .DS_Store
 node_modules
 dist
+tmp

examples/.verdaccio/config.yml

@@ -0,0 +1,28 @@
+# path to a directory with all packages
+storage: ../tmp/local-registry/storage
+
+# a list of other known repositories we can talk to
+uplinks:
+  npmjs:
+    url: https://registry.npmjs.org/
+    maxage: 60m
+
+packages:
+  "**":
+    # give all users (including non-authenticated users) full access
+    # because it is a local registry
+    access: $all
+    publish: $all
+    unpublish: $all
+
+    # if package is not available locally, proxy requests to npm registry
+    proxy: npmjs
+
+# log settings
+logs:
+  type: stdout
+  format: pretty
+  level: warn
+
+publish:
+  allow_offline: true # set offline to true to allow publish offline

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

@@ -27,11 +27,13 @@
             "browser": "src/main.ts",
             "localize": ["fr"],
             "i18nMissingTranslation": "error",
-            "polyfills": ["zone.js", "src/polyfills.ts"],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "ngxEnv": {
               "prefix": "NGX_",
+              "verbose": true,
               "unsecure": true,
+              "runtime": true,
               "files": [".env.app", ".env"]
             },
             "assets": ["src/favicon.ico", "src/assets"],
@@ -74,7 +76,7 @@
             "main": "src/main.ts",
             "localize": ["fr"],
             "i18nMissingTranslation": "error",
-            "polyfills": ["zone.js", "src/polyfills.ts"],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "ngxEnv": {
               "prefix": "NGX_",
@@ -117,7 +119,7 @@
             "main": "src/main.ts",
             "localize": ["fr"],
             "i18nMissingTranslation": "error",
-            "polyfills": ["zone.js", "src/polyfills.ts"],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "ngxEnv": {
               "prefix": "NGX_",
@@ -185,7 +187,7 @@
         "test": {
           "builder": "@ngx-env/builder:karma",
           "options": {
-            "polyfills": ["zone.js", "zone.js/testing", "src/polyfills.ts"],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "ngxEnv": {

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

@@ -20,6 +20,7 @@
   "dependencies": {
     "@angular/animations": "^17.2.0",
     "@angular/common": "^17.2.0",
+    "@angular/localize": "^17.2.0",
     "@angular/compiler": "^17.2.0",
     "@angular/core": "^17.2.0",
     "@angular/forms": "^17.2.0",
@@ -37,24 +38,23 @@
     "@angular-devkit/build-angular": "^17.2.0",
     "@angular/cli": "^17.2.0",
     "@angular/compiler-cli": "^17.2.0",
-    "@angular/localize": "^17.2.0",
-    "@ngx-env/builder": "file:../../../packages/angular",
+    "@dotenv-run/core": "*",
+    "@dotenv-run/jest-angular": "*",
+    "@jest/transform": "^29.7.0",
+    "@ngx-env/builder": "*",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
+    "esbuild": "0.20.0",
     "jasmine-core": "~5.1.0",
+    "jest": "^29.7.0",
+    "jest-preset-angular": "14.0.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.2.2",
     "ts-jest": "^29.1.2",
-    "@jest/transform": "^29.7.0",
-    "esbuild": "0.20.0",
-    "jest": "^29.7.0",
-    "jest-preset-angular": "14.0.0",
-    "@dotenv-run/core": "*",
-    "@dotenv-run/jest-angular": "*"
+    "typescript": "~5.2.2"
   }
 }

examples/apps/ng-app-cli/server.ts

@@ -20,9 +20,12 @@ export function app(): express.Express {
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
-  server.get('*.*', express.static(browserDistFolder, {
-    maxAge: '1y'
-  }));
+  server.get(
+    '*.*',
+    express.static(browserDistFolder, {
+      maxAge: '1y',
+    })
+  );
 
   // All regular routes use the Angular engine
   server.get('*', (req, res, next) => {

examples/apps/ng-app-cli/src/app/app.config.server.ts

@@ -3,9 +3,7 @@ import { provideServerRendering } from '@angular/platform-server';
 import { appConfig } from './app.config';
 
 const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering()
-  ]
+  providers: [provideServerRendering()],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

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

@@ -1,9 +1,9 @@
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
-import { routes } from './app.routes';
 import { provideClientHydration } from '@angular/platform-browser';
+import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideClientHydration()]
+  providers: [provideRouter(routes), provideClientHydration()],
 };

examples/apps/ng-app-cli/src/env.d.ts

@@ -1,51 +1,13 @@
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}
-
-interface ImportMetaEnv {
-  /**
-   * Built-in environment variable.
-   * @see Docs https://github.com/chihab/dotenv-run/packages/angular#node_env.
-   */
+// Define the type of the environment variables.
+declare interface Env {
   readonly NODE_ENV: string;
-  // Add your environment variables below
-  // readonly NG_APP_API_URL: string;
+  // Replace the following with your own environment variables.
+  // Example: NGX_VERSION: string;
+  NGX_BRANCH: string;
+  NGX_VERSION: string;
   [key: string]: any;
 }
 
-/*
- * Remove all the deprecated code below if you're using import.meta.env (recommended)
- */
-
-/****************************** DEPREACTED **************************/
-/**
- * @deprecated process.env usage
- * prefer using import.meta.env
- * */
-// declare var process: {
-//   env: {
-//     NODE_ENV: string;
-//     [key: string]: any;
-//   };
-// };
-
-// If your project references @types/node directly (in you) or indirectly (as in RxJS < 7.6.0),
-// you might need to use the following declaration merging.
-// declare namespace NodeJS {
-//   export interface ProcessEnv {
-//     readonly NODE_ENV: string;
-//     // Add your environment variables below
-//   }
-// }
-
-// If you're using Angular Universal and process.env notation, you'll need to add the following to your tsconfig.server.json:
-/* In your tsconfig.server.json */
-// {
-//   "extends": "./tsconfig.app.json",
-//   ...
-//   "exclude": [
-//     "src/env.d.ts"
-//   ]
-// }
-
-/*********************************************************************/
+declare interface ImportMeta {
+  readonly env: Env;
+}

examples/apps/ng-app-cli/src/locale/messages.fr.xlf

@@ -4,23 +4,20 @@
     <body>
       <trans-unit id="156685006078229661" datatype="html">
         <source>Attribute string</source>
-        <target>Attribute string</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/app.component.html</context>
           <context context-type="linenumber">3</context>
         </context-group>
       </trans-unit>
       <trans-unit id="398840060331148207" datatype="html">
         <source>element string</source>
-        <target>element string</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/app.component.html</context>
           <context context-type="linenumber">3,4</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2023484548631819319" datatype="html">
         <source>Hello world</source>
-        <target>Hello world</target>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/app.component.ts</context>
           <context context-type="linenumber">14</context>

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

@@ -1,3 +1,5 @@
+import '@ngx-env/builder/runtime';
+
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';

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

@@ -5,11 +5,6 @@
     "outDir": "./out-tsc/app",
     "types": ["node", "@angular/localize"]
   },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts",
-    "src/main.server.ts",
-    "server.ts"
-  ],
+  "files": ["src/main.ts", "src/main.server.ts", "server.ts"],
   "include": ["src/**/*.d.ts"]
 }

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

@@ -6,10 +6,5 @@
     "esModuleInterop": true,
     "module": "es2022"
   },
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.jest.ts",
-    "src/polyfills.ts",
-    "src/**/*.d.ts"
-  ]
+  "include": ["src/**/*.spec.ts", "src/**/*.jest.ts", "src/**/*.d.ts"]
 }

examples/apps/ng-app-webpack/angular.json

@@ -25,13 +25,8 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -82,4 +77,4 @@
       }
     }
   }
-}
+}

examples/apps/ng-app-webpack/tsconfig.app.json

@@ -5,11 +5,6 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
 }

examples/apps/ng-app-webpack/tsconfig.spec.json

@@ -3,16 +3,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
   },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/test.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }

examples/package.json

@@ -10,13 +10,19 @@
   "devDependencies": {
     "@dotenv-run/cli": "^1.3.5",
     "@dotenv-run/load": "^1.3.4",
-    "@dotenv-run/webpack": "^1.3.4",
     "@dotenv-run/rollup": "^1.3.4",
-    "webpack": "5.90.1",
-    "serve": "^14.2.1",
+    "@dotenv-run/webpack": "^1.3.4",
+    "@nx/js": "^18.2.1",
     "@playwright/test": "^1.37.1",
-    "webpack-cli": "^5.0.0",
+    "nx": "^16.5.5",
     "rollup": "^3.0.0",
-    "nx": "^16.5.5"
-  }
+    "serve": "^14.2.1",
+    "verdaccio": "^5.0.4",
+    "webpack": "5.90.1",
+    "webpack-cli": "^5.0.0"
+  },
+  "nx": {
+    "includedScripts": []
+  },
+  "dependencies": {}
 }

examples/project.json

@@ -0,0 +1,14 @@
+{
+  "name": "platform",
+  "$schema": "node_modules/nx/schemas/project-schema.json",
+  "targets": {
+    "local-registry": {
+      "executor": "@nx/js:verdaccio",
+      "options": {
+        "port": 4873,
+        "config": ".verdaccio/config.yml",
+        "storage": "tmp/local-registry/storage"
+      }
+    }
+  }
+}

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-env/builder",
-  "version": "17.2.3",
+  "version": "17.3.0-alpha.0",
   "description": "Easily inject environment variables into your Angular applications",
   "author": "chihab <[email protected]>",
   "homepage": "https://github.com/chihab/ngx-env/tree/main/packages/angular",
@@ -16,7 +16,8 @@
     "dist",
     "builders.json",
     "collection.json",
-    "README.md"
+    "README.md",
+    "runtime.mjs"
   ],
   "builders": "builders.json",
   "schematics": "./collection.json",
@@ -29,7 +30,7 @@
     "copy-dist": "ts-node tools/schema-dist.ts"
   },
   "dependencies": {
-    "@dotenv-run/esbuild": "^1.3.4",
+    "@dotenv-run/esbuild": "^1.3.5",
     "@dotenv-run/webpack": "^1.3.4",
     "glob": "^10.3.10"
   },