@ngx-env/builder - npm Package Compare versions

Comparing version 15.2.1 to 16.0.0

dist/builders/plugin.js

@@ -18,2 +18,3 @@ "use strict";
 const path = require("path");
+const chalk = require("chalk");
 const NG_APP_ENV = 'NG_APP_ENV';
@@ -31,6 +32,10 @@ function escapeStringRegexp(str) {
         // results for everyone
-        env && env !== "test" && `${dotenvBase}.local`,
+        env !== "test" && `${dotenvBase}.local`,
         env && `${dotenvBase}.${env}`,
         dotenvBase,
     ].filter(Boolean);
+    console.log(`${chalk.green('-')} Environment files: `);
+    dotenvFiles.forEach((dotenvFile) => {
+        console.log(`${chalk.green(' ✔')} ${dotenvFile}`);
+    });
     // Load environment variables from .env* files. Suppress warnings using silent
@@ -49,3 +54,4 @@ // if this file is missing. dotenv will never modify any environment variables
     const processEnv = Object.assign(Object.assign({}, process.env), { [NG_APP_ENV]: env });
-    return Object.keys(processEnv)
+    console.log(`- Injected keys:`);
+    const values = Object.keys(processEnv)
         .filter((key) => prefix.test(key) || key === NG_APP_ENV)
@@ -57,2 +63,4 @@ .reduce((env, key) => {
         env.full[`process.env.${key}`] = value;
+        env.full[`import.meta.env.${key}`] = value;
+        console.log(`${chalk.green(' ✔')} ${key}`);
         return env;
@@ -64,6 +72,9 @@ }, {
     });
+    return values;
 }
 function plugin(options, ssr = false) {
-    console.log('@ngx-env/builder using prefix', options.prefix);
+    console.log(`------- ${chalk.bold('@ngx-env/builder')} -------`);
+    console.log(`${chalk.green('-')} Prefix: `, options.prefix);
     const { raw, stringified, full } = getClientEnvironment(new RegExp(`^${options.prefix}`, 'i'));
+    console.log('---------------------------------\n');
     return {
@@ -73,2 +84,3 @@ webpackConfiguration: (webpackConfig) => __awaiter(this, void 0, void 0, function* () {
                 "process.env": stringified,
+                "import.meta.env": stringified,
             }));
@@ -75,0 +87,0 @@ return webpackConfig;

dist/schematics/ng-add/template/env.d.ts

@@ -1,2 +0,25 @@
-// This should work in most cases
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+interface ImportMetaEnv {
+  /**
+   * Built-in environment variable.
+   * @see Docs https://github.com/chihab/ngx-env#ng_app_env.
+   */
+  readonly NG_APP_ENV: string;
+  // Add your environment variables below
+  // readonly NG_APP_API_URL: 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 meta.env
+ * */
 declare var process: {
@@ -11,11 +34,11 @@ env: {
 // you might need to use the following declaration merging.
-declare namespace NodeJS {
-  export interface ProcessEnv {
-    readonly NG_APP_ENV: string;
-    // Add your environment variables below
-  }
-}
+// declare namespace NodeJS {
+//   export interface ProcessEnv {
+//     readonly NG_APP_ENV: string;
+//     // Add your environment variables below
+//   }
+// }
 
-// If you're using Angular Universal, you'll need to add the following to your tsconfig.server.json:
-/* In your tsconfig.server.json */ 
+// 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 */
 // {
@@ -27,2 +50,4 @@ //   "extends": "./tsconfig.app.json",
 //   ]
-// }
+// }
+
+/*********************************************************************/

package.json

 {
   "name": "@ngx-env/builder",
-  "version": "15.2.1",
+  "version": "16.0.0",
   "description": "Easily inject environment variables into your Angular applications",
@@ -5,0 +5,0 @@ "author": "chihab <[e-mail]>",

README.md

@@ -1,2 +0,2 @@
-# @ngx-env/builder
+<h1>@ngx-env/builder</h1>
 
@@ -10,2 +10,24 @@ <img src="https://raw.githubusercontent.com/chihab/ngx-env/main/logo.png" alt="dotenv" width="90px" align="right" />
 
+
+- [Quick start](#quick-start)
+- [Using Environment Variables](#using-environment-variables)
+  - [`NG_APP_*` or Custom Prefix](#ng_app_-or-custom-prefix)
+  - [`NG_APP_ENV`](#ng_app_env)
+  - [Usage In Templates](#usage-in-templates)
+  - [Usage in Index.html](#usage-in-indexhtml)
+- [Defining Environment Variables](#defining-environment-variables)
+  - [Command Line](#command-line)
+    - [Windows (cmd.exe)](#windows-cmdexe)
+    - [Windows (Powershell)](#windows-powershell)
+    - [Linux, macOS (Bash)](#linux-macos-bash)
+  - [In `.env`](#in-env)
+- [Good Practices](#good-practices)
+- [Usage with Docker](#usage-with-docker)
+- [Known Issues](#known-issues)
+  - [`process` variable](#process-variable)
+  - [Property comes from an index signature](#property-comes-from-an-index-signature)
+- [How It Works?](#how-it-works)
+- [Credits](#credits)
+- [License](#license)
+
 # Quick start
@@ -73,3 +95,3 @@
 
-## ⚠ Important
+**⚠ Important**
 
@@ -219,4 +241,6 @@ > Do not store any secrets (such as private API keys) in your Angular app!
 
-`@ngx-env/builder` loads `.env` files with these specific names for the following `NG_APP_ENV` values, files on the bottom have less priority than files on the top.
+`@ngx-env/builder` loads `.env` files with these specific names for the following `NG_APP_ENV` values, files on the top have less priority than files on the bottom.
 
+An env file for a specific mode (e.g. .env.production) will take higher priority than a generic one (e.g. .env).
+
 | valid `.env` filenames     | `NG_APP_ENV=*` | `NG_APP_ENV=test` |
@@ -229,4 +253,6 @@ | -------------------------- | -------------- | ----------------- |
 
-### Expanding `.env`
+In addition, environment variables that already exist when the CLI is executed have the highest priority and will not be overwritten by .env files. For example, when running `NG_APP_SOME_KEY=123 ng serve`.
 
+**Expanding `.env`**
+
 You can expand variables already available on your machine for use in your `.env`
@@ -249,6 +275,2 @@
 
-# How It Works
-
-I wrote an article on [InDepth.dev](https://indepth.dev/tutorials/angular/inject-environment-variables) explaining how it works.
-
 # Good Practices
@@ -304,2 +326,42 @@
 
+# Usage with Docker
+
+@ngx-env/builder can be used with Docker to provide environment-specific configuration during the build and deployment of an Angular application.
+
+The Dockerfile below will build an Angular application with the `NGX_API_URL` environment variable set to the value of the `NGX_API_URL` build argument.
+
+```dockerfile
+FROM node:18
+
+# Get the arguments from the command line
+ARG NGX_API_URL
+
+# Set the environment variables
+ENV NGX_API_URL=$NGX_API_URL
+
+################### Build ans Serve the application ######################
+# You can replace this part with your own build process
+WORKDIR /app
+RUN npx -y @angular/cli@15 new ng-app --defaults
+WORKDIR /app/ng-app
+# In your own project, you would rather have the dependencies in the package.json file
+RUN npx ng add @ngx-env/builder --skip-confirmation
+RUN npm add @ngx-env/core
+# In your own project, you would rather have the configuration in the angular.json file
+RUN npx ng config projects.ng-app.architect.build.options.ngxEnv.prefix 'NGX_'
+# Some sample code to show that the environment variable is available
+RUN echo 'console.log("NGX_API_URL", process.env["NGX_API_URL"])' >>src/main.ts
+RUN npm run build
+EXPOSE 8080
+CMD ["npx", "http-server", "dist/ng-app", "-p", "8080"]
+################################################################
+```
+
+Build and run the Docker image:
+
+```shell
+docker build --build-arg NGX_API_URL=http://staging.api.com -t ngx-env-demo .
+docker run -p 8080:8080 ngx-env-demo
+```
+
 # Known Issues
@@ -342,3 +404,6 @@
 ```
+# How It Works?
 
+I wrote an article on [InDepth.dev](https://indepth.dev/tutorials/angular/inject-environment-variables) explaining how it works.
+
 # Credits
@@ -345,0 +410,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92236

increased by4.37%

Lines of code

1953

increased by1.77%

Number of lines in readme file

410

increased by18.84%

No dependency changes