feat: add runtime support (#93)

Author: chihab

.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';